目录:
(1)后台系统-用户管理-用户列表接口开发
(2)后台系统-用户管理-用户列表与前端整合
(3)后台系统-用户管理-用户锁定功能
(4)后台系统-用户管理-用户详情功能实现
(5)后台系统-用户管理-用户认证审批功能实现
(1)后台系统-用户管理-用户列表接口开发
前面我们做了用户登录、用户认证与就诊人,现在我们需要把这些信息在我们的平台管理系统做一个统一管理
先把平台管理系统中的controller放到api模块下操作模块:service-user
在controller中创建一个用户的controller:
UserInfoQueryVo:条件对象作为参数
package com.atguigu.yygh.user.controller;
import com.atguigu.yygh.common.result.Result;
import com.atguigu.yygh.model.user.UserInfo;
import com.atguigu.yygh.user.service.UserInfoService;
import com.atguigu.yygh.vo.user.UserInfoQueryVo;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/admin/user")
public class UserController {
@Autowired
private UserInfoService userInfoService;
//用户列表(条件查询带分页)
@GetMapping("{page}/{limit}")
public Result list(@PathVariable Long page,
@PathVariable Long limit,
UserInfoQueryVo userInfoQueryVo) {
//创建Page对象
Page<UserInfo> pageParam = new Page<>(page,limit);
IPage<UserInfo> pageModel = userInfoService.selectPage(pageParam,userInfoQueryVo);
return Result.ok(pageModel);
}
}
service接口:
package com.atguigu.yygh.user.service;
import com.atguigu.yygh.model.user.UserInfo;
import com.atguigu.yygh.vo.user.LoginVo;
import com.atguigu.yygh.vo.user.UserAuthVo;
import com.atguigu.yygh.vo.user.UserInfoQueryVo;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import java.util.Map;
public interface UserInfoService extends IService<UserInfo> {
//用户手机登录接口
Map<String, Object> login(LoginVo loginVo);
//根据openid判断数据库是否存在微信的扫描人信息
UserInfo selectWxInfoOpenId(String openid);
//用户认证接口
void userAuth(Long userId, UserAuthVo userAuthVo);
//用户列表(条件查询带分页)
IPage<UserInfo> selectPage(Page<UserInfo> pageParam, UserInfoQueryVo userInfoQueryVo);
}
实现类:
Model中有个枚举类:
package com.atguigu.yygh.enums;
public enum AuthStatusEnum {
NO_AUTH(0, "未认证"),
AUTH_RUN(1, "认证中"),
AUTH_SUCCESS(2, "认证成功"),
AUTH_FAIL(-1, "认证失败"),
;
private Integer status;
private String name;
AuthStatusEnum(Integer status, String name) {
this.status = status;
this.name = name;
}
public static String getStatusNameByStatus(Integer status) {
AuthStatusEnum arrObj[] = AuthStatusEnum.values();
for (AuthStatusEnum obj : arrObj) {
if (status.intValue() == obj.getStatus().intValue()) {
return obj.getName();
}
}
return "";
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
//用户列表(条件查询带分页)
@Override
public IPage<UserInfo> selectPage(Page<UserInfo> pageParam, UserInfoQueryVo userInfoQueryVo) {
//UserInfoQueryVo获取条件值
String name = userInfoQueryVo.getKeyword(); //用户名称
Integer status = userInfoQueryVo.getStatus();//用户状态
Integer authStatus = userInfoQueryVo.getAuthStatus(); //认证状态
String createTimeBegin = userInfoQueryVo.getCreateTimeBegin(); //开始时间
String createTimeEnd = userInfoQueryVo.getCreateTimeEnd(); //结束时间
//对条件值进行非空判断
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);
}
//调用mapper的方法
IPage<UserInfo> pages = baseMapper.selectPage(pageParam, wrapper);
//编号变成对应值封装 先遍历
pages.getRecords().stream().forEach(item -> {
//调用编号变成对应值封装
this.packageUserInfo(item);
});
return pages;
}
//编号变成对应值封装
private UserInfo packageUserInfo(UserInfo userInfo) {
//处理认证状态编码 调用枚举类中的方法进行转态转换
userInfo.getParam().put("authStatusString",AuthStatusEnum.getStatusNameByStatus(userInfo.getAuthStatus()));
//处理用户状态 0 1
String statusString = userInfo.getStatus().intValue()==0 ?"锁定" : "正常";
userInfo.getParam().put("statusString",statusString);//放到usetInfo的属性里面
return userInfo;
}
(2)后台系统-用户管理-用户列表与前端整合
打开后台管理系统的项目运行:
在控制台输入 :启动这个项目
访问:
在api目录下创建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
})
}
}
添加路由:
在router文件夹下的eindex.js中添加路由:
创建路由中的目录页面:
<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>
<script>
import userInfoApi from "@/api/userInfo";
export default {
// 定义数据
data() {
return {
listLoading: true, // 数据是否正在加载
list: null, // banner列表
total: 0, // 数据库中的总记录数
page: 1, // 默认页码
limit: 10, // 每页记录数
searchObj: {}, // 查询表单对象
};
},
// 当页面加载时获取数据
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.records;
this.total = response.data.total;
// 数据加载并绑定成功
this.listLoading = false;
});
},
// 当页码发生改变的时候
changeSize(size) {
console.log(size);
this.limit = size;
this.fetchData(1);
},
// 重置查询表单
resetData() {
console.log("重置查询表单");
this.searchObj = {};
this.fetchData();
},
},
};
</script>
点击左侧用户列表:
(3)后台系统-用户管理-用户锁定功能
Usercontroller:继续添加:
//用户锁定
@GetMapping("lock/{userId}/{status}")
public Result lock(@PathVariable Long userId,@PathVariable Integer status) {
userInfoService.lock(userId,status);
return Result.ok();
}
userInfoservice:接口:
//用户锁定
void lock(Long userId, Integer status);
实现类:
//用户锁定
@Override
public void lock(Long userId, Integer status) {
if(status.intValue()==0 || status.intValue()==1) {
UserInfo userInfo = baseMapper.selectById(userId);
userInfo.setStatus(status);
baseMapper.updateById(userInfo);
}
}
在前端userInfo.js中添加访问:
在list.vue页面继续添加锁定按钮:
编写方法:
点击取消锁定:
点击锁定:
(4)后台系统-用户管理-用户详情功能实现
在UserController中继续添加:
//用户详情
@GetMapping("show/{userId}")
public Result show(@PathVariable Long userId) {
Map<String,Object> map = userInfoService.show(userId);
return Result.ok(map);
}
userInfoservice接口:
//用户详情
Map<String, Object> show(Long userId);
实现类:
前端写一个隐藏路由做详情跳转的使用:
创建在user/userInfo目录下创建show.vue
<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.name }}</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="fullAddress" label="地址"/>
<el-table-column prop="createTime" label="注册时间"/>
</el-table>
<br>
<el-row>
<el-button @click="back">返回</el-button>
</el-row>
</div>
</template>
<script>
import userInfoApi from '@/api/userInfo'
export default {
// 定义数据
data() {
return {
id: this.$route.params.id,
userInfo: {}, // 会员信息
patientList: [] // 就诊人列表
}
},
// 当页面加载时获取数据
created() {
this.fetchDataById()
},
methods: {
// 根据id查询会员记录
fetchDataById() {
userInfoApi.show(this.id).then(response => {
this.userInfo = response.data.userInfo
this.patientList = response.data.patientList
})
},
back() {
window.history.back(-1)
}
}
}
</script>
在userInfo.js中添加访问接口:
在列表页面加详情 查看按钮:
测试:
点击最后一个查看:成功查询
(5)后台系统-用户管理-用户认证审批功能实现
用户认证列表
添加路由:
{
path: 'userInfo/authList',
name: '认证审批列表',
component: () =>import('@/views/user/userInfo/authList'),
meta: { title: '认证审批列表', icon: 'table' }
}
创建authList.vue:这个页面跟前面的List.vue页面代码基本一样,只是显示的时候,只让他显示正在审批的用户:
<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/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.records;
this.total = response.data.total;
// 数据加载并绑定成功
this.listLoading = false;
});
},
// 当页码发生改变的时候
changeSize(size) {
console.log(size);
this.limit = size;
this.fetchData(1);
},
// 重置查询表单
resetData() {
console.log("重置查询表单");
this.searchObj = {};
this.fetchData();
},
},
};
</script>
用户审批接口开发:
在UserController中:继续添加
//认证审批
@GetMapping("approval/{userId}/{authStatus}")
public Result approval(@PathVariable Long userId,@PathVariable Integer authStatus) {
userInfoService.approval(userId,authStatus);
return Result.ok();
}
UserInfoService接口:
//认证审批
void approval(Long userId, Integer authStatus);
实现类:
认证状态(0:未认证 1:认证中 2:认证成功 -1:认证失败)
//认证审批 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);
}
}
前端在userInfo.js:定义访问:
在authList.vue页面中添加审批组件:
在页面中继续添加审批的方法
点击通过:
数据库中的 字段由1变为2