1.章节介绍

前一篇介绍了项目的API接口设计,这一篇编写用户管理模块,需要的朋友可以拿去自己定制。:)

2.获取源码

源码是捐赠方式获取,详细请QQ联系我 :)!

3.项目截图

列表操作

动态图

4.用户管理

页面布局

  1. <template>
  2. <div>
  3. <!-- 面包屑导航区 -->
  4. <el-breadcrumb separator-class="el-icon-arrow-right">
  5. <el-breadcrumb-item>首页</el-breadcrumb-item>
  6. <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  7. <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  8. </el-breadcrumb>
  9. <!-- 卡片视图 -->
  10. <el-card>
  11. <!-- 搜索 添加 -->
  12. <el-row :gutter="20">
  13. <el-col :span="6">
  14. <el-input placeholder="请输入内容"
  15. v-model="queryInfo.query"
  16. clearable
  17. @clear="getUserList">
  18. <el-button slot="append"
  19. icon="el-icon-search"
  20. @click="getUserList"></el-button>
  21. </el-input>
  22. </el-col>
  23. <el-col :span="4">
  24. <el-button type="primary"
  25. @click="addDialogVisible = true">添加用户</el-button>
  26. </el-col>
  27. </el-row>
  28. <!-- 用户列表区域 -->
  29. <el-table :data="userlist"
  30. border
  31. stripe>
  32. <!-- stripe: 斑马条纹
  33. border:边框-->
  34. <el-table-column type="index"
  35. label="序号"></el-table-column>
  36. <el-table-column prop="username"
  37. label="用户名"></el-table-column>
  38. <el-table-column prop="nickname"
  39. label="昵称"></el-table-column>
  40. <el-table-column prop="email"
  41. label="邮箱"></el-table-column>
  42. <el-table-column prop="mobile"
  43. label="电话"></el-table-column>
  44. <el-table-column label="操作">
  45. <template slot-scope="scope">
  46. <el-button type="primary"
  47. icon="el-icon-edit"
  48. size="mini"
  49. circle
  50. @click="showEditDialog(scope.row.id)"></el-button>
  51. <el-button type="danger"
  52. icon="el-icon-delete"
  53. size="mini"
  54. circle
  55. @click="removeUserById(scope.row.id)"></el-button>
  56. </template>
  57. </el-table-column>
  58. </el-table>
  59. <!-- 分页区域 -->
  60. <el-pagination @size-change="handleSizeChange"
  61. @current-change="handleCurrentChange"
  62. :current-page="queryInfo.pageNo"
  63. :page-size="queryInfo.pageSize"
  64. layout="total, prev, pager, next, jumper"
  65. :total="total"></el-pagination>
  66. </el-card>
  67. <!-- 添加用户的对话框 -->
  68. <el-dialog title="添加用户"
  69. :visible.sync="addDialogVisible"
  70. width="30%"
  71. @close="addDialogClosed">
  72. <!-- 内容主体 -->
  73. <el-form :model="addUserForm"
  74. ref="addUserFormRef"
  75. :rules="addUserFormRules"
  76. label-width="100px">
  77. <el-form-item label="用户名"
  78. prop="username">
  79. <el-input v-model="addUserForm.username"></el-input>
  80. </el-form-item>
  81. <el-form-item label="昵称"
  82. prop="nickname">
  83. <el-input v-model="addUserForm.nickname"></el-input>
  84. </el-form-item>
  85. <el-form-item label="密码"
  86. prop="password">
  87. <el-input v-model="addUserForm.password"></el-input>
  88. </el-form-item>
  89. <el-form-item label="邮箱"
  90. prop="email">
  91. <el-input v-model="addUserForm.email"></el-input>
  92. </el-form-item>
  93. <el-form-item label="手机"
  94. prop="mobile">
  95. <el-input v-model="addUserForm.mobile"></el-input>
  96. </el-form-item>
  97. </el-form>
  98. <span slot="footer"
  99. class="dialog-footer">
  100. <el-button @click="addDialogVisible = false">取 消</el-button>
  101. <el-button type="primary"
  102. @click="addUser">确 定</el-button>
  103. </span>
  104. </el-dialog>
  105. <!-- 修改用户的对话框 -->
  106. <el-dialog title="修改用户信息"
  107. :visible.sync="editDialogVisible"
  108. width="30%"
  109. @close="editDialogClosed">
  110. <!-- 内容主体 -->
  111. <el-form :model="editUserForm"
  112. ref="editUserFormRef"
  113. :rules="editUserFormRules"
  114. label-width="70px">
  115. <el-form-item label="用户名">
  116. <el-input v-model="editUserForm.username"
  117. disabled></el-input>
  118. </el-form-item>
  119. <el-form-item label="昵称">
  120. <el-input v-model="editUserForm.nickname"></el-input>
  121. </el-form-item>
  122. <el-form-item label="邮箱"
  123. prop="email">
  124. <el-input v-model="editUserForm.email"></el-input>
  125. </el-form-item>
  126. <el-form-item label="手机"
  127. prop="mobile">
  128. <el-input v-model="editUserForm.mobile"></el-input>
  129. </el-form-item>
  130. </el-form>
  131. <span slot="footer"
  132. class="dialog-footer">
  133. <el-button @click="editDialogVisible = false">取 消</el-button>
  134. <el-button type="primary"
  135. @click="editUser">确 定</el-button>
  136. </span>
  137. </el-dialog>
  138. </div>
  139. </template>

数据和事件

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. // 获取用户列表查询参数对象
  6. queryInfo: {
  7. query: "",
  8. // 当前页数
  9. pageNo: 1,
  10. // 每页显示多少数据
  11. pageSize: 10,
  12. },
  13. userlist: [],
  14. total: 0,
  15. // 添加用户对话框
  16. addDialogVisible: false,
  17. // 用户添加
  18. addUserForm: {
  19. username: "",
  20. nickname: "",
  21. password: "",
  22. email: "",
  23. mobile: "",
  24. },
  25. // 用户添加表单验证规则
  26. addUserFormRules: {
  27. username: [
  28. { required: true, message: "请输入用户名", trigger: "blur" },
  29. {
  30. min: 2,
  31. max: 10,
  32. message: "用户名的长度在2~10个字",
  33. trigger: "blur",
  34. },
  35. ],
  36. password: [
  37. { required: true, message: "请输入用户密码", trigger: "blur" },
  38. {
  39. min: 6,
  40. max: 18,
  41. message: "用户密码的长度在6~18个字",
  42. trigger: "blur",
  43. },
  44. ],
  45. email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  46. mobile: [
  47. { required: true, message: "请输入手机号码", trigger: "blur" },
  48. ],
  49. },
  50. // 修改用户
  51. editDialogVisible: false,
  52. editUserForm: {},
  53. // 编辑用户表单验证
  54. editUserFormRules: {
  55. email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  56. mobile: [
  57. { required: true, message: "请输入手机号码", trigger: "blur" },
  58. ],
  59. },
  60. // 分配角色对话框
  61. setRoleDialogVisible: false,
  62. // 当前需要被分配角色的用户
  63. userInfo: {},
  64. // 所有角色数据列表
  65. rolesLsit: [],
  66. // 已选中的角色Id值
  67. selectRoleId: "",
  68. };
  69. },
  70. created() {
  71. this.getUserList();
  72. },
  73. methods: {
  74. async getUserList() {
  75. const { data: res } = await this.$http.get("user/list", {
  76. params: this.queryInfo,
  77. });
  78. if (res.code !== 200) {
  79. return this.$message.error("获取用户列表失败!");
  80. }
  81. this.userlist = res.data.records;
  82. this.total = res.data.total;
  83. },
  84. // 监听 pageSize改变的事件
  85. handleSizeChange(newSize) {
  86. // console.log(newSize)
  87. this.queryInfo.pageSize = newSize;
  88. this.getUserList();
  89. },
  90. // 监听 页码值 改变事件
  91. handleCurrentChange(newSize) {
  92. // console.log(newSize)
  93. this.queryInfo.pageNo = newSize;
  94. this.getUserList();
  95. },
  96. // 监听 添加用户对话框的关闭事件
  97. addDialogClosed() {
  98. this.$refs.addUserFormRef.resetFields();
  99. },
  100. // 添加用户
  101. addUser() {
  102. // 提交请求前,表单预验证
  103. this.$refs.addUserFormRef.validate(async (valid) => {
  104. // console.log(valid)
  105. // 表单预校验失败
  106. if (!valid) return;
  107. const { data: res } = await this.$http.post(
  108. "user/modify",
  109. this.addUserForm
  110. );
  111. if (res.code !== 200) {
  112. this.$message.error("添加用户失败!");
  113. return;
  114. }
  115. this.$message.success("添加用户成功!");
  116. // 隐藏添加用户对话框
  117. this.addDialogVisible = false;
  118. this.getUserList();
  119. });
  120. },
  121. // 编辑用户信息
  122. async showEditDialog(id) {
  123. const { data: res } = await this.$http.get("user/" + id);
  124. if (res.code !== 200) {
  125. return this.$message.error("查询用户信息失败!");
  126. }
  127. this.editUserForm = res.data;
  128. this.editDialogVisible = true;
  129. },
  130. // 监听修改用户对话框的关闭事件
  131. editDialogClosed() {
  132. this.$refs.editUserFormRef.resetFields();
  133. },
  134. // 修改用户信息
  135. editUser() {
  136. // 提交请求前,表单预验证
  137. this.$refs.editUserFormRef.validate(async (valid) => {
  138. // console.log(valid)
  139. // 表单预校验失败
  140. if (!valid) return;
  141. const { data: res } = await this.$http.post("user/modify", {
  142. id: this.editUserForm.id,
  143. email: this.editUserForm.email,
  144. mobile: this.editUserForm.mobile,
  145. });
  146. if (res.code !== 200) {
  147. this.$message.error("更新用户信息失败!");
  148. }
  149. // 隐藏添加用户对话框
  150. this.editDialogVisible = false;
  151. this.$message.success("更新用户信息成功!");
  152. this.getUserList();
  153. });
  154. },
  155. // 删除用户
  156. async removeUserById(id) {
  157. const confirmResult = await this.$confirm("确定删除该用户?", "提示", {
  158. confirmButtonText: "确定",
  159. cancelButtonText: "取消",
  160. type: "warning",
  161. }).catch((err) => err);
  162. // 点击确定 返回值为:confirm
  163. // 点击取消 返回值为: cancel
  164. if (confirmResult !== "confirm") {
  165. return this.$message.info("已取消删除");
  166. }
  167. const { data: res } = await this.$http.post("user/remove/" + id);
  168. if (res.code !== 200) return this.$message.error("删除用户失败!");
  169. this.$message.success("删除用户成功!");
  170. this.getUserList();
  171. },
  172. },
  173. };
  174. </script>

Vue+SpringBoot+ElementUI实战学生管理系统-5.用户管理模块的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

    在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...

  2. vue后台管理系统——用户管理模块

    电商后台管理系统的功能--用户管理模块 1. 用户管理概述 通过后台管理用户的账号信息,具体包括用户信息的展示.添加.修改.删除.角色分配.账号启用/注销等功能. 用户信息列表展示 添加用户 修改用户 ...

  3. Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块

    用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...

  4. TestCase--网站创建新用户管理模块

    对于web测试,用户权限管理模块是必测的一个点,所以今天就来总结一下创建新用户管理模块的测试用例 参考图如下: 测试用例设计如下: 一.功能测试 1.  什么都不输入,单击“立即提交”,页面是否有提示 ...

  5. Linux实战教学笔记14:用户管理初级(下)

    第十四节 用户管理初级(下) 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,用户查询相关命令id,finger,users,w,who,last,lastlog,gr ...

  6. Linux实战教学笔记15:用户管理初级(下)

    第十四节 用户管理初级(下) 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,用户查询相关命令id,finger,users,w,who,last,lastlog,gr ...

  7. Linux实战教学笔记14:用户管理初级(上)

    第十四节 用户管理初级(上) 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,账号管理 1.1 管理用户命令汇总 命令 注释说明(特殊颜色的必须掌握) useradd增 ...

  8. .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

    下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错. 我们框架的组织机构结合实际分成了5种类型,分别为 ...

  9. 【php增删改查实例】第十四节 - 用户管理模块(起步)

    从这一节开始,开始着手开发部门管理模块. 之后的内容就在此基础上进行增加. 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块. 打开这个文件,新建一个userManage.html ...

  10. Vue+SpringBoot项目实战(一) 搭建环境

    GitHub 地址: https://github.com/dongfanger/sprint-backend https://github.com/dongfanger/sprint-fronten ...

随机推荐

  1. Go-方法-method

  2. [转帖]在 Linux 上以 All-in-One 模式安装 KubeSphere

    https://www.kubesphere.io/zh/docs/v3.4/quick-start/all-in-one-on-linux/ 对于刚接触 KubeSphere 并想快速上手该容器平台 ...

  3. 【转帖】text-davinci-003和ChatGPT之间的不同点

    https://zhuanlan.zhihu.com/p/603709081 先看下GPT的发展时间线 InstructGPT(2022 年 1 月)是一系列 GPT-3 模型(包括 text-dav ...

  4. 银河麒麟安装LLDB的方法以及调试 dump 文件 (未完成)

    今天同事要进行 lldb进行调试dotnet的bug 本来在x86 上面进行相应的处理 但是发现报错. 没办法 正好有一台借来的arm服务器就搞了一下. 简单记录一下安装方法 1. 安装 apt的so ...

  5. js循环之map在工作中的使用

    map函数会返回一个全新的数组哈(重要 在实际中很有用) map循环空那个数组时,不会报错的. 使用map的优势 可以返回一个全新的数组 可以用于过滤 ps==>:map里面不要有判断,否者会返 ...

  6. 大模型应用开发:为产品创建一个AI客服/智能助手

    欢迎阅读本系列文章!我将带你一起探索如何使用OpenAI API来开发GPT应用.无论你是编程新手还是资深开发者,都能在这里获得灵感和收获. 本文将继续展示AI助手的开发方式,在OpenAPI中它的名 ...

  7. 【JS 逆向百例】浏览器插件 Hook 实战,亚航加密参数分析

    关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途 ...

  8. 微信小程序-双线程渲染模型

    微信小程序双线程渲染模型 小程序的运行环境分成渲染层和逻辑层: WXML 模板和 WXSS 样式工作在渲染层,通过 WebView 进行渲染 小程序会为每一个界面都创建一个 WebView 来渲染这个 ...

  9. C/C++ 使用CRC检测磁盘文件完整性

    当软件被开发出来时,为了增加软件的安全性,防止被破解,通常情况下都会对自身内存或磁盘文件进行完整性检查,以防止解密者修改程序,我们可以将exe与dll文件同时做校验,来达到相互认证的目的,解密者想要破 ...

  10. 华为云DTSE助力车卫士架构升级,探索智能出行行业数字化新路径

    本文分享自华为云社区<华为云DTSE助力车卫士技术架构升级,探索智能出行行业数字化新路径>,作者:HuaweiCloudDeveloper. 毫无疑问,在双碳背景以及先进技术的加持下,智能 ...