用户管理
方法及对应api
搜索 searchSysUser / GetSysUserListByPage
重置 resetData
添加用户 addShow :点击按钮后出现对话框,含有提交 submit / SaveSysUser、取消按钮
修改 editSysUser / UpdateSysUser
删除 deleteById / DeleteSysUser
分配角色 showAssignRole / DoAssignRoleToUser
在分配角色时需要获取所有角色 GetAllRoleList
上传头像
参数
用户属性:用户名称、密码、姓名、手机、头像、描述、状态、修改时间
api设计
配置:路径url、方法method、传参数据data
GetSysUserListByPage
入参: current, limit, queryDto
出参: 通过解构赋值法将返回的数据赋给data
SaveSysUser
入参:sysUser
UpdateSysUser
入参:sysUser
DeleteSysUser
入参:userId
DoAssignRoleToUser
入参:assginRoleVo
GetAllRoleList
入参:userId
方法设计
方法中的部分变量与模板中的变量双向绑定,v-model语法,单向绑定v-on
api测试
安装express,npm i express, 编辑express.js文件设置路由请求响应内容,node express.js 启动端口监听
baseURL http://127.0.0.1:8000/
利用AI生成测试数据,先用postman测试链接连通性,再在项目中点击按钮或刷新测试
.vue模板中的方法没有定义也可以正常显示,但在console面板中会有提醒
bug–api返回数据接收变量
返回数据通过解构赋值语法用data接收,返回的数据为标准的返回字段:code、message、data,data中有list数组对象,list数据时少加一个data,应为data.data.list
要求:不要用data作为接收变量
M查询
方法名/api: searchSysUser / GetSysUserListByPage
组件
表单组件 el-form, 行列组件 el-rol, el-col, el-form-item,
输入组件 el-input 日期选择器组件 el-date-picker
按钮组件 el-button
表格组件 el-table, el-table-column
分页组件 el-pagination
参数
定义createTimes参数承接开始和结束时间–提供给queryDto
检索条件有关键词、起始时间,都放在queryDto中–入参
定义pageParams放当前页和每页记录数–入参,与分页组件双向绑定
定义表格数据模型list --出参
定义分页条数据模型total --出参
方法实现
searchSysUser方法调用fetchData方法,fetchData方法获取查询输入的起始时间参数,后调用GetSysUserListByPage api方法获得返回的数据,传给表格和分页条数据模型
分页组件size-change和current-change都调用fetchData方法
M重置 resetData
组件
el-button
参数
查询方法中的queryDto,createTimes
方法实现
按下按钮后,搜索框中的数据会清空,相当于双向绑定的参数被恢复为空,因之前用ref定义过,对应变量重新赋值时需加.value
M添加用户 addShow
布局
点击按钮后出现对话框,含有提交 submit / SaveSysUser、取消按钮
对话框组件:el-dialog
对话框中是表单组件,输入框组件:el-form,el-form-item,el-input,头像是el-upload组件
输入框中的数据与sysUser中的各属性双向绑定
参数
sysUser,添加用户时需填写的各属性:用户名称、姓名、手机号、密码、描述、头像
方法实现
添加用户方法 addShow,将sysUser中的数据清空,dialogVisible设为true
头像上传 fileUpload,无按钮,无api,直接写在了template中
提交 submit,api:SaveSysUser,UpdateSysUser 没有id新加的为第一个,修改为第二个
取消 点击后将dialogVisible=false,dialogVisible在对话框组件中与v-model绑定,为true时显示,false不显示,默认为false
M修改
方法/接口 editSysUser / UpdateSysUser
组件
el-table-column,需声明一个插槽scope
el-button
参数
scope.row,当前行数据
添加用户方法中的sysUser,dialogVisible
方法实现
将当前行数据赋给sysUser
…row,创建 row 对象的一个浅拷贝,并将其赋值给 sysUser.value
dialogVisible设置为true
后续为对话框操作,与上述方法一致
M删除
方法/接口 deleteById / DeleteSysUser
组件
与M修改一样
参数
scope.row,当前行数据
方法实现
传参row.id给后端接口
M分配角色
分配角色 showAssignRole / doAssign
api: GetAllRoleList / DoAssignRoleToUser
组件
el-button
el-dialog、el-form、el-form-item
el-input
el-checkbox-group,el-checkbox,v-for遍历,:key/:label绑定role.id,标签内rolename
对话框内部有提交,取消按钮提交对应方法为doAssign
参数
scope.row
用户名 sysUser.userName,与输入框组件双向绑定,默认不能修改
用户角色id userRoleIds,与多选框group双向绑定
角色列表 allRoles与多选框双向绑定
控制对话框弹出 dialogRoleVisible
方法实现
showAssignRole基于用户id,获取所有输入角色数据,及用户id对应的角色
doAssign将用户的id,角色id传给后端
M上传头像
fileUpload
前置依赖:pinia/modules/app.js
组件
el-upload
img
方法实现
需在请求头中添加token
成功后调用方法handleAvatarSuccess