前端用户管理模块方法及api分析
用户管理
方法及对应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