运输 织梦网站模板,精美 企业网站模板,关于网站建设的技巧,网站ie不兼容文章目录
一.SpringCouldvue3项目的后台用户管理的CURD【Taurus教育平台】 1.1 背景 二.用户列表#xff08;分页查询#xff09; 2.1 前端Vue3 #xff08;Vue3-Element-Admin#xff09;2.2 后端SpringCould 处理 三. 用户信息删除 3.1 前端Vue3 #xff08;Vue3-Eleme…文章目录
一.SpringCouldvue3项目的后台用户管理的CURD【Taurus教育平台】 1.1 背景 二.用户列表分页查询 2.1 前端Vue3 Vue3-Element-Admin2.2 后端SpringCould 处理 三. 用户信息删除 3.1 前端Vue3 Vue3-Element-Admin3.2 后端SpringCould 处理 四.用户信息新增和修改 4.1 前端Vue3 Vue3-Element-Admin4.2 后端SpringCould 处理
一.SpringCouldvue3项目的后台用户管理的CURD【Taurus教育平台】
1.1 背景
前文已经写了SpringCouldVue3-Element-Admin 登录接口用户信息接口以及Token验证的实现。
本项目为重构行知在线综合教育平台。本项目更名为Taurus教育平台
关键字SpringBoot、SpringCould、Vue3、Uni-app
前端后台管理系统采用开源项目Vue3-Element-Admin。
本文主要实现了后台用户管理的CURD功能。
二.用户列表分页查询
这里的查询包括分页的全部查询根据username查询根据学生id查询根据角色查询。
2.1 前端Vue3 Vue3-Element-Admin
1.在router里新建user.js在user路径下注册映射增删改查的url。
export default [{path: /user,component: Layout,name: user-manage,meta: {title: 用户管理,},icon: icon-home,children: [{path: list,name: userlist,component: List,meta: {title: 用户列表,// affix: true,},},{path: add,name: useradd,component: Add,meta: {title: 添加用户,// affix: true,},hidden:true},{path: edit/:id,name: userEdit,component: edit,meta: {title: 编辑用户,// affix: true,},hidden:true},],},
]2.在router里的index.js将新建的user加入固定菜单中。
export const fixedRoutes [...home,...user]3.在views里新建文件夹user并且在index作为用户类别展示页面。
用户列表采用Element十分简单 这里记一些相对重要的东西 因为我的数据库设计的role的值规则为
role: 0 管理员 1 教师 2 学生
所以后端传值为int在前端显示我们需要使用插值。
template #role{row}
{{ seitrole(row.role) }}
/templateconst seitrole (roleId) {if(roleId 0)return 管理员if(roleId 1)return 教师if(roleId !0 roleId !1)return 学生
};请求函数这块是异步的我们在渲染表单就会向后端请求数据库里的数据。
请求函数如下
// 请求函数
const getUserList async (params) {// params是从组件接收的包含分页和搜索字段。console.log(执行请求函数);const {data,total} await API.getUserList(params);state.falgdatedata// 必须要返回一个对象包含data数组和total总数return {data,total,};
};API接口如下
// 获取用户列表
export const getUserList data {const token localStorage.getItem(token); // 获取存储在本地浏览器中的tokenreturn request({url: http://localhost:8001/user/list,method: get,params: data,headers: {Authorization: Bearer token,}})
}根据username查询根据学生id查询根据角色查询。
规定三者互斥只能根据应该主要的索引查询。
:searchsearch search:{fields:[{label:账号,type:text,name:username},{label:学号,type:text,name:studentID},{label:角色,type:select,name:role,options:[{name:管理员,value:0},{name:老师,value:1},{name:学生,value:2}]}]
}效果图 2.2 后端SpringCould 处理
这里的查询包括分页的全部查询根据username查询根据学生id查询根据角色查询。后端需要考虑这写情况。
用户列表功能查询
需要获取到token和一些主要的关键的字段。对与username和studentid和role需要设置为可为空值。
GetMapping(/user/list)
public Message getUserList(RequestHeader(Authorization) String token,RequestHeader(User-Agent) String userAgent,RequestParam(current) int currentPage,RequestParam(size) int pageSize,RequestParam(value username, required false) String username,RequestParam(value studentID, required false) String studentID,RequestParam(value role, required false) String role) {排除前端传空值报错直接赋值为null
if (username){usernamenull;
}
if (studentID){studentIDnull;
}
if (role){rolenull;
}token检查
String tokenlast token.replace(Bearer , );
Message msgnew Message();
String Ctoken sysUserService.tokenCheck(tokenlast);如果Ctoken不为空说明token效验通过有效。
if(Ctoken!null){//查询所有if (usernamenull studentID null role null){msg sysUserService.userlist(currentPage,pageSize);return msg;}//查询用户的用户名else if(username!null studentID null role null){msg sysUserService.userbyname(currentPage,pageSize,username);return msg;}//查询用户的学号else if(usernamenull studentID ! null role null){msg sysUserService.userbystudentID(currentPage,pageSize,studentID);return msg;}//查询用户的角色else if(usernamenull studentID null role ! null){msg sysUserService.userbyrole(currentPage,pageSize,role);return msg;}else {System.out.println(错误);}
}
else {msg.setMessage(Token状态异常);msg.setStatus(401);MapString, String map new HashMap();msg.setData(map);return msg;
}token检查工具类
public static Claims parseToken(String token) {try {SecretKey secretKey new SecretKeySpec(key.getBytes(), SignatureAlgorithm.HS256.getJcaName());Claims claims Jwts.parser().setSigningKey(secretKey).parseClaimsJws(token).getBody();return claims;} catch (ExpiredJwtException e) {// Token已过期System.out.println(Token已过期);return null;} catch (JwtException e) {// Token解析失败System.out.println(Token解析失败);return null;}
}查询所有查询所有用户信息
public Message userlist(int currentPage, int pageSize) {Message msgnew Message();int startIndex (currentPage-1) * pageSize; //起始位置ListUser userList sysUserDao.Userquery(startIndex,pageSize);Integer total sysUserDao.Usertotal();msg.setTotal(total);MapString, String map new HashMap();msg.setData(userList);msg.setMessage(查询所有人成功);msg.setStatus(200);return msg;
}这块需要对sql进行俩次查询第一次传入起始位置和该页的条数进行分页查询第二次对满足条件的sql总数进行查询。
对应的sql语句为
SELECT * FROM user ORDER BY id LIMIT #{pageSize} OFFSET #{startIndex}SELECT COUNT(*) FROM user;对于用户名、学生学号、用户角色分别进行三次判断。 然后对其进行处理即可。三个条件互斥。
三. 用户信息删除
3.1 前端Vue3 Vue3-Element-Admin
用户信息删除包含单项信息删除和多选信息删除。
批量删除批量删除是把目标值的id进行拼接单词分割符为
el-button :disabledselectedIds.length0typedangerclickdeleteUserByid(selectedIds.join(,))批量删除
/el-button单项信息删除单项信息删除
el-button sizemini typedanger clickdeleteUserByid(row.id)删除/el-button根据id删除用户
const deleteUserByid id {ElMessageBox.confirm(是否确定删除,Warning,{confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(async () {const {status} await API.deleteUserByid(id)if (status 200){ElMessage({type: success,message: 删除成功,})table.value.refresh()}else{ElMessage({type: NOsuccess,message: 删除失败,})}}).catch(() {ElMessage({type: info,message: 取消,})})
}批量删除用户
const handleChange arr {state.selectedIds arr.map(itemitem.id)console.log(arr);
}根据id删除用户API:
export const deleteUserByid id {const token localStorage.getItem(token); // 获取存储在本地浏览器中的tokenreturn request({url: http://localhost:8001/user/deleteUserByid?id${id},method: get,headers: {Authorization: Bearer token,}})
}3.2 后端SpringCould 处理
按照用户id删除
获取到token和id。
GetMapping(/user/deleteUserByid)
public Message deleteUserByid(RequestHeader(Authorization) String token,RequestHeader(User-Agent) String userAgent,RequestParam(id) String userid
) {对前端传值的字符串拼接进行一个处理。
long[] idsArr Arrays.stream(userid.split(,)).mapToLong(Long::parseLong).toArray();删除对应的id用户信息的sql语句如下
delete iddeleteByIds parameterTypelongDELETE FROM user WHERE id INforeach collectionarray itemid open( separator, close)#{id}/foreach
/delete四.用户信息新增和修改
4.1 前端Vue3 Vue3-Element-Admin
用户信息新增和修改较为简单。
模板层
template
el-formrefruleFormRef:modelruleForm:rulesruleslabel-width120pxclassdemo-ruleForm:sizeformSizestatus-iconel-form-item label用户名 propusername el-input v-modelruleForm.username placeholder请输入用户名//el-form-itemel-form-item label姓名 propname el-input v-modelruleForm.name placeholder请输入姓名//el-form-itemel-form-item label密码 proppassword el-input v-modelruleForm.password placeholder请输入密码//el-form-itemel-form-item label手机号 propphone el-input v-modelruleForm.phone placeholder请输入手机号//el-form-itemel-form-item label邮箱 propemail el-input v-modelruleForm.email placeholder请输入邮箱//el-form-itemel-form-item label学号 propstudentID el-input v-modelruleForm.studentID placeholder请输入学号//el-form-itemel-form-item label角色 proproleel-select v-modelruleForm.role placeholder请选择el-option label管理员 value0 /el-option label老师 value1 /el-option label学生 value2 //el-select/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleFormRef)Create/el-buttonel-button clickresetForm(ruleFormRef)Reset/el-button/el-form-item/el-form
/template然后调用api请求后端接口即可和上面流程相同
const { status } await API.craeteuser(ruleForm);PS:这里涉及到在回调函数里进行页面跳转
if (status 200) {console.log(Success);router.push(/user/list); // 在成功回调中进行页面跳转ElMessage({message: 添加成功,type: success,})// resetForm} else {console.error(ERROR);
}修改和他几乎相同我们可以在url后加一个idX然后根据id的值来获取到对应的用户信息再修改完提交即可。
4.2 后端SpringCould 处理 SQL处理如下
insert idcraeteuser parameterTypeUser!-- 将用户信息插入到 user 表中并返回插入结果的行数 --INSERT INTO user (uuid, username, name, password, phone, email, studentID, role, type, CreatTime, imgurl)VALUES (#{uuid}, #{username}, #{name}, #{password}, #{phone}, #{email}, #{studentID}, #{role}, #{type}, #{CreatTime,jdbcTypeTIMESTAMP}, #{imgurl})
/insert根据指定用户的id进行修改的SQL语句如下
update idedituser parameterTypeUserUPDATE user SET username#{username},name#{name},password#{password},phone#{phone},email#{email},studentID#{studentID},role#{role},type#{type},CreatTime#{CreatTime},imgurl#{imgurl}WHERE id#{id}
/update到这已经完成了后台管理系统用户的增删改查。
