java后端實(shí)現(xiàn)信息分頁(yè)查詢(xún)的示例代碼
需求分析
在一個(gè)頁(yè)面展示大量的用戶(hù)信息不便于觀看,因此采用分頁(yè)展示的方法。
用戶(hù)可以通過(guò)分頁(yè)條自己選擇查看的數(shù)量。
可以用條件過(guò)濾一些信息,在查詢(xún)的同時(shí)還需要分頁(yè)展示
代碼開(kāi)發(fā)
1.流程
頁(yè)面發(fā)送ajax請(qǐng)求,將分頁(yè)查詢(xún)參數(shù)(page,pageSize,name)提交到服務(wù)端
服務(wù)端Controller接收到頁(yè)面提交的數(shù)據(jù)并調(diào)用Service查詢(xún)數(shù)據(jù)
Service調(diào)用Mapper操作數(shù)據(jù)庫(kù),查詢(xún)分頁(yè)展示
Controller將查詢(xún)到的分頁(yè)數(shù)據(jù)響應(yīng)給頁(yè)面
頁(yè)面接收到分頁(yè)數(shù)據(jù)并通過(guò)ElementUI的Table組件展示到頁(yè)面上
2.要點(diǎn)說(shuō)明
全局請(qǐng)求攔截器,發(fā)送get方式ajax請(qǐng)求,json格式的參數(shù)會(huì)統(tǒng)一進(jìn)行處理,重新組裝。
最終格式:http://localhost:8080/employee/page?page=1&pageSize=10
// request攔截器
service.interceptors.request.use(config => {
// 是否需要設(shè)置 token
// const isToken = (config.headers || {}).isToken === false
// if (getToken() && !isToken) {
// config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改
// }
// get請(qǐng)求映射params參數(shù)
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof(value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
前端響應(yīng)攔截器
// 響應(yīng)攔截器
service.interceptors.response.use(res => {
if (res.data.code === 0 && res.data.msg === 'NOTLOGIN') {// 返回登錄頁(yè)面
console.log('---/backend/page/login/login.html---')
localStorage.removeItem('userInfo')
window.top.location.href = '/backend/page/login/login.html'
} else {
return res.data
}
},
error => {
console.log('err' + error)
let { message } = error;
if (message == "Network Error") {
message = "后端接口連接異常";
}
else if (message.includes("timeout")) {
message = "系統(tǒng)接口請(qǐng)求超時(shí)";
}
else if (message.includes("Request failed with status code")) {
message = "系統(tǒng)接口" + message.substr(message.length - 3) + "異常";
}
window.ELEMENT.Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
前后端對(duì)接的數(shù)據(jù)需要統(tǒng)一
3.后端代碼開(kāi)發(fā)
配置Mybatis-plus的分頁(yè)插件
/**
* 配置MP的分頁(yè)插件
*/
@Configuration //配置類(lèi)注解
public class MybatisPlusConfig {
//通過(guò)攔截器的方式將插件加載到項(xiàng)目
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor(){
//創(chuàng)建攔截器對(duì)象
MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
//通過(guò)對(duì)象加載攔截器
mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return mybatisPlusInterceptor;
}
}
創(chuàng)建controller類(lèi)接收前端頁(yè)面發(fā)送請(qǐng)求的參數(shù)
/**
* 員工信息的分頁(yè)查詢(xún)
* @param page
* @param pageSize
* @param name
* @return
*/
@GetMapping("/page")
public R<Page> page(int page,int pageSize,String name) {
log.info("page={},pageSize={},name={}", page, pageSize, name);
//1.構(gòu)造分頁(yè)構(gòu)造器
Page pageInfo = new Page<>(page, pageSize);
//2.構(gòu)造條件構(gòu)造器
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();
// 2.1添加一個(gè)過(guò)濾條件
queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name);
// 2.2添加一個(gè)排序條件
queryWrapper.orderByDesc(Employee::getUpdateTime);
//3.執(zhí)行查詢(xún)
employeeService.page(pageInfo, queryWrapper);
return R.success(pageInfo);
}
測(cè)試
使用斷點(diǎn)調(diào)試,跟蹤代碼邏輯,驗(yàn)證是否符合預(yù)期
到此這篇關(guān)于java后端實(shí)現(xiàn)信息分頁(yè)查詢(xún)的示例代碼的文章就介紹到這了,更多相關(guān)java分頁(yè)查詢(xún)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
深入解析Java的Servlet過(guò)濾器的原理及其應(yīng)用
這篇文章主要介紹了深入解析Java的Servlet過(guò)濾器的原理及應(yīng)用,Java編寫(xiě)的Servlet通常是一個(gè)與網(wǎng)頁(yè)一起作用于瀏覽器客戶(hù)端的程序,需要的朋友可以參考下2016-01-01
MybatisPlus查詢(xún)條件空字符串和NULL問(wèn)題背景分析
文章詳細(xì)分析了MybatisPlus在處理查詢(xún)條件時(shí),空字符串和NULL值的問(wèn)題,MP 3.3.0及以上版本提供了多種解決方法,包括在Bean屬性上使用注解、全局配置等,推薦使用全局配置的方式來(lái)解決這個(gè)問(wèn)題,以避免在SQL查詢(xún)中出現(xiàn)不必要的空字符串條件,感興趣的朋友跟隨小編一起看看吧2025-03-03
淺談resultMap的用法及關(guān)聯(lián)結(jié)果集映射
這篇文章主要介紹了resultMap的用法及關(guān)聯(lián)結(jié)果集映射操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-06-06
java.util.Random和concurrent.ThreadLocalRandom使用對(duì)比
這篇文章主要介紹了java.util.Random和concurrent.ThreadLocalRandom使用對(duì)比,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Java 用反射設(shè)置對(duì)象的屬性值實(shí)例詳解
這篇文章主要介紹了Java 用反射設(shè)置對(duì)象的屬性值實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
通過(guò)實(shí)例解析Java不可變對(duì)象原理
這篇文章主要介紹了通過(guò)實(shí)例解析Java不可變對(duì)象原理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
Java string類(lèi)型轉(zhuǎn)換成map代碼實(shí)例
這篇文章主要介紹了Java string類(lèi)型轉(zhuǎn)換成map代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
Java中的Sentinel持久化規(guī)則啟動(dòng)
這篇文章主要介紹了Java中的Sentinel持久化規(guī)則啟動(dòng),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08

