当前位置：网站首页>Day115. Shangyitong: Background user management: user lock and unlock, details, authentication list approval
Day115. Shangyitong: Background user management: user lock and unlock, details, authentication list approval
2022-08-02 01:41:00 【Firework Youth·】
目录
一、后台用户管理
We finished in front of the user login、用户认证与就诊人,Now we need to put these information in our platform management system for unified management.
1、用户列表
1. 后端接口
1. 分析接口
*参数：page、limit、UserInfoQueryVo
*返回值：Ipage (mysql Use of corn for bean,Ipage Interface only corn bean)
2. 添加分页插件
@Configuration
@EnableTransactionManagement
//@MapperScan("com.atguigu.yygh.user.mapper") Start the class has been added to the
public class UserConfig {
//分页插件
@Bean
public PaginationInterceptor paginationInterceptor() {
return new PaginationInterceptor();
}
}3. userController 实现
@Api(tags = "用户管理接口")
@RestController
@RequestMapping("/admin/user")
public class UserController {
@Autowired
private UserInfoService userInfoService;
@ApiOperation(value = "With conditions with paging query user list")
@GetMapping("{page}/{limit}")
public R list(@PathVariable Long page,
@PathVariable Long limit,
UserInfoQueryVo userInfoQueryVo) {
Page<UserInfo> pageParams = new Page<>(page,limit);
Page<UserInfo> pageModel = userInfoService.selectPage(pageParams,userInfoQueryVo);
return R.ok().data("pageModel",pageModel);
}
}4. service 方法实现,Modified methods to translate
//With conditions with paging query user list
@Override
public Page<UserInfo> selectPage(Page<UserInfo> pageParams, UserInfoQueryVo userInfoQueryVo) {
//1.取出查询条件
String name = userInfoQueryVo.getKeyword(); //用户名称
Integer status = userInfoQueryVo.getStatus();//用户状态
Integer authStatus = userInfoQueryVo.getAuthStatus(); //认证状态
String createTimeBegin = userInfoQueryVo.getCreateTimeBegin(); //开始时间
String createTimeEnd = userInfoQueryVo.getCreateTimeEnd(); //结束时间
//2.Check air conditional encapsulation
QueryWrapper<UserInfo> wrapper = new QueryWrapper<>();
if(!StringUtils.isEmpty(name)) {
wrapper.like("name",name);
}
if(!StringUtils.isEmpty(status)) {
wrapper.eq("status",status);
}
if(!StringUtils.isEmpty(authStatus)) {
wrapper.eq("auth_status",authStatus);
}
if(!StringUtils.isEmpty(createTimeBegin)) {
wrapper.ge("create_time",createTimeBegin);
}
if(!StringUtils.isEmpty(createTimeEnd)) {
wrapper.le("create_time",createTimeEnd);
}
//3.分页查询
Page<UserInfo> pageModel = baseMapper.selectPage(pageParams, wrapper);
//4.翻译字段(状态值)
pageModel.getRecords().stream().forEach(item->{
//emoji Head analytical tools
item.setNickName(EmojiParser.parseToUnicode(item.getNickName()));
this.packUserInfo(item);
});
return pageModel;
}
//翻译相关字段
private UserInfo packUserInfo(UserInfo userInfo){
String statusNameByStatus = AuthStatusEnum.getStatusNameByStatus(userInfo.getAuthStatus());
userInfo.getParam().put("authStatusString",statusNameByStatus);
String statusString = userInfo.getStatus().intValue()==0 ?"锁定" : "正常";
userInfo.getParam().put("statusString",statusString);
return userInfo;
}5. swagger 测试
2. 前端实现
1. Review the background implementation steps
2. 添加路由 - 用户管理
在 src/router/index.js 文件添加路由
{
path: '/user',
component: Layout,
redirect: '/user/userInfo/list',
name: 'userInfo',
meta: { title: '用户管理', icon: 'table' },
alwaysShow: true,
children: [
{
path: 'userInfo/list',
name: '用户列表',
component: () => import('@/views/yygh/user/userInfo/list'),
meta: { title: '用户列表', icon: 'table' }
}
]
},3. 新建页面,添加页面元素
<template>
<div class="app-container">
<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="searchObj.keyword" placeholder="姓名" />
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker v-model="searchObj.createTimeBegin" type="datetime" placeholder="选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" />
</el-form-item>
至
<el-form-item>
<el-date-picker v-model="searchObj.createTimeEnd" type="datetime" placeholder="选择截止时间"
value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" />
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>
<!-- 列表 -->
<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
<el-table-column label="序号" width="70" align="center">
<template slot-scope="scope">
{
{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="nickName" label="昵称" />
<el-table-column prop="name" label="姓名" />
<el-table-column label="状态" prop="param.statusString" />
<el-table-column label="认证状态" prop="param.authStatusString" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column label="操作" width="200" align="center">
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination :current-page="page" :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
style="padding: 30px 0; text-align: center;" layout="sizes, prev, pager, next, jumper, ->, total, slot"
@current-change="fetchData" @size-change="changeSize" />
</div>
</template>4. 新建API接口
创建/api/yygh/userinfo.js
import request from '@/utils/request'
const api_name = '/admin/user'
export default {
getPageList(page, limit, searchObj) {
return request({
url: `${api_name}/${page}/${limit}`,
method: 'get',
params: searchObj
})
}
}5. JS实现
<script>
import userApi from '@/api/yygh/userinfo'
export default {
data() {
return {
listLoading: true, // 数据是否正在加载
list: null, // banner列表
total: 0, // 数据库中的总记录数
page: 1, // 默认页码
limit: 10, // 每页记录数
searchObj: {} // 查询表单对象
}
},
created() {
this.fetchData()
},
methods: {
//分页查询
fetchData(page=1){
this.page = page
userApi.getPageList(this.page,this.limit,this.searchObj)
.then(response=>{
this.list = response.data.pageModel.records
this.total = response.data.pageModel.total
this.listLoading = false
})
},
//清空
resetData(){
this.searchObj = {}
this.fetchData()
},
//切换每页记录数
changeSize(size){
this.limit = size
this.fetchData()
}
}
}
</script>6. 测试
2、锁定与解锁
1、后端接口
1. 分析接口
*参数：id,status
*返回值：R.ok()
2. controller实现
@ApiOperation(value = "用户锁定与解锁")
@GetMapping("lock/{userId}/{status}")
public R lock(
@PathVariable("userId") Long userId,
@PathVariable("status") Integer status){
userInfoService.lock(userId, status);
return R.ok();
}3. service实现
//用户锁定与解锁
@Override
public void lock(Long userId, Integer status) {
if(status.intValue() == 0 || status.intValue() == 1) {
UserInfo userInfo = this.getById(userId);
userInfo.setStatus(status);
this.updateById(userInfo);
}
}2、前端对接
1. 确认入口
2. 添加API方法
//用户锁定与解锁
lock(id, status) {
return request({
url: `${api_name}/lock/${id}/${status}`,
method: 'get'
})
}3. 添加页面元素
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button v-if="scope.row.status == 1" type="primary" size="mini" @click="lock(scope.row.id, 0)">锁定
</el-button>
<el-button v-if="scope.row.status == 0" type="danger" size="mini" @click="lock(scope.row.id, 1)">
取消锁定</el-button>
</template>
</el-table-column>4. 实现JS
//用户锁定与解锁
lock(id, status) {
userApi.lock(id, status).then(response => {
this.$message({
type: "success",
message: "操作成功!",
});
this.fetchData()
})
}5. 测试
3、用户详情
详情展示用户信息、Users of patient information
1、后端接口
1. 分析接口
*参数：userId
*返回值：map (用户信息,Patient information collection)
2. controller实现
@ApiOperation(value = "用户详情")
@GetMapping("show/{userId}")
public R show(@PathVariable Long userId) {
Map<String,Object> map = userInfoService.show(userId);
return R.ok().data(map);
}3. service实现
//用户详情
@Override
public Map<String, Object> show(Long userId) {
//1.根据用户id查询用户信息,翻译字段
UserInfo userInfo = this.packUserInfo(baseMapper.selectById(userId));
//emoji Head analytical tools
userInfo.setNickName(EmojiParser.parseToUnicode(userInfo.getNickName()));
//2.根据用户id查询就诊人信息
List<Patient> patientList = patientService.findAllUserId(userId);
//3.封装map返回
HashMap<String, Object> map = new HashMap<>();
map.put("userInfo",userInfo);
map.put("patientList",patientList);
return map;
}4. 测试
2、前端对接
1. 确认入口,添加页面元素
<router-link :to="'/user/userInfo/show/'+scope.row.id">
<el-button type="primary" size="mini">查看</el-button>
</router-link>2. 添加隐藏路由
{
path: 'userInfo/show/:id',
name: '用户查看',
component: () => import('@/views/yygh/user/userInfo/show'),
meta: { title: '用户查看' },
hidden: true
}3. 新建页面,添加页面元素
<template>
<div class="app-container">
<h4>用户信息</h4>
<table class="table table-striped table-condenseda table-bordered" width="100%">
<tbody>
<tr>
<th width="15%">手机号</th>
<td width="35%"><b>{
{ userInfo.phone }}</b></td>
<th width="15%">用户昵称</th>
<td width="35%">{
{ userInfo.nickName }}</td>
</tr>
<tr>
<th>状态</th>
<td>{
{ userInfo.status == 0 ? '锁定' : '正常' }}</td>
<th>注册时间</th>
<td>{
{ userInfo.createTime }}</td>
</tr>
</tbody>
</table>
<h4>认证信息</h4>
<table class="table table-striped table-condenseda table-bordered" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="35%"><b>{
{ userInfo.name }}</b></td>
<th width="15%">证件类型</th>
<td width="35%">{
{ userInfo.certificatesType }}</td>
</tr>
<tr>
<th>证件号</th>
<td>{
{ userInfo.certificatesNo }}</td>
<th>证件图片</th>
<td><img :src="userInfo.certificatesUrl" width="80px"></td>
</tr>
</tbody>
</table>
<h4>就诊人信息</h4>
<el-table v-loading="listLoading" :data="patientList" stripe style="width: 100%">
<el-table-column label="序号" width="70" align="center">
<template slot-scope="scope">
{
{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="param.certificatesTypeString" label="证件类型" />
<el-table-column prop="certificatesNo" label="证件编号" />
<el-table-column label="性别">
<template slot-scope="scope">
{
{ scope.row.sex == 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="birthdate" label="出生年月" />
<el-table-column prop="phone" label="手机" />
<el-table-column label="是否结婚">
<template slot-scope="scope">
{
{ scope.row.isMarry == 1 ? '时' : '否' }}
</template>
</el-table-column>
<el-table-column prop="param.fullAddress" label="地址" />
<el-table-column prop="createTime" label="注册时间" />
</el-table>
<br>
<el-row>
<el-button @click="back">返回</el-button>
</el-row>
</div>
</template>4. 添加API方法
//用户详情
show(id) {
return request({
url: `${api_name}/show/${id}`,
method: 'get'
})
}5. JS实现
<script>
import userApi from '@/api/yygh/userinfo'
export default {
// 定义数据
data() {
return {
//Hidden routing method to obtain parametersparams,问号传参
id: this.$route.params.id,
userInfo: {}, // 会员信息
patientList: [] // 就诊人列表
}
},
// 当页面加载时获取数据
created() {
this.fetchDataById()
},
methods: {
//根据id查询会员记录
fetchDataById() {
userApi.show(this.id).then(response => {
this.userInfo = response.data.userInfo
this.patientList = response.data.patientList
})
},
//返回
back() {
window.history.back(-1)
}
}
}
</script>6. 测试
4、List and approval function
1、认证列表
User authentication list interface is consistent with the user list,只是默认加了一个认证状态搜索条件：authStatus
1. Confirm that the user authentication list interface
2. Add the routing menu
{
path: 'userInfo/authList',
name: '认证审批列表',
component: () => import('@/views/yygh/user/userInfo/authList'),
meta: { title: '认证审批列表', icon: 'table' }
}3. 创建页面、添加元素
<template>
<div class="app-container">
<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="searchObj.keyword" placeholder="姓名/手机"/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="searchObj.createTimeBegin"
type="datetime"
placeholder="选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
</el-form-item>
至
<el-form-item>
<el-date-picker
v-model="searchObj.createTimeEnd"
type="datetime"
placeholder="选择截止时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>
<!-- 列表 -->
<el-table
v-loading="listLoading"
:data="list"
stripe
style="width: 100%">
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{
{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"/>
<el-table-column prop="certificatesType" label="证件类型"/>
<el-table-column prop="certificatesNo" label="证件号"/>
<el-table-column prop="createTime" label="创建时间"/>
<el-table-column label="操作" width="250" align="center">
<template slot-scope="scope">
<router-link :to="'/user/userInfo/show/'+scope.row.id">
<el-button type="primary" size="mini">查看</el-button>
</router-link>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
:current-page="page"
:total="total"
:page-size="limit"
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
style="padding: 30px 0; text-align: center;"
layout="sizes, prev, pager, next, jumper, ->, total, slot"
@current-change="fetchData"
@size-change="changeSize"
/>
</div>
</template>
<script>
import userInfoApi from '@/api/yygh/userinfo'
export default {
// 定义数据
data() {
return {
listLoading: true, // 数据是否正在加载
list: null, // banner列表
total: 0, // 数据库中的总记录数
page: 1, // 默认页码
limit: 10, // 每页记录数
searchObj: {
authStatus: 1
} // 查询表单对象
}
},
// 当页面加载时获取数据
created() {
this.fetchData()
},
methods: {
// 调用api层获取数据库中的数据
fetchData(page = 1) {
console.log('翻页...' + page)
// 异步获取远程数据（ajax）
this.page = page
userInfoApi.getPageList(this.page, this.limit, this.searchObj).then(
response => {
this.list = response.data.pageModel.records
this.total = response.data.pageModel.total
// 数据加载并绑定成功
this.listLoading = false
}
)
},
// 当页码发生改变的时候
changeSize(size) {
console.log(size)
this.limit = size
this.fetchData(1)
},
// 重置查询表单
resetData() {
console.log('重置查询表单')
this.searchObj = {}
this.fetchData()
}
}
}
</script>2、审批
1. controller
@ApiOperation(value = "认证审批")
@GetMapping("approval/{userId}/{authStatus}")
public R approval(@PathVariable Long userId,@PathVariable Integer authStatus) {
userInfoService.approval(userId,authStatus);
return R.ok();
}2. service
//认证审批 2通过 -1不通过
@Override
public void approval(Long userId, Integer authStatus) {
if(authStatus.intValue()==2 || authStatus.intValue()==-1) {
UserInfo userInfo = baseMapper.selectById(userId);
userInfo.setAuthStatus(authStatus);
baseMapper.updateById(userInfo);
}
}3. API接口方法
//认证审批
approval(id, authStatus) {
return request({
url: `${api_name}/approval/${id}/${authStatus}`,
method: 'get'
})
}4. 添加页面元素 - 审批按钮
<el-table-column label="操作" width="250" align="center">
<template slot-scope="scope">
<router-link :to="'/user/userInfo/show/'+scope.row.id">
<el-button type="primary" size="mini">查看</el-button>
</router-link>
<el-button type="primary" size="mini" @click="approval(scope.row.id, 2)">通过</el-button>
<el-button type="danger" size="mini" @click="approval(scope.row.id, -1)">不通过</el-button>
</template>
</el-table-column>5. JS实现
//用户审批
approval(id, authStatus) {
userInfoApi.approval(id, authStatus).then(response => {
this.$message({
type: "success",
message: "操作成功!",
});
this.fetchData()
})
}6. 测试
边栏推荐
猜你喜欢
5年自动化测试经验的一些感悟：做UI自动化一定要跨过这10个坑
YGG Guild Development Plan Season 1 Summary
使用百度EasyDL实现厂区工人抽烟行为识别
Maxwell 一款简单易上手的实时抓取Mysql数据的软件
MInIO入门-03 秒传+大文件分片上传
mapbox使用教程
feign异常传递的两种方式 fallbackfactory和全局处理 获取服务端自定义异常
IDEA版Postman插件Restful Fast Request,细节到位,功能好用
Image fusion based on weighted 】 and pyramid image fusion with matlab code
Redis cluster mode
随机推荐
fastjson详解
input禁止输入
go mode tidy出现报错go warning “all“ matched no packages
IDEA找不到Database解决方法
【服务器数据恢复】服务器Raid5阵列mdisk磁盘离线的数据恢复案例
百度、百图生科 ｜ HelixFold-Single: 使用蛋白质语言模型作为替代进行无MSA蛋白质结构预测
设备树学习
ERROR 1045 (28000) Access denied for user ‘root‘@‘localhost‘解决方法
《自然语言处理实战入门》 基于知识图谱的问答机器人
力扣 1161. 最大层内元素和
有效进行自动化测试，这几个软件测试工具一定要收藏好！！！
GO GOPROXY代理设置
【Brush the title】Family robbery
IDEA版Postman插件Restful Fast Request,细节到位,功能好用
ECMAScript 2022 正式发布，有你了解过的吗？
6-25漏洞利用-irc后门利用
About MySQL data insertion (advanced usage)
接口(第九天)
华为5年女测试工程师离职：多么痛的领悟...
Day116.尚医通：预约挂号详情 ※