Vue+SpringBoot+ElementUI实战学生管理系统-5.用户管理模块
1.章节介绍
前一篇介绍了项目的API接口设计,这一篇编写用户管理模块,需要的朋友可以拿去自己定制。:)
2.获取源码
源码是捐赠方式获取,详细请QQ联系我 :)!
3.项目截图
列表操作
动态图
4.用户管理
页面布局
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
<!-- 搜索 添加 -->
<el-row :gutter="20">
<el-col :span="6">
<el-input placeholder="请输入内容"
v-model="queryInfo.query"
clearable
@clear="getUserList">
<el-button slot="append"
icon="el-icon-search"
@click="getUserList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary"
@click="addDialogVisible = true">添加用户</el-button>
</el-col>
</el-row>
<!-- 用户列表区域 -->
<el-table :data="userlist"
border
stripe>
<!-- stripe: 斑马条纹
border:边框-->
<el-table-column type="index"
label="序号"></el-table-column>
<el-table-column prop="username"
label="用户名"></el-table-column>
<el-table-column prop="nickname"
label="昵称"></el-table-column>
<el-table-column prop="email"
label="邮箱"></el-table-column>
<el-table-column prop="mobile"
label="电话"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary"
icon="el-icon-edit"
size="mini"
circle
@click="showEditDialog(scope.row.id)"></el-button>
<el-button type="danger"
icon="el-icon-delete"
size="mini"
circle
@click="removeUserById(scope.row.id)"></el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNo"
:page-size="queryInfo.pageSize"
layout="total, prev, pager, next, jumper"
:total="total"></el-pagination>
</el-card>
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户"
:visible.sync="addDialogVisible"
width="30%"
@close="addDialogClosed">
<!-- 内容主体 -->
<el-form :model="addUserForm"
ref="addUserFormRef"
:rules="addUserFormRules"
label-width="100px">
<el-form-item label="用户名"
prop="username">
<el-input v-model="addUserForm.username"></el-input>
</el-form-item>
<el-form-item label="昵称"
prop="nickname">
<el-input v-model="addUserForm.nickname"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password">
<el-input v-model="addUserForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱"
prop="email">
<el-input v-model="addUserForm.email"></el-input>
</el-form-item>
<el-form-item label="手机"
prop="mobile">
<el-input v-model="addUserForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer"
class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary"
@click="addUser">确 定</el-button>
</span>
</el-dialog>
<!-- 修改用户的对话框 -->
<el-dialog title="修改用户信息"
:visible.sync="editDialogVisible"
width="30%"
@close="editDialogClosed">
<!-- 内容主体 -->
<el-form :model="editUserForm"
ref="editUserFormRef"
:rules="editUserFormRules"
label-width="70px">
<el-form-item label="用户名">
<el-input v-model="editUserForm.username"
disabled></el-input>
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="editUserForm.nickname"></el-input>
</el-form-item>
<el-form-item label="邮箱"
prop="email">
<el-input v-model="editUserForm.email"></el-input>
</el-form-item>
<el-form-item label="手机"
prop="mobile">
<el-input v-model="editUserForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer"
class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary"
@click="editUser">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
数据和事件
<script>
export default {
data() {
return {
// 获取用户列表查询参数对象
queryInfo: {
query: "",
// 当前页数
pageNo: 1,
// 每页显示多少数据
pageSize: 10,
},
userlist: [],
total: 0,
// 添加用户对话框
addDialogVisible: false,
// 用户添加
addUserForm: {
username: "",
nickname: "",
password: "",
email: "",
mobile: "",
},
// 用户添加表单验证规则
addUserFormRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{
min: 2,
max: 10,
message: "用户名的长度在2~10个字",
trigger: "blur",
},
],
password: [
{ required: true, message: "请输入用户密码", trigger: "blur" },
{
min: 6,
max: 18,
message: "用户密码的长度在6~18个字",
trigger: "blur",
},
],
email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
mobile: [
{ required: true, message: "请输入手机号码", trigger: "blur" },
],
},
// 修改用户
editDialogVisible: false,
editUserForm: {},
// 编辑用户表单验证
editUserFormRules: {
email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
mobile: [
{ required: true, message: "请输入手机号码", trigger: "blur" },
],
},
// 分配角色对话框
setRoleDialogVisible: false,
// 当前需要被分配角色的用户
userInfo: {},
// 所有角色数据列表
rolesLsit: [],
// 已选中的角色Id值
selectRoleId: "",
};
},
created() {
this.getUserList();
},
methods: {
async getUserList() {
const { data: res } = await this.$http.get("user/list", {
params: this.queryInfo,
});
if (res.code !== 200) {
return this.$message.error("获取用户列表失败!");
}
this.userlist = res.data.records;
this.total = res.data.total;
},
// 监听 pageSize改变的事件
handleSizeChange(newSize) {
// console.log(newSize)
this.queryInfo.pageSize = newSize;
this.getUserList();
},
// 监听 页码值 改变事件
handleCurrentChange(newSize) {
// console.log(newSize)
this.queryInfo.pageNo = newSize;
this.getUserList();
},
// 监听 添加用户对话框的关闭事件
addDialogClosed() {
this.$refs.addUserFormRef.resetFields();
},
// 添加用户
addUser() {
// 提交请求前,表单预验证
this.$refs.addUserFormRef.validate(async (valid) => {
// console.log(valid)
// 表单预校验失败
if (!valid) return;
const { data: res } = await this.$http.post(
"user/modify",
this.addUserForm
);
if (res.code !== 200) {
this.$message.error("添加用户失败!");
return;
}
this.$message.success("添加用户成功!");
// 隐藏添加用户对话框
this.addDialogVisible = false;
this.getUserList();
});
},
// 编辑用户信息
async showEditDialog(id) {
const { data: res } = await this.$http.get("user/" + id);
if (res.code !== 200) {
return this.$message.error("查询用户信息失败!");
}
this.editUserForm = res.data;
this.editDialogVisible = true;
},
// 监听修改用户对话框的关闭事件
editDialogClosed() {
this.$refs.editUserFormRef.resetFields();
},
// 修改用户信息
editUser() {
// 提交请求前,表单预验证
this.$refs.editUserFormRef.validate(async (valid) => {
// console.log(valid)
// 表单预校验失败
if (!valid) return;
const { data: res } = await this.$http.post("user/modify", {
id: this.editUserForm.id,
email: this.editUserForm.email,
mobile: this.editUserForm.mobile,
});
if (res.code !== 200) {
this.$message.error("更新用户信息失败!");
}
// 隐藏添加用户对话框
this.editDialogVisible = false;
this.$message.success("更新用户信息成功!");
this.getUserList();
});
},
// 删除用户
async removeUserById(id) {
const confirmResult = await this.$confirm("确定删除该用户?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).catch((err) => err);
// 点击确定 返回值为:confirm
// 点击取消 返回值为: cancel
if (confirmResult !== "confirm") {
return this.$message.info("已取消删除");
}
const { data: res } = await this.$http.post("user/remove/" + id);
if (res.code !== 200) return this.$message.error("删除用户失败!");
this.$message.success("删除用户成功!");
this.getUserList();
},
},
};
</script>
Vue+SpringBoot+ElementUI实战学生管理系统-5.用户管理模块的更多相关文章
- 循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理
在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...
- vue后台管理系统——用户管理模块
电商后台管理系统的功能--用户管理模块 1. 用户管理概述 通过后台管理用户的账号信息,具体包括用户信息的展示.添加.修改.删除.角色分配.账号启用/注销等功能. 用户信息列表展示 添加用户 修改用户 ...
- Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块
用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...
- TestCase--网站创建新用户管理模块
对于web测试,用户权限管理模块是必测的一个点,所以今天就来总结一下创建新用户管理模块的测试用例 参考图如下: 测试用例设计如下: 一.功能测试 1. 什么都不输入,单击“立即提交”,页面是否有提示 ...
- Linux实战教学笔记14:用户管理初级(下)
第十四节 用户管理初级(下) 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,用户查询相关命令id,finger,users,w,who,last,lastlog,gr ...
- Linux实战教学笔记15:用户管理初级(下)
第十四节 用户管理初级(下) 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,用户查询相关命令id,finger,users,w,who,last,lastlog,gr ...
- Linux实战教学笔记14:用户管理初级(上)
第十四节 用户管理初级(上) 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,账号管理 1.1 管理用户命令汇总 命令 注释说明(特殊颜色的必须掌握) useradd增 ...
- .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择
下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错. 我们框架的组织机构结合实际分成了5种类型,分别为 ...
- 【php增删改查实例】第十四节 - 用户管理模块(起步)
从这一节开始,开始着手开发部门管理模块. 之后的内容就在此基础上进行增加. 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块. 打开这个文件,新建一个userManage.html ...
- Vue+SpringBoot项目实战(一) 搭建环境
GitHub 地址: https://github.com/dongfanger/sprint-backend https://github.com/dongfanger/sprint-fronten ...
随机推荐
- 云服务器搭建自己的GitServer!
云服务器搭建自己的GitServer! 如果你有一台云服务器并想在上面搭建自己的 Git 服务器,你可以使用 Git 自带的 git-shell ,也可以使用像 Gitea.GitLab.Gogs 这 ...
- [转帖]“炫技” 还是 “真硬核”,OpenPPL 实测阿里「倚天 710」芯片
https://my.oschina.net/openppl/blog/5524424 本文将以深度学习模型推理应用为出发点,对「倚天 710」这款 ARM Server 芯片进行性能方面的实测. ...
- Redis监控方法之二
Redis监控方法之二 背景 前期整理过使用 exporter + prometheus 方式进行Redis监控的搭建过程 最近给同事研究clickhouse时发现 clickhouse 有对应的pl ...
- [转帖]使用 Logical Import Mode
https://docs.pingcap.com/zh/tidb/v6.5/tidb-lightning-logical-import-mode-usage 配置及使用 可以通过以下配置文件使用 Lo ...
- [转帖]MySQL ALTER TABLE: ALTER vs CHANGE vs MODIFY COLUMN
https://www.cnblogs.com/pachongshangdexuebi/p/5029152.html ALTER COLUMN 语法: ALTER [COLUMN] col_name ...
- [转帖]vdbench
https://www.cnblogs.com/AgainstTheWind/p/9869513.html 一.vdbench安装1.安装java:java -version(vdbench的运行依赖 ...
- [转帖] Strace的介绍与使用
https://www.cnblogs.com/skandbug/p/16264609.html Strace简介 strace命令是一个集诊断.调试.统计于一体的工具,常用来跟踪进程执行时的系统调用 ...
- [转帖]linux 磁盘队列深度nr_requests 和 queue_depth
linux 磁盘队列深度nr_requests 和 queue_depth nr_requests 和 queue_depth 修改配置值 nr_requests 和 queue_depth 区别 i ...
- Springboot actuator的简单使用
Springboot actuator的简单使用 简介 公司基于springboot研发的系统,开发已经默认集成了actuator 为了安全起见这个插件模式是不开启的. 今天与研发同事进行了沟通,简单 ...
- echarts设置标题样式
<!DOCTYPE html> <html> <!-- https://blog.csdn.net/weixin_42698255/article/details/892 ...