vue+elementUi+axios實現分頁

注：此項目 前端為 html、 后端采用 mybatis、servlet實現

1.代碼實現

【HTML】

1.在html部分編寫表格：

<div id="Max"><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="16"><div class="grid-content bg-purple-light"><div id="xuanran"><template><el-table:data="newMsg"style="width: 100%"><el-table-columnlabel="學號"width="180"><template slot-scope="scope"><el-checkbox @change="DuoAdd(scope.row.id)">{{ scope.row.id }}</el-checkbox></template></el-table-column><el-table-columnlabel="姓名"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.name }}</span></template></el-table-column><el-table-columnlabel="工作"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.job }}</span></template></el-table-column><el-table-columnlabel="薪資"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.salary}}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"type="success" plain@click="SelectOne(scope.row.id);dialogFormVisible1 = true;"><iclass="el-icon-upload"></i>更新</el-button><el-button size="mini"type="danger" plain@click="DeleteDate(scope.row.id)"><i class="el-icon-delete-solid"></i>刪除</el-button></template></el-table-column></el-table></template><!-- 分頁組件 --><div class="pagination-container"><el-paginationsmalllayout="prev, pager, next":total="total":current-page="currentPage":page-size="pageSize"@current-change="handlePageChange"></el-pagination></div></div></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col></el-row></div>

2.在new Vue的data中加入分頁所需要的屬性：

total: 0, // 總數據量
currentPage: 1, // 當前頁碼
pageSize: 9 ,// 每頁顯示數量

3.在**method**部分編寫分頁實現方法：

//渲染數據
GetDate() {const start = (this.currentPage - 1) * this.pageSize;const loading = this.$loading({lock: true,text: '玩命加載中....',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});axios.get('/VueProject2_war_exploded/MyServlet?method=queryRecord',{params: {page: start,pageSize: this.pageSize}}).then(response => {loading.close();this.newMsg = response.data.list;this.total = response.data.total;}).catch(err => {console.log(err);});
},
// 處理頁碼變化
handlePageChange(newPage) {this.currentPage = newPage;this.GetDate();
},

【Servlet層】

/*** 分頁** @param req* @param resp* @throws Exception*/
public void queryRecord(ServletRequest req, ServletResponse resp) throws Exception {req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();int start = Integer.parseInt(req.getParameter("page"));int pageSize = Integer.parseInt(req.getParameter("pageSize"));MyService myService = new MyService();PageResult pageResult = myService.queryRecordFenye(start, pageSize);String s = JSON.toJSONString(pageResult);//集合轉換成json字符串準備傳回前端;writer.write(s);writer.flush();writer.close();
}

【Service層】

/*** 分頁* @param start* @param pageSize* @return*/
public PageResult queryRecordFenye(int start, int pageSize) {SqlSession gc = GC();EmpDao mapper = gc.getMapper(EmpDao.class);List<Emp> list = new ArrayList<>();int total ;List<Emp> emps = mapper.selectAll();total = emps.size();List<Emp> emps1 = mapper.queryRecord(start, pageSize);list.addAll(emps1);return new PageResult(total, list);
}

【Dao層】

@Select("select * from emp limit #{start},#{pageSize}")
/*** 分頁查詢*/
List<Emp> queryRecord(@Param("start") int start, @Param("pageSize") int pageSize);

2.總結步驟

1. 前端添加分頁組件，綁定相關變量和事件。
2. 前端調整數據獲取方法，傳遞分頁參數，處理分頁數據。
3. 后端提供分頁接口和總記錄數接口。

這樣，用戶的分頁功能就能正常工作了。

3.實現要點

• 使用el-pagination組件實現分頁效果
• 通過axios發送GET請求獲取分頁數據
• 頁碼變化時自動重新加載數據
• 需要計算start參數（(當前頁-1)*每頁數量）
• 需要同時執行兩個SQL查詢：獲取總數和獲取分頁數據
• 返回包含總數和分頁數據的復合對象
• 注意數據庫字段名與實體類屬性的對應關系

4.注意事項

• 確保后端接口地址正確（示例中使用的是/VueProject2_war_exploded/）
• 需要添加JSON序列化支持（如Jackson）
• 頁碼變化時自動重新加載數據
• 需要計算start參數（(當前頁-1)*每頁數量）
• 需要同時執行兩個SQL查詢：獲取總數和獲取分頁數據
• 返回包含總數和分頁數據的復合對象
• 注意數據庫字段名與實體類屬性的對應關系

4.注意事項

• 確保后端接口地址正確（示例中使用的是/VueProject2_war_exploded/）
• 需要添加JSON序列化支持（如Jackson）
• 處理跨域問題（如果前后端分離部署）