SpringBoot分頁(yè)查詢(xún)功能的實(shí)現(xiàn)方法
前言:
學(xué)習(xí)了SpringBoot分頁(yè)查詢(xún)的兩種寫(xiě)法,一種是手動(dòng)實(shí)現(xiàn),另一種是使用框架實(shí)現(xiàn)?,F(xiàn)在我將具體的實(shí)現(xiàn)流程分享一下。
首先是手動(dòng)實(shí)現(xiàn)分頁(yè)查詢(xún):
先復(fù)習(xí)一下,SQL中的limit關(guān)鍵字,下面一行sql語(yǔ)句的意思是從第二個(gè)數(shù)據(jù)開(kāi)始查,查詢(xún)出兩條數(shù)據(jù)
SELECT * FROM sys_user limit 1,2;
使用limit前一個(gè)參數(shù)pageNum是從第幾個(gè)數(shù)據(jù)開(kāi)始查,后一個(gè)參數(shù)pageSize是查詢(xún)多少條數(shù)據(jù),
注意數(shù)據(jù)庫(kù)查詢(xún)pageNum=0代表第一個(gè)數(shù)據(jù)。
那么在Springboot中該如何寫(xiě)呢?
controller:
// 分頁(yè)查詢(xún) // 接口路徑:/user/page?pageNum=1&pageSize=10 // @RequestParam接收 // limit第一個(gè)參數(shù)= (pageNum-1)+pageSize @GetMapping("/page") public List<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize){ pageNum = (pageNum-1); return userMapper.selectPage(pageNum,pageSize); } }
mapper:
@Select("select * from sys_user limit #{pageNum},#{pageSize}") List<User> selectPage(Integer pageNum, Integer pageSize);
這樣就寫(xiě)好了,測(cè)試一下:
完善一下controller,添加查詢(xún) 總條數(shù)的方法:
// 分頁(yè)查詢(xún) // 接口路徑:/user/page?pageNum=1&pageSize=10 // @RequestParam接收 前端url // limit第一個(gè)參數(shù)= (pageNum-1)*pageSize @GetMapping("/page") public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){ pageNum = (pageNum-1)*pageSize; List<User> data = userMapper.selectPage(pageNum,pageSize); Integer total = userMapper.selectTotal(); Map<String,Object> res = new HashMap<>(); res.put("data",data); res.put("total",total); return res; }
接下來(lái)是關(guān)聯(lián)前端分頁(yè)和后臺(tái)數(shù)據(jù):
修改分頁(yè)頁(yè)面homeView:
使用fetch()請(qǐng)求分頁(yè)數(shù)據(jù)
created() { //請(qǐng)求分頁(yè)數(shù)據(jù) fetch("localhost:9090/user/page?pageNum=1&pageSize=2").then(res =>res.json()).then(res =>{ console.log(res) }) },
fetch得到的是一個(gè)字符串?dāng)?shù)據(jù),需要將其轉(zhuǎn)換成Json格式,使用console.log()打印數(shù)據(jù)
@JsonIgnore忽略某一個(gè)屬性的注解
修改前端頁(yè)面表格數(shù)據(jù):
表格數(shù)據(jù)對(duì)應(yīng)數(shù)據(jù)庫(kù)的屬性
<el-table :data="tableData" border stripe :header-cell-class-name="headerBg"> <el-table-column prop="id" label="ID" width="80"> </el-table-column> <el-table-column prop="username" label="用戶(hù)名" width="140"> </el-table-column> <el-table-column prop="nickname" label="昵稱(chēng)" width="120"> </el-table-column> <el-table-column prop="email" label="郵箱"> </el-table-column> <el-table-column prop="phone" label="電話(huà)"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column>
修改前端數(shù)據(jù)內(nèi)容:
data() { return { tableData: [], //表格的值默認(rèn)為空數(shù)組 total: 0, //查詢(xún)條數(shù)默認(rèn)為0 msg: "hello 阿晴", collapseBtnClass: 'el-icon-s-fold', isCollapse: false, sideWidth: 200, logoTextShow: true, headerBg: 'headerBg' } },
渲染頁(yè)面:
created() { //請(qǐng)求分頁(yè)數(shù)據(jù) fetch("http://localhost:9090/user/page?pageNum=1&pageSize=2").then(res =>res.json()).then(res =>{ console.log(res) this.tableData = res.data this.total = res.total }) },
分頁(yè)函數(shù):
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> load() { fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize=" + this.pageSize) .then(res => res.json()).then(res => { console.log(res) this.tableData = res.data this.total = res.total }) }, handleSizeChange(pageSize){ console.log(pageSize) this.pageSize = pageSize this.load() }, handleCurrentChange(pageNum){ console.log(pageNum) this.pageNum = pageNum this.load() } }
實(shí)現(xiàn)分頁(yè)功能:
模糊查詢(xún):
controller:
@GetMapping("/page") public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize,@RequestParam String username){ pageNum = (pageNum-1)*pageSize; List<User> data = userMapper.selectPage(pageNum,pageSize,username); Integer total = userMapper.selectTotal(); Map<String,Object> res = new HashMap<>(); res.put("data",data); res.put("total",total); return res; }
mapper:
@Select("select * from sys_user where username like concat('%', #{username}, '%') limit #{pageNum},#{pageSize}") List<User> selectPage(Integer pageNum, Integer pageSize,String username);
測(cè)試一下:
在前端綁定:
<div style="margin: 10px 0"> <el-input style="width: 200px" placeholder="請(qǐng)輸入名稱(chēng)" suffix-icon="el-icon-search" v-model="username"></el-input> <el-input style="width: 200px" placeholder="請(qǐng)輸入郵箱" suffix-icon="el-icon-message" class="ml-5"></el-input> <el-input style="width: 200px" placeholder="請(qǐng)輸入地址" suffix-icon="el-icon-position" class="ml-5"></el-input> <el-button class="ml-5" type="primary" @click="load">搜索</el-button> </div>
data() { return { tableData: [], total: 0, pageNum: 1, pageSize: 2, username: "", msg: "hello 阿晴", collapseBtnClass: 'el-icon-s-fold', isCollapse: false, sideWidth: 200, logoTextShow: true, headerBg: 'headerBg' } },
load() { fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize=" + this.pageSize+"&username="+this.username) .then(res => res.json()).then(res => { console.log(res) this.tableData = res.data this.total = res.total }) },
總結(jié)
到此這篇關(guān)于SpringBoot分頁(yè)查詢(xún)功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)SpringBoot分頁(yè)查詢(xún)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
java中http請(qǐng)求之restTemplate配置超時(shí)時(shí)間問(wèn)題解決
這篇文章主要介紹了java中http請(qǐng)求之restTemplate配置超時(shí)時(shí)間,本文給大家分享三種解決方法,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05如何使用BigDecimal實(shí)現(xiàn)Java開(kāi)發(fā)商業(yè)計(jì)算
這篇文章主要介紹了如何使用BigDecimal實(shí)現(xiàn)Java開(kāi)發(fā)商業(yè)計(jì)算,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09解決Spring導(dǎo)出可以運(yùn)行的jar包問(wèn)題
最近需要解決Maven項(xiàng)目導(dǎo)入可執(zhí)行的jar包的問(wèn)題,如果項(xiàng)目不包含Spring,那么使用mvn assembly:assembly即可,這篇文章主要介紹了Spring導(dǎo)出可以運(yùn)行的jar包,需要的朋友可以參考下2023-03-03SpringBoot集成logback打印彩色日志的代碼實(shí)現(xiàn)
Logback是由log4j創(chuàng)始人設(shè)計(jì)的另一個(gè)開(kāi)源日志組件,默認(rèn)情況下,Spring?Boot會(huì)用Logback來(lái)記錄日志,并用INFO級(jí)別輸出到控制臺(tái),本文給大家介紹了SpringBoot集成logback打印彩色日志,需要的朋友可以參考下2024-03-03JavaWeb項(xiàng)目中DLL文件動(dòng)態(tài)加載方法
在JavaWeb項(xiàng)目中,有時(shí)候我們需要在運(yùn)行時(shí)動(dòng)態(tài)加載DLL文件(在Windows中是DLL,在Linux中是SO文件),這通常用于實(shí)現(xiàn)一些特定的功能,比如調(diào)用本機(jī)代碼或者使用某些特定于操作系統(tǒng)的API,本文將介紹如何在JavaWeb項(xiàng)目中動(dòng)態(tài)加載DLL文件,需要的朋友可以參考下2024-12-12Spring Boot 實(shí)現(xiàn)圖片上傳并回顯功能
本篇文章給大家分享Spring Boot 實(shí)現(xiàn)圖片上傳并回顯功能,文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-07-07Eclipse創(chuàng)建java程序可執(zhí)行jar包教程
這篇文章主要為大家分享了Eclipse創(chuàng)建java程序可執(zhí)行jar包教程,具有一定的實(shí)用性和參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05