结合Vue与Mybatis-plus优雅的设计分页展示
分页技术组件的实现与前端显示
在这个示例中，我们将结合 Vue.js 前端代码、请求处理逻辑、以及后端 Java 代码，实现分页功能。该功能的核心是通过前端传递分页参数给后端，后端处理请求并返回相应的数据，最后前端显示分页后的数据。
1. 前端 Vue.js 代码
在 Vue.js 中，我们使用了 Element UI 的 Pagination 组件来处理分页。前端代码中 listQuery 包含了分页所需的参数，例如 currentPage（当前页数）和 pageSize（每页显示的条目数）。
2. 请求处理：request.js 和 auth.js
在 request.js 中，我们使用 axios 来发送 HTTP 请求，并配置了请求和响应的拦截器，用于处理 token 以及统一处理错误。
auth.js 提供了与 token 相关的工具函数，例如获取、设置和删除 token。
// 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)
}
// 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 代码
后端部分包括控制器层、服务层以及分页实体类，用于处理前端传递的分页请求，并返回分页后的数据。
// 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类
import lombok.Data;
@Data
public class Page {
private String keyword="";
}
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类
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` 发送请求获取数据。
- **后端**：接收分页请求参数，并根据这些参数构造数据库查询，最终返回分页结果。
这种分页实现方式适用于大部分的业务场景，尤其是在需要处理大量数据并进行分页展示的应用中。