Vue+ElementUI+SpringMVC实现分页

Vue + ElementUI + SpringMVC实现分页

这一段时间写项目用到了Vue+ElementUI，这里记录一下使用ElementUI内置分页插件结合后端SSM框架的实现思路和实现过程。

其中遇到了很多坑，我会尽量把见到的坑都记录下来，希望对你有所帮助。

首先 让我们看一下最终效果：

起步

本博文的主要讲一下Vue+ElementUI结合后端SpringMVC实现分页的实现思路，基本的elementUI用法请自行百度；

介绍

本案例中设计到的技术栈：

• ElementUI

• Vue.js

• vue-resource.js

• SSM框架

• PageHelper: Mybatis的分页插件

准备

1、SSM框架的整合教程可以参考我的这篇博文：

2、在后端项目中导入PageHelper.jar的依赖

1 2 3 4 5

<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>4.0.0</version> </dependency>

*注意**
使用PageHelper分页插件除了要导入依赖，还需要在Mybatis配置文件中进行相关配置，并交给Spring进行管理。如下配置即可：

1 2 3 4 5 6 7

<plugins> <!-- com.github.pagehelper 为 PageHelper 类所在包名 --> <plugin interceptor="com.github.pagehelper.PageHelper"> <!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库--> <property name="dialect" value="mysql"/> </plugin> </plugins>

这里还要注意的是PageHelper5.X版本和PageHelper4.X版本PageHelper类所在的包名是不同的。
在Spring配置文件中扫描此配置文件即可：

3、在HTML中导入vue.js and element-ui 。

好的，至此，我们把基本的环境已经讲过了，下面看下相关前端代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<!-- 列表 --> <el-table ref="user" :data="user" tooltip-effect="dark" style="width: 100%"> <el-table-column prop="id" sortable label="编号" width="80"> </el-table-column> <el-table-column prop="username" sortable label="联系人" width="120"> </el-table-column> <el-table-column prop="phone" sortable label="联系电话" width="120"> </el-table-column> <el-table-column prop="mailbox" label="电子邮箱" width="150"> </el-table-column> <el-table-column prop="postalCode" sortable label="邮政编码" width="120"> </el-table-column> <el-table-column prop="date" sortable label="注册时间" width="200"> </el-table-column> <el-table-column prop="address" label="通讯地址" width="200" show-overflow-tooltip> </el-table-column> </el-table> <!-- 分页 --> <div class="pagination"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageConf.pageCode" :page-sizes="pageConf.pageOption" :page-size="pageConf.pageSize" layout="total, sizes, prev, pager, n