學習內(nèi)容來源：視頻P4
本篇文章進度接著之前的文章進行續(xù)寫
精簡前后端分離項目搭建
Vue基礎容器使用
選擇組件
在官方文檔中選擇現(xiàn)成的組件，放在頁面當中，比如是表格+分頁形式，需要將兩者包裹在一個大的div當中
修改表格組件
修改表格組件的數(shù)據(jù)顯示，以之前的圖書為例
修改tableData內(nèi)容
以及對應的標簽
即可顯示寫定的內(nèi)容
修改分頁組件
page-size用于規(guī)定每頁顯示條目
total規(guī)定總共的條目數(shù)量，頁面會自動根據(jù)這兩個值計算出總頁數(shù)
當前分頁組件點擊后并沒有什么反應，因為我們沒有對點擊事件進行操作
在標簽中給 current-change 綁定事件
即可在點擊頁碼時提示當前頁，說明我們能獲取到點擊頁碼的數(shù)據(jù)
增加后端接口
當前后端只有 findAll 的接口，如果想要請求特定頁碼的數(shù)據(jù)（比如第二頁3條數(shù)據(jù)）則不能滿足要求
原視頻是對原有的 findAll 接口進行修改，我保留了這個函數(shù)，新增一個函數(shù) findPart
BookRepository繼承的JPA接口中，有多個findAll() 的重載，其中有一個參數(shù)是Pageable
這個包下的Pageable
@GetMapping("/findPart/{page}/{size}")
public Page<Book> findPart(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
Pageable pageable = PageRequest.of(page-1,size);//page下標從0開始計數(shù)，故-1
return bookRepository.findAll(pageable);
}
這樣就可以通過請求地址獲取想要請求的信息，再進行查詢并且返回想要的數(shù)據(jù)
地址欄輸入即可返回需要的數(shù)據(jù)
前端請求數(shù)據(jù)接口
在vue項目中安裝 axios 插件，其封裝了Ajax，發(fā)送異步請求
頁面初始化請求數(shù)據(jù)
安裝成功后，在頁面創(chuàng)建初始化函數(shù)，進行請求，地址就是剛才測試的地址
created(){
axios.get("http://localhost:8181/book/findPart/1/3").then(function (resp) {
console.log(resp);
})
},
在控制臺即可看到返回的數(shù)據(jù)
證明數(shù)據(jù)以已經(jīng)成功調(diào)用到前端，此時我們需要將后端取到的數(shù)據(jù)覆蓋到 tableData 中。在data中創(chuàng)建一個total變量，并且將標簽中的 total 值綁定，原來的 dataTable 中的數(shù)據(jù)也可以刪除，此時已經(jīng)有數(shù)據(jù)庫的數(shù)據(jù)來覆蓋了。
點擊頁碼請求數(shù)據(jù)
回到之前創(chuàng)建的 page 函數(shù)
將初始化的請求函數(shù)復用一次，不過頁碼使用獲取到的頁碼數(shù)
即可實現(xiàn)動態(tài)查詢頁碼內(nèi)容
文章來源：http://www.zghlxwxcb.cn/news/detail-810147.html
下一回文章來源地址http://www.zghlxwxcb.cn/news/detail-810147.html
到了這里，關(guān)于使用Element-UI展示數(shù)據(jù)（動態(tài)查詢）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
