分頁查詢和模糊查詢前後端程式碼
阿新 • • 發佈：2022-04-19
前端程式碼
<template> <div class="home"> <el-container style="height: 100%;"> <!--左側邊欄--> <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);height: 100%; box-shadow:2px 0 6px rgb(0, 21, 41, 0.35)"> <el-menu :default-openeds="['1', '3']" style="height: 100%;background-color: rgb(48, 65, 86);overflow-x: hidden" default-active="2" background-color="#304156FF" text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false" :collapse="isCollapse" class="el-menu-vertical-demo" > <div style="height: 60px;line-height: 60px;text-align: center"> <img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top: 5px;margin-right: 5px"></img> <b style="color: #fff" v-show="logoTextShow">後臺管理系統</b> </div> <el-submenu index="1"> <template slot="title"> <i class="el-icon-message"></i> <span slot="title">導航一</span> </template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="1-1">選項1</el-menu-item> <el-menu-item index="1-2">選項2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="1-3">選項3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">選項4</template> <el-menu-item index="1-4-1">選項4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span slot="title">導航二</span> </template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="2-1">選項1</el-menu-item> <el-menu-item index="2-2">選項2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="2-3">選項3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template slot="title">選項4</template> <el-menu-item index="2-4-1">選項4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-setting"></i> <span slot="title">導航三</span> </template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="3-1">選項1</el-menu-item> <el-menu-item index="3-2">選項2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="3-3">選項3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">選項4</template> <el-menu-item index="3-4-1">選項4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <!--右邊--> <el-container> <!--頭部--> <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px;display: flex"> <div style="flex: 1;font-size: 20px"> <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span> </div> <el-dropdown style="width: 70px;cursor: pointer"> <span>王小虎<i class="el-icon-arrow-down" style="margin-left: 5px"></i></span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>個人資訊</el-dropdown-item> <el-dropdown-item>退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <!--主體--> <el-main> <div class="mg-10"> <el-input v-model="username" style="width: 200px" suffix-icon="el-icon-search" placeholder="請輸入名稱"></el-input> <el-input v-model="email" style="width: 200px" suffix-icon="el-icon-message" placeholder="請輸入郵箱" class="ml-5"></el-input> <el-input v-model="address" style="width: 200px" suffix-icon="el-icon-position" placeholder="請輸入地址" class="ml-5"></el-input> <el-button class="ml-5" type="primary" @click="findPage()">搜尋</el-button> </div> <div class="mg-10"> <el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i></el-button> <el-button type="danger">批量刪除 <i class="el-icon-remove-outline"></i></el-button> <el-button type="primary">匯入 <i class="el-icon-bottom"></i></el-button> <el-button type="primary">匯出 <i class="el-icon-top"></i></el-button> </div> <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"> <el-table-column prop="id" label="ID" width="120"> </el-table-column> <el-table-column prop="username" label="使用者名稱" width="80"> </el-table-column> <el-table-column prop="password" label="密碼" width="120"> </el-table-column> <el-table-column prop="nickname" label="暱稱" width="120"> </el-table-column> <el-table-column prop="email" label="郵箱" width="200"> </el-table-column> <el-table-column prop="phone" label="電話" width="120"> </el-table-column> <el-table-column prop="address" label="地址" width="250"> </el-table-column> <el-table-column label="操作" width="210"> <template slot-scope="scope"> <el-button type="success">編輯 <i class="el-icon-edit"></i></el-button> <el-button type="danger">刪除 <i class="el-icon-remove-outline"></i></el-button> </template> </el-table-column> </el-table> <!-- 分頁 分頁資料和表格資料產生了聯動 前端傳的值： :current-page="pageNum" 頁碼 :page-size="pageSize" 每頁個數 後端傳的值： :total="total" 總條數 --> <div style="padding: 10px 0"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[ 2, 5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </el-main> </el-container> </el-container> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', data() { return { tableData: [], total: 0, // 分頁總條數 pageNum: 1, // 頁數 pageSize: 2, // 條數 username: "", // 查詢繫結username email: "", // 查詢繫結email address: "", // 查詢繫結address msg: 'Hello Word', collapseBtnClass: 'el-icon-s-fold', // 收縮圖示控制 預設展開 isCollapse: false, // 點選收縮圖示控制 預設是展開 false sideWidth: 200, // 導航欄寬度 動態 初始值是200 logoTextShow: true, // 預設是顯示的標題 當收縮是為false headerBg: "headerBg" } }, created() { this.findPage() }, methods: { collapse (){ // 點選收縮按鈕時會觸發按鈕 this.isCollapse = !this.isCollapse if (this.isCollapse) { // 收縮 this.sideWidth = 64 this.collapseBtnClass = 'el-icon-s-unfold' // 縮起圖示控制 this.logoTextShow = false // 收縮是不顯示文字 }else { // 展開 this.sideWidth = 200 this.collapseBtnClass = 'el-icon-s-fold' // 展開圖示控制 this.logoTextShow = true // 顯示文字 } }, handleSizeChange(pageSize) { console.log(`每頁 ${pageSize} 條`); // 傳給我們上面繫結的pageSize this.pageSize = pageSize // 請求資料，請求資料之後它會自動更新 pageSize this.findPage() }, handleCurrentChange(pageNum) { console.log(`當前頁: ${pageNum}`); // 傳給我們上面繫結的pageNum this.pageNum = pageNum // 請求資料，請求資料之後它會自動更新 tableData this.findPage() }, findPage() { // 請求分頁查詢資料 fetch api 有以下幾個引數，第一個引數是url // .then 返回一個res，之後對他進行一個json的處理，因為他返回的res是一個字串，需要把字串轉成json // 通過res.json()函式 這個方法，把他轉成json,再.then 這個res就是json型別的了 // 拼接url路徑使用es6的語法：`http://localhost:8081/user/findPage/${pageNum}` fetch("http://localhost:8081/user/findPage?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 // 查詢後清空查詢條件 this.username = "" this.email = "" this.address = "" }) } } } </script> <style> .home { height: 100%; } .el-menu-item,.el-menu-item-group, .el-submenu__title{ background-color: rgb(48, 65, 86); } </style>
後端程式碼
Controller層
@Autowired SysUserMapper userMapper; /** * @description: 分頁查詢 因為是查詢多條資料所以是list * @param: pageNum、pageSize * @return: java.util.Map<java.lang.String,java.lang.Object> * @author ls * @date: 2022/4/18 * 介面路徑 /user/findPage?pageNum=1 & pageSize=10 * @RequestParam 它接收 ?pageNum=1 & pageSize=10 這樣的資料 它會把url引數裡的pageNum和pageSize中的值(也就是1和10)對映到引數列表中去,這就是他的這個資料接收 * (pageNum - 1) * pageSize = limit 第一個引數 * pageSize 第二個引數 */ @GetMapping("/findPage") public Map<String , Object> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize){ // 第一個引數 pageNum pageNum = (pageNum - 1) * pageSize; List<SysUser> data = userMapper.findPage(pageNum, pageSize); // 因為不知道總條數 所以查詢出總條數 Integer total = userMapper.selectTotal(); // 封裝一個map Map<String , Object> res = new HashMap<>(); // 往map裡面存放資料 res.put("data", data); res.put("total", total); return res; }
Mapper層
/** * @description: 分頁查詢 因為是查詢多條資料所以是list * @param: pageNum、pageSize * @return: java.util.List<com.boot.springboot.entity.SysUser> * @author ls * @date: 2022/4/18 */ @Select("select * from sys_user limit #{pageNum}, #{pageSize}") List<SysUser> findPage(@Param("pageNum") Integer pageNum,@Param("pageSize") Integer pageSize); /** * @description: 因為不知道總條數 所以查詢出總條數 * @param: * @return: java.lang.Integer * @author ls * @date: 2022/4/18 */ @Select("select count(*) from sys_user") Integer selectTotal();
這裡省略了service和它的實現類