Vue+ElementUI+SpringMVC實現分頁
阿新 • • 發佈：2018-12-09
Vue + ElementUI + SpringMVC實現分頁
這一段時間寫專案用到了Vue+ElementUI，這裡記錄一下使用ElementUI內建分頁外掛結合後端SSM框架的實現思路和實現過程。
其中遇到了很多坑，我會盡量把見到的坑都記錄下來，希望對你有所幫助。
首先 讓我們看一下最終效果：
起步
本博文的主要講一下Vue+ElementUI結合後端SpringMVC實現分頁的實現思路，基本的elementUI用法請自行百度；
Vue的常用語法可以看我的 博文 。
關於SSM的整合教程可以看我的這篇 博文； GitHub。
介紹
本案例中設計到的技術棧：
ElementUI
Vue.js
vue-resource.js
SSM框架
PageHelper: Mybatis的分頁外掛
準備
1、SSM框架的整合教程可以參考我的這篇博文：手摸手帶你整合SSM框架; GitHub。
2、在後端專案中匯入PageHelper.jar的依賴
com.github.pagehelper
pagehelper
4.0.0
***注意 使用PageHelper分頁外掛除了要匯入依賴，還需要在Mybatis配置檔案中進行相關配置，並交給Spring進行管理。如下配置即可：
這裡還要注意的是PageHelper5.X版本和PageHelper4.X版本PageHelper類所在的包名是不同的。 在Spring配置檔案中掃描此配置檔案即可：
3、在HTML中匯入vue.js and element-ui 。
好的，至此，我們把基本的環境已經講過了，下面看下相關前端程式碼：