结合Vue与Mybatis-plus优雅的设计分页展示

分页技术组件的实现与前端显示

在这个示例中，我们将结合 Vue.js 前端代码、请求处理逻辑、以及后端 Java 代码，实现分页功能。该功能的核心是通过前端传递分页参数给后端，后端处理请求并返回相应的数据，最后前端显示分页后的数据。

1. 前端 Vue.js 代码

在 Vue.js 中，我们使用了 Element UI 的 Pagination 组件来处理分页。前端代码中 listQuery 包含了分页所需的参数，例如 currentPage（当前页数）和 pageSize（每页显示的条目数）。

vue 复制代码

<template>
  <div>
    <el-table :data="list" v-loading="listLoading">
      <!-- 其他表格内容 -->
    </el-table>
    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  data() {
    return {
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc',
        sidx: '',
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.listLoading = true;
      let query = {
        ...this.listQuery,
        ...this.query,
      };
      request({
        url: `/baseconfig/ConfigFeeItem`,
        method: 'get',
        data: query,
      }).then(res => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
  },
};
</script>

2. 请求处理：request.js 和 auth.js

在 request.js 中，我们使用 axios 来发送 HTTP 请求，并配置了请求和响应的拦截器，用于处理 token 以及统一处理错误。

auth.js 提供了与 token 相关的工具函数，例如获取、设置和删除 token。

javascript 复制代码

// auth.js
import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'
const UserKey = 'username'
const userId = 'userId'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function getUsername() {
  return Cookies.get(UserKey)
}

export function getUserId() {
  return Cookies.get(userId)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function setUsername(username) {
  return Cookies.set(UserKey, username)
}

export function removeToken() {
  Cookies.remove(UserKey);
  return Cookies.remove(TokenKey)
}

javascript 复制代码

// request.js
import axios from 'axios';
import { Notification, MessageBox, Message } from 'element-ui';
import { getToken } from '@/utils/auth';
import errorCode from '@/utils/errorCode';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json;charset=utf-8' },
});

service.interceptors.request.use(config => {
  const isToken = (config.headers || {}).isToken === false;
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken();
  }
  if (config.method === 'get' && config.data) {
    config.params = config.data;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

service.interceptors.response.use(res => {
  const code = res.data.code || 200;
  const msg = errorCode[code] || res.data.msg || errorCode['default'];
  if (code === 401) {
    MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
      confirmButtonText: '重新登录',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      store.dispatch('LogOut').then(() => {
        location.href = '/index';
      });
    });
    return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
  } else if (code !== 200) {
    Notification.error({ title: msg });
    return Promise.reject('error');
  } else {
    return res.data;
  }
}, error => {
  Message({ message: error.message, type: 'error', duration: 5000 });
  return Promise.reject(error);
});

export default service;

3. 后端 Java 代码

后端部分包括控制器层、服务层以及分页实体类，用于处理前端传递的分页请求，并返回分页后的数据。

java 复制代码

// ConfigFeeItemController.java
@RestController
@Api(tags = "收费项管理")
@RequestMapping("/baseconfig/ConfigFeeItem")
public class ConfigFeeItemController {
    @Autowired
    private ConfigFeeItemService configFeeItemService;

    @GetMapping
    @ApiOperation("获取收费项列表")
    public ActionResult list(ConfigFeeItemPagination configFeeItemPagination) throws IOException {
        List<ConfigFeeItemEntity> list = configFeeItemService.getList(configFeeItemPagination);
        List<ConfigFeeItemListVO> listVO = JsonUtil.getJsonToList(list, ConfigFeeItemListVO.class);
        PageListVO vo = new PageListVO();
        vo.setList(listVO);
        PaginationVO page = JsonUtil.getJsonToBean(configFeeItemPagination, PaginationVO.class);
        vo.setPagination(page);
        return ActionResult.success(vo);
    }
}

// ConfigFeeItemServiceImpl.java
@Service
public class ConfigFeeItemServiceImpl extends ServiceImpl<ConfigFeeItemMapper, ConfigFeeItemEntity> implements ConfigFeeItemService {
    @Autowired
    private UserProvider userProvider;

    @Override
    public List<ConfigFeeItemEntity> getList(ConfigFeeItemPagination configFeeItemPagination) {
        QueryWrapper<ConfigFeeItemEntity> queryWrapper = new QueryWrapper<>();
        // 根据前端传递的参数构造查询条件
        // 省略部分条件代码...
        
        // 排序
        if (StringUtil.isEmpty(configFeeItemPagination.getSidx())) {
            queryWrapper.lambda().orderByDesc(ConfigFeeItemEntity::getId);
        } else {
            queryWrapper = "asc".equals(configFeeItemPagination.getSort().toLowerCase()) ? 
                queryWrapper.orderByAsc(configFeeItemPagination.getSidx()) :
                queryWrapper.orderByDesc(configFeeItemPagination.getSidx());
        }
        
        Page<ConfigFeeItemEntity> page = new Page<>(configFeeItemPagination.getCurrentPage(), configFeeItemPagination.getPageSize());
        IPage<ConfigFeeItemEntity> userIPage = this.page(page, queryWrapper);
        return configFeeItemPagination.setData(userIPage.getRecords(), userIPage.getTotal());
    }
}

最为重要的及是分页的编写

pagination类

page类

java 复制代码

import lombok.Data;
@Data
public class Page {
    private String keyword="";
}

java 复制代码

package com.tqing.base.vo;

import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.Data;

import java.util.List;

@Data 
public class Pagination extends Page{
    private long pageSize=20;
    private long maxPageSize = 50;
    private String sort="desc";
    private String sidx="";
    private long currentPage=1;

    @JsonIgnore
    private long total;
    @JsonIgnore
    private long records;
    @JsonIgnore
    private long offset;

    public <T> List<T> setData(List<T> data, long records) {
        this.total = records;
        return data;
    }
    
    public void setPageSize(long size) {
    	if(size>maxPageSize) {
    		this.pageSize = maxPageSize;
    	}else {
    		this.pageSize = size;
    	}
    }
    
    public long getOffset() {
    	if(pageSize*(currentPage-1)>0) {
    		return pageSize*(currentPage-1);
    	}else {
    		return 0;
    	}
    }
}

entity类

java 复制代码

package com.tqing.baseconfig.model.configfeeitem;
import lombok.Data;

@Data
@JsonIgnoreProperties(ignoreUnknown = true)
public class ConfigFeeItemPagination extends Pagination {
    /** 收费项分类 */
    private String type;

    /** 收费项目名 */
    private String name;

    /** 费用计算公式 */
    private String formula;
    
    /** 数量类型 */
    private String numType;
    
    /** 收费数据生成类型 */
    private String generateType;

    /** 是否产生滞纳金 */
    private Integer lateFeeEnable;

    /** 滞纳金延迟多久收 */
    private Integer lateFeeDays;

    /** 滞纳金比例 */
    private String lateFeeRate;

}

#### 4. **总结**

以上代码展示了一个完整的前后端分页实现方案：
- **前端**：通过 `listQuery` 设置分页参数，并使用 `axios` 发送请求获取数据。
- **后端**：接收分页请求参数，并根据这些参数构造数据库查询，最终返回分页结果。

这种分页实现方式适用于大部分的业务场景，尤其是在需要处理大量数据并进行分页展示的应用中。