简单SSM框架+vue前后端分离 分页插件 pagehelper使用案例

废话不多说了 直接干

项目结构

使用教程

1 首先maven添加插件依赖：

 <!-- 分页助手 -->
      <dependency>
          <groupId>com.github.pagehelper</groupId>
          <artifactId>pagehelper</artifactId>
          <version> 5.3.1</version>
      </dependency>
      <dependency>
          <groupId>com.github.jsqlparser</groupId>
          <artifactId>jsqlparser</artifactId>
          <version>3.1</version>
      </dependency>

2,ssm框架核心配置文件 添加插件配置信息
 

<property name="plugins">
            <!-- 配置插件数组 -->
            <array>
                <!-- 配置PageInterceptor插件 -->
                <bean class="com.github.pagehelper.PageInterceptor">
                    <!-- 配置插件属性 -->
                    <property name="properties">
                        <!-- 配置插件属性值 -->
                        <value>
                            <!-- 设置数据库方言为mysql -->
                            helperDialect=mysql
                            <!-- 设置合理化查询 -->
                            reasonable=true
                            <!-- 设置当pageSize=0时查询全部结果 -->
                            pageSizeZero=true
                        </value>
                    </property>
                </bean>
            </array>
        </property>

位置：

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
内

3 改造原有查询方法 重点！

Mapper 层：

注意 ：使用Page泛型返回数据

Service 接口层：

Service 实现层：

Controller层：

controller层重点！

4 前端改造过程

创造

 前端是vue脚手架项目 我们可以脚手架安装Element ui 使用element ui 即可

选择这个样式

粘贴到代码中

相关变量
图中错了 忘了赋初始值了 不赋值 vue会报错 但是不影响使用
 pageSize 是默认10条数据

随便设置几个数就行 后面会再次赋新值 不影响

方法的改造

方法写到 method：{ }  中

调用方法时候会返回 val 值 将val 值赋值给相应的变量即可

然后在赋值给tabledata 显示出来就行了；

5 成果展示

 自己研究出来的 有优化在评论去提出来 谢谢