第77讲用户管理功能实现

用户管理功能实现
前端：
views/user/index.vue

<template><el-card><el-row :gutter="20" class="header"><el-col :span="7"><el-input placeholder="请输入用户昵称..." clearable v-model="queryForm.query"></el-input></el-col><el-button type="button" :icon="Search" @click="initUserList">搜索</el-button></el-row><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="id" label="#ID" width="80" /><el-table-column prop="nickName" label="用户昵称" width="200" /><el-table-column prop="avatarUrl" label="头像" width="200"><template v-slot="scope"><img :src="scope.row.avatarUrl" width="50" height="50"/></template></el-table-column><el-table-column prop="openid" label="openID" /><el-table-column prop="registerDate" label="注册日期" width="200"/><el-table-column prop="lastLoginDate" label="最后登录日期" width="200"/></el-table><el-paginationv-model:currentPage="queryForm.pageNum"v-model:page-size="queryForm.pageSize":page-sizes="[10, 20, 30, 40,50]"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></el-card>
</template><script setup>import {Search} from '@element-plus/icons-vue'import { ref } from 'vue'import axios from "@/util/axios";const queryForm=ref({query:'',pageNum:1,pageSize:10})const total=ref(0)const tableData =ref([])const initUserList=async()=>{const res=await axios.post("admin/user/list",queryForm.value);tableData.value=res.data.userList;total.value=res.data.total;}initUserList();const handleSizeChange = (pageSize) => {queryForm.value.pageNum=1;queryForm.value.pageSize=pageSize;initUserList();}const handleCurrentChange = (pageNum) => {queryForm.value.pageNum=pageNum;initUserList();}</script><style lang="scss" scoped>.header{padding-bottom: 16px;box-sizing: border-box;
}.el-pagination{padding-top: 15px;box-sizing: border-box;
}</style>

后端：

@RestController
@RequestMapping("/admin/user")
public class AdminUserController {@Autowiredprivate IWxUserInfoService wxUserInfoService;/*** 根据条件分页查询用户信息* @param pageBean* @return*/@RequestMapping("/list")public R list(@RequestBody PageBean pageBean){System.out.println(pageBean);String query=pageBean.getQuery().trim();Page<WxUserInfo> page=new Page<>(pageBean.getPageNum(),pageBean.getPageSize());Page<WxUserInfo> pageResult = wxUserInfoService.page(page, new QueryWrapper<WxUserInfo>().like(StringUtil.isNotEmpty(query),"nickName", query));Map<String,Object> map=new HashMap<>();map.put("userList",pageResult.getRecords());map.put("total",pageResult.getTotal());return R.ok(map);}}

管理员请求鉴权

在这里插入图片描述

package com.java1234.interceptor;import com.java1234.util.JwtUtils;
import com.java1234.util.StringUtil;
import io.jsonwebtoken.Claims;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** @author java1234_小锋* @site www.java1234.com* @company 南通小锋网络科技有限公司* @create 2022-04-06 9:14*/
public class SysInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {String path=request.getRequestURI();System.out.println("path="+path);if(handler instanceof HandlerMethod){// 判断token是否为空String token=request.getHeader("token");System.out.println("token="+token);if(StringUtil.isEmpty(token)){System.out.println("token为空！");throw new RuntimeException("签名验证不存在！");}else{// 如果token不为空Claims claims = JwtUtils.validateJWT(token).getClaims();if(claims==null){System.out.println("鉴权失败");throw new RuntimeException("鉴权失败！");}else{System.out.println("鉴权成功");return true;}}}else{return true;}}
}

PageBean

package com.java1234.entity;/*** 分页Model类* @author java1234_小锋* @site www.java1234.com* @company Java知识分享网* @create 2020-02-16 上午 11:05*/
public class PageBean {private int pageNum; // 第几页private int pageSize; // 每页记录数private int start;  // 起始页private String query; // 查询参数public PageBean() {}public PageBean(int pageNum, int pageSize, String query) {this.pageNum = pageNum;this.pageSize = pageSize;this.query = query;}public PageBean(int pageNum, int pageSize) {super();this.pageNum = pageNum;this.pageSize = pageSize;}public int getPageNum() {return pageNum;}public void setPageNum(int pageNum) {this.pageNum = pageNum;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}public int getStart() {return (pageNum-1)*pageSize;}public String getQuery() {return query;}public void setQuery(String query) {this.query = query;}
}

AdminUserController

package com.java1234.controller.admin;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.java1234.entity.PageBean;
import com.java1234.entity.R;
import com.java1234.entity.WxUserInfo;
import com.java1234.service.IWxUserInfoService;
import com.java1234.util.StringUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;
import java.util.Map;/*** 后台管理-用户Controller控制器*/
@RestController
@RequestMapping("/admin/user")
public class AdminUserController {@Autowiredprivate IWxUserInfoService wxUserInfoService;/*** 根据条件分页查询用户信息* @param pageBean* @return*/@RequestMapping("/list")public R list(@RequestBody PageBean pageBean){System.out.println(pageBean);String query=pageBean.getQuery().trim();Page<WxUserInfo> page=new Page<>(pageBean.getPageNum(),pageBean.getPageSize());Page<WxUserInfo> pageResult=wxUserInfoService.page(page,new QueryWrapper<WxUserInfo>().like(StringUtil.isNotEmpty(query),"nickName",query));Map<String,Object> map=new HashMap<>();map.put("userList",pageResult.getRecords());map.put("total",pageResult.getTotal());return R.ok(map);}
}

router .js

path: ‘/user’,

import { createRouter, createWebHashHistory } from 'vue-router'const routes = [{path: '/',name: '首页',component: () => import('../views/layout'),redirect:'/home',children:[{path: '/home',name: '首页',component: () => import('../views/home/index')},{path: '/bigType',name: '商品大类',component: () => import('../views/bigType/index')},{path: '/user',name: '用户管理',component: () => import('../views/user/index')}]},{path: '/login',name: 'login',component: () => import('../views/login')}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router