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 ...
随机推荐
- Go-方法-method
- [转帖]在 Linux 上以 All-in-One 模式安装 KubeSphere
https://www.kubesphere.io/zh/docs/v3.4/quick-start/all-in-one-on-linux/ 对于刚接触 KubeSphere 并想快速上手该容器平台 ...
- 【转帖】text-davinci-003和ChatGPT之间的不同点
https://zhuanlan.zhihu.com/p/603709081 先看下GPT的发展时间线 InstructGPT(2022 年 1 月)是一系列 GPT-3 模型(包括 text-dav ...
- 银河麒麟安装LLDB的方法以及调试 dump 文件 (未完成)
今天同事要进行 lldb进行调试dotnet的bug 本来在x86 上面进行相应的处理 但是发现报错. 没办法 正好有一台借来的arm服务器就搞了一下. 简单记录一下安装方法 1. 安装 apt的so ...
- js循环之map在工作中的使用
map函数会返回一个全新的数组哈(重要 在实际中很有用) map循环空那个数组时,不会报错的. 使用map的优势 可以返回一个全新的数组 可以用于过滤 ps==>:map里面不要有判断,否者会返 ...
- 大模型应用开发:为产品创建一个AI客服/智能助手
欢迎阅读本系列文章!我将带你一起探索如何使用OpenAI API来开发GPT应用.无论你是编程新手还是资深开发者,都能在这里获得灵感和收获. 本文将继续展示AI助手的开发方式,在OpenAPI中它的名 ...
- 【JS 逆向百例】浏览器插件 Hook 实战,亚航加密参数分析
关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途 ...
- 微信小程序-双线程渲染模型
微信小程序双线程渲染模型 小程序的运行环境分成渲染层和逻辑层: WXML 模板和 WXSS 样式工作在渲染层,通过 WebView 进行渲染 小程序会为每一个界面都创建一个 WebView 来渲染这个 ...
- C/C++ 使用CRC检测磁盘文件完整性
当软件被开发出来时,为了增加软件的安全性,防止被破解,通常情况下都会对自身内存或磁盘文件进行完整性检查,以防止解密者修改程序,我们可以将exe与dll文件同时做校验,来达到相互认证的目的,解密者想要破 ...
- 华为云DTSE助力车卫士架构升级,探索智能出行行业数字化新路径
本文分享自华为云社区<华为云DTSE助力车卫士技术架构升级,探索智能出行行业数字化新路径>,作者:HuaweiCloudDeveloper. 毫无疑问,在双碳背景以及先进技术的加持下,智能 ...