新网站备案查询,活动策划书,宁波网站建设费用是多少钱,怎么做vip视频网站用户管理
方法及对应api
搜索 searchSysUser / GetSysUserListByPage 重置 resetData 添加用户 addShow #xff1a;点击按钮后出现对话框#xff0c;含有提交 submit / SaveSysUser、取消按钮 修改 editSysUser / UpdateSysUser 删除 deleteById / DeleteSysUser 分配角色…用户管理
方法及对应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测试
安装expressnpm i express, 编辑express.js文件设置路由请求响应内容node express.js 启动端口监听 baseURL http://127.0.0.1:8000/ 利用AI生成测试数据先用postman测试链接连通性再在项目中点击按钮或刷新测试 .vue模板中的方法没有定义也可以正常显示但在console面板中会有提醒
bug–api返回数据接收变量
返回数据通过解构赋值语法用data接收返回的数据为标准的返回字段code、message、datadata中有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
参数
查询方法中的queryDtocreateTimes
方法实现
按下按钮后搜索框中的数据会清空相当于双向绑定的参数被恢复为空因之前用ref定义过对应变量重新赋值时需加.value
M添加用户 addShow
布局
点击按钮后出现对话框含有提交 submit / SaveSysUser、取消按钮 对话框组件el-dialog 对话框中是表单组件,输入框组件el-formel-form-itemel-input头像是el-upload组件 输入框中的数据与sysUser中的各属性双向绑定
参数
sysUser添加用户时需填写的各属性用户名称、姓名、手机号、密码、描述、头像
方法实现
添加用户方法 addShow将sysUser中的数据清空dialogVisible设为true 头像上传 fileUpload无按钮无api直接写在了template中 提交 submitapiSaveSysUserUpdateSysUser 没有id新加的为第一个修改为第二个 取消 点击后将dialogVisiblefalsedialogVisible在对话框组件中与v-model绑定为true时显示false不显示默认为false
M修改
方法/接口 editSysUser / UpdateSysUser
组件
el-table-column,需声明一个插槽scope el-button
参数
scope.row当前行数据 添加用户方法中的sysUserdialogVisible
方法实现
将当前行数据赋给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-groupel-checkboxv-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
