It is used to solve the problem of paging display of user or role and other lists + conditional search
The page number of the query is not displayed when it is not the first page, and the problem of garbled characters and parameters is solved
Backend code:
1. Use springboot integration
pom dependency: mybatis-plus.version3.4.1
<properties>
<mybatis-plus.version>3.4.1</mybatis-plus.version>
</properties>
<!-- mybatis plus -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>${mybatis-plus.version}</version>
</dependency>2. Use the MyBatisPlusConfig pagination plugin
package com.ywp.config.mybatis;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class MyBatisPlusConfig {
// 最新版
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
PaginationInnerInterceptor paginationInnerInterceptor =
new PaginationInnerInterceptor(DbType.MYSQL);//使用的数据库类型
paginationInnerInterceptor.setOverflow(true);//溢出后从第1页开始
//指定数据库类型
interceptor.addInnerInterceptor(paginationInnerInterceptor);
return interceptor;
}
}3. Entity class
package com.ywp.entity;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.time.LocalDateTime;
import java.io.Serializable;
import java.util.Date;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;
/**
* <p>
*
* </p>
*
* @author ywp
* @since 2022-11-27
*/
@Data
@Accessors(chain = true)
@TableName("sys_role")
public class Role implements Serializable {
private static final long serialVersionUID = 1L;
/**
* 角色编号
*/
@TableId(value = "id", type = IdType.AUTO)
private Long id;
/**
* 角色编码
*/
private String roleCode;
/**
* 角色名称
*/
private String roleName;
/**
* 创建人
*/
private Long createUser;
/**
* 创建时间
*/
private Date createTime;
/**
* 修改时间
*/
private Date updateTime;
/**
* 备注
*/
private String remark;
/**
* 是否删除(0-未删除，1-已删除)
*/
private Integer isDelete;
}
4. Encapsulated vo class
package com.ywp.vo.query;
import com.ywp.entity.Role;
import lombok.Data;
@Data
public class RoleQueryVo extends Role {
private Long pageNo = 1L;//当前页码
private Long pageSize = 10L;//每页显示数量
private Long userId;//用户ID
}
5. controller layer
@RestController
@RequestMapping("/api/role")
public class RoleController {
@Resource
private RoleService roleService;
/**
* 分页查询角色列表
* @param roleQueryVo
* @return
*/
@GetMapping("/list")
public Result list( RoleQueryVo roleQueryVo){
//创建分页对象
Page<Role> rolePage =
new Page<>(roleQueryVo.getPageNo(),roleQueryVo.getPageSize() );
//调用分页查询方法
roleService.findRoleListByUserId(rolePage, roleQueryVo);
//返回数据
return Result.ok(rolePage);
}
}6. service interface
/**
* 根据用户查询角色列表
* @param page
* @param roleQueryVo
* @return
*/
IPage<Role> findRoleListByUserId(IPage<Role> page, RoleQueryVo roleQueryVo);7. service implementation class
@Resource
private UserMapper userMapper;
/**
* 根据用户查询角色列表
* @param page
* @param roleQueryVo
* @return
*/
@Override
public IPage<Role> findRoleListByUserId(IPage<Role> page, RoleQueryVo roleQueryVo) {
//创建条件构造器
QueryWrapper<Role> queryWrapper = new QueryWrapper<>();
//角色名称
queryWrapper.like(!ObjectUtils.isEmpty(roleQueryVo.getRoleName()),
"role_name",roleQueryVo.getRoleName());
//排序
queryWrapper.orderByAsc("id");
//根据用户ID查询用户信息
User user = userMapper.selectById(roleQueryVo.getUserId());
//如果用户不为空、且不是管理员，则只能查询自己创建的角色非管理员只能查询自己创建的角色信//
//息。
if (user!=null && !ObjectUtils.isEmpty(user.getIsAdmin()) &&
user.getIsAdmin() != 1 ){
queryWrapper.eq("create_user",roleQueryVo.getUserId());
}
return baseMapper.selectPage(page,queryWrapper);
}Front-end code:
Create request.js in the src/utils directory,
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import qs from 'qs'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
console.log(config)
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token
expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('用户登录信息过期,请重新登录!', 'Confirm logout', {
confirmButtonText: '登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
//请求方法
const http = {
post(url, params) {
return service.post(url, params, {
transformRequest: [(params) => {
return JSON.stringify(params)
}],
headers: {
'Content-Type': 'application/json'
}
})
},
put(url, params) {
return service.put(url, params, {
transformRequest: [(params) => {
return JSON.stringify(params)
}],
headers: {
'Content-Type': 'application/json'
}
})
},
get(url, params) {
return service.get(url, {
params: params,
paramsSerializer: (params) => {
return qs.stringify(params)
}
})
},
getRestApi(url, params) {
let _params
if (Object.is(params, undefined || null)) {
_params = ''
} else {
_params = '/'
for (const key in params) {
console.log(key)
console.log(params[key])
if (params.hasOwnProperty(key) && params[key] !== null && params[key]
!== '') {
_params += `${params[key]}/`
}
}
_params = _params.substr(0, _params.length - 1)
}
console.log(_params)
if (_params) {
return service.get(`${url}${_params}`)
} else {
return service.get(url)
}
},
delete(url, params) {
let _params
if (Object.is(params, undefined || null)) {
_params = ''
} else {
_params = '/'
for (const key in params) {
// eslint-disable-next-line no-prototype-builtins
if (params.hasOwnProperty(key) && params[key] !== null && params[key]
!== '') {
_params += `${params[key]}/`
}
}
_params = _params.substr(0, _params.length - 1)
}
if (_params) {
return service.delete(`${url}${_params}`).catch(err => {
message.error(err.msg)
return Promise.reject(err)
})
} else {
return service.delete(url).catch(err => {
message.error(err.msg)
return Promise.reject(err)
})
}
},
upload(url, params) {
return service.post(url, params, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
},
login(url, params) {
return service.post(url, params, {
transformRequest: [(params) => {
return qs.stringify(params)
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
}
export default http//☚☚☚☚☚1. Create role.js in the src/api directory .
import http from '@/utils/request'
//注意此处是在src/utils目录下创建的request.js的http,不是request
/**
* 查询角色列表
* @returns
*/
export async function getRoles(params) {
return await http.get("/api/role/list",params)
}
2.
Create the roleList.vue component in
the src/views/system/role directory
<template>
<el-main>
<!-- 查询条件 -->
<el-form
:model="RoleQueryVo"
ref="searchForm"
label-width="80px"
:inline="true"
size="small"
>
<el-form-item>
<el-input v-model="RoleQueryVo.roleName" placeholder="请输入角色名称"/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
<el-button icon="el-icon-refresh-right" @click="resetValue">重置</el-button>
<el-button type="success" icon="el-icon-plus">新增</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
:data="roleList"
:height="tableHeight"
border
stripe
style="width: 100%; margin-bottom: 10px"
>
<el-table-column
prop="id"
label="角色编号"
width="100"
align="center"
></el-table-column>
<el-table-column prop="roleCode" label="角色编码"></el-table-column>
<el-table-column prop="roleName" label="角色名称"></el-table-column>
<el-table-column prop="remark" label="角色备注"></el-table-column>
<el-table-column label="操作" align="center" width="290">
<template slot-scope="scope">
<el-button
icon="el-icon-edit"
type="primary"
size="small"
@click="handleEdit(scope.row)"
>编辑
</el-button
>
<el-button
icon="el-icon-delete"
type="danger"
size="small"
@click="handleDelete(scope.row)"
>删除
</el-button
>
<el-button
icon="el-icon-setting"
type="primary"
size="small"
@click="assignRole(scope.row)"
>分配权限
</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页工具栏 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-sizes="[2, 10, 20, 30, 40, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-main>
</template>
<script>
//导入role.js中的方法
import {getRoles} from '@/api/role'
export default {
name: 'roleList',
data(){
return{
//查询条件
RoleQueryVo: {
roleName: '',
pageNo:1,
pageSize:10,
userId:this.$store.getters.userId //当前登录用户ID从Vuex中获取用户ID
},
roleList:[], //数据列表
tableHeight: 0, //表格高度
pageNo: 1, //当前页码
pageSize: 10, //每页显示数量
total: 0, //总数量
toPageOne: false //是否从第一页查起(用于查询条件变动)
}
},
//初始化时调用
created() {
// alert(this.$store.getters.userId)
//调用查询角色列表的方法
this.search()
},
watch:{
//深度监听searchModel对象内部属性变化
'RoleQueryVo.roleName': {
handler(newVal,oldVal){
console.log('oldVal:', oldVal)
console.log('newVal:', newVal)
this.toPageOne = true
},
deep:true
}
},
//挂载后调用
mounted() {
this.$nextTick(()=>{
this.tableHeight = window.innerHeight - 220
})
},
methods: {
/**
* 查询
*/
async search() {
//this.toPageOne=true说明searchModel对象内部属性发生变化,则从第一页开始查起
this.pageNo=this.toPageOne? 1 : this.pageNo
this.RoleQueryVo.pageNo = this.pageNo;//当前页码
this.RoleQueryVo.pageSize = this.pageSize;//每页显示数量
//发送查询请求
let res = await getRoles(this.RoleQueryVo)
//执行成功
if(res.success){
//角色列表
this.roleList = res.data.records;
//总数量
this.total = res.data.total;
//是否从第一页查起(用于查询条件变动)查询条件不变时再次变为false
this.toPageOne=false
}
},
/**
* 重置查询条件
*/
resetValue() {
this.pageNo=1
//清空查询条件
this.RoleQueryVo.roleName="";
//重新查询
this.search();
},
/**
* 当每页数量发生变化时触发该事件
*/
handleSizeChange(size) {
this.pageSize = size; //将每页显示的数量交给成员变量
this.search();
},
/**
* 当页码发生变化时触发该事件
*/
handleCurrentChange(page) {
this.pageNo = page;
//调用查询方法
this.search();
},
}
</script>Note: The current login user ID is obtained from Vuex, and the following code needs to be added.
(1) Save the user ID in the src/store/modules/user.js file.
Add user id at line 67
//The user ID is deconstructed here ☟
const { roles, name, avatar, introduction, id } = data
const { roles, name, avatar, introduction, id } = data
Add commit('SET_USERID', id)//user ID at line 80
if (!roles || roles.length <= 0) {
reject('用户未分配角色权限，请联系管理员！')
}
//将权限字段保存到sessionStorage中
//sessionStorage.setItem("codeList",JSON.stringify(roles));
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_INTRODUCTION', introduction)
//将用户ID保存到Vuex中
commit('SET_USERID', id)//用户ID☚
//☝ ☝ ☝ ☝ ☝ ☝ ☝ ☝ ☝ ☝ ☝
resolve(data)
}).catch(error => {
reject(error)
})
})user.js file ☟☟☟☟☟
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router, { resetRouter } from '@/router'
const state = {
token: getToken(),
name: '',
avatar: '',
introduction: '',
roles: []
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
//设置用户ID
SET_USERID: (state, userId) => {
state.userId=userId
}
//☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝
}
const actions = {
// 用户登录
login({ commit }, userInfo) {
//从用户信息userInfo中解构出用户名和密码
const { username, password } = userInfo
return new Promise((resolve, reject) => {
//调用src/api/user.js文件中的login()方法
login({ username: username.trim(), password: password }).then(response => {
//从response中解构出返回的token数据
const { token } = response
//将返回的token数据保存到store中，作为全局变量使用
commit('SET_TOKEN', token)
//将token信息保存到cookie中
setToken(token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
//调用api/user里面的getInfo方法获取用户信息和权限信息
getInfo(state.token).then(response => {
const { data } = response
console.log(data)
if (!data) {
reject('Verification failed, please Login again.')
}
//此处解构出用户ID
const { roles, name, avatar, introduction, id } = data
//☝
// roles must be a non-empty array
if (!roles || roles.length <= 0) {
reject('用户未分配角色权限，请联系管理员！')
}
//将权限字段保存到sessionStorage中
//sessionStorage.setItem("codeList",JSON.stringify(roles));
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_INTRODUCTION', introduction)
//将用户ID保存到Vuex中
commit('SET_USERID', id)//用户ID☚
//☝☝☝☝☝☝☝☝☝☝☝☝☝
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state, dispatch }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resetRouter()
// reset visited views and cached views
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
dispatch('tagsView/delAllViews', null, { root: true })
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resolve()
})
},
// dynamically modify permissions
async changeRoles({ commit, dispatch }, role) {
const token = role + '-token'
commit('SET_TOKEN', token)
setToken(token)
const { roles } = await dispatch('getInfo')
resetRouter()
// generate accessible routes map based on roles
const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
// dynamically add accessible routes
router.addRoutes(accessRoutes)
// reset visited views and cached views
dispatch('tagsView/delAllViews', null, { root: true })
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
(2) Set the user ID in the mutations of the src/store/modules/user.js file.
const mutations = {
//设置用户ID
SET_USERUID: (state, userId) => {
state.userId = userId
},
}
Save user id in
src/store/getters.js file
.
userId: state => state.user.userId,const getters = {
sidebar: state => state.app.sidebar,
size: state => state.app.size,
device: state => state.app.device,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
introduction: state => state.user.introduction,
roles: state => state.user.roles,
permission_routes: state => state.permission.routes,
errorLogs: state => state.errorLog.logs,
//保存用户ID
userId: state => state.user.userId,
//☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝
}
export default getters
getters.js☝☝☝☝