前端用户管理模块方法及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