VUE2.0+vue-element-admin4.4.0中分页查询在不是第一页的情况下发起查询不乱码配置参考

用于解决用户或角色等列表分页显示+条件搜索出现的

在不是第一页的情况下发起查询页码不显示第一页,乱码乱参数的情况解决

后端代码:

  1.使用springboot集成

 pom依赖 :  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.使用MyBatisPlusConfig分页插件

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.实体类

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.封装的vo类

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层

@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接口

 /**
     * 根据用户查询角色列表
     * @param page
     * @param roleQueryVo
     * @return
     */
    IPage<Role> findRoleListByUserId(IPage<Role> page, RoleQueryVo roleQueryVo);

7.service实现类

    @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);
    }

前端代码:

在src/utils目录下创建request.js,

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.在src/api目录下创建role.js。

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.在 src/views/system/role 目录下创建 roleList.vue 组件

<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>

注意：当前登录用户ID从Vuex中获取，需要进行添加如下代码。

（1)在src/store/modules/user.js文件中保存用户ID。

67行处添加用户id

       //此处解构出用户ID                              ☟
  const { roles, name, avatar, introduction, id } = data

80行处添加  commit('SET_USERID', id)//用户ID

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文件☟☟☟☟☟                                

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)src/store/modules/user.js文件mutations中设置用户ID。

const mutations = {
//设置用户ID
SET_USERUID: (state, userId) => {
state.userId = userId
},
}

在 src/store/getters.js 文件中保存用户 ID 。

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☝☝☝☝

扫描二维码关注公众号，回复： 15997914 查看本文章