尚医通-用户管理功能实现(三十四)

文章详细介绍了如何开发和整合后台系统用户管理的各项功能,包括用户列表接口、用户列表与前端的结合、用户锁定功能、用户详情展示以及用户认证审批的实现。通过代码示例展示了SpringBoot后端和Vue前端的交互过程。
摘要由CSDN通过智能技术生成

目录:

(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)后台系统-用户管理-用户列表与前端整合

打开后台管理系统的项目运行:

在控制台输入 :启动这个项目

 访问:

 http://localhost:9528

 

 

在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

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵俺第一专栏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值