当前位置:Gxlcms > 数据库问题 > Spring+MyBatis+SpringMvc+Mysql+Druid+PageHelper分页实现

Spring+MyBatis+SpringMvc+Mysql+Druid+PageHelper分页实现

时间:2021-07-01 10:21:17 帮助过:26人阅读

我是阿福,公众号「阿福聊编程」作者,一个在后端技术路上摸盘滚打的程序员,在进阶的路上,共勉!文章已收录在 JavaSharing 中,包含Java技术文章,面试指南,资源分享。

思路分析

技术图片

MyBatis的PageHelper插件(后台)

作用

以完全非侵入的方式在原有查询基础上附加分页效果。从SQL层面来说,在SQL语句后面附加LIMIT子句。从Java代码来说,把原来返回的List类型封装为Page类型。

依赖信息

  1. <code class="language-java"><!-- MyBatis分页插件 -->
  2. <dependency>
  3. <groupId>com.github.pagehelper</groupId>
  4. <artifactId>pagehelper</artifactId>
  5. <version>4.0.0</version>
  6. </dependency>
  7. </code>

配置方式

那么如何让插件起作用呢?就需要在SqlSessionFactoryBean中配置MyBatis插件

  1. <code class="language-java"><!--配置SqlSessionFactoryBean-->
  2. <bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
  3. <!--装配数据源-->
  4. <property name="dataSource" ref="dataSource"></property>
  5. <!--mybatis配置文件所在的位置-->
  6. <property name="configLocation" value="classpath:/mybstis/mybatis-config.xml"></property>
  7. <!--配置mapper所在的文件位置-->
  8. <property name="mapperLocations" value="classpath:/mybstis/mapper/*Mapper.xml"></property>
  9. <property name="plugins">
  10. <array>
  11. <bean class="com.github.pagehelper.PageHelper">
  12. <!-- 配置插件属性 -->
  13. <property name="properties">
  14. <props>
  15. <!-- 配置数据库方言 -->
  16. <!-- MySQL分页:LIMIT -->
  17. <!-- Oracle分页:TopN分析 -->
  18. <prop key="dialect">mysql</prop>
  19. <!-- 配置自动修正页码 -->
  20. <!-- pageNo的有效范围:1~总页数 -->
  21. <prop key="reasonable">true</prop>
  22. </props>
  23. </property>
  24. </bean>
  25. </array>
  26. </property>
  27. </bean>
  28. </code>

数据库的Sql 脚本

  1. <code class="language-sql">SELECT
  2. *
  3. FROM
  4. t_admin
  5. WHERE
  6. loginacct LIKE CONCAT(‘%‘,‘ad‘,‘%‘)
  7. OR username LIKE CONCAT(‘%‘,‘ad‘,‘%‘)
  8. OR email LIKE CONCAT(‘%‘,‘ad‘,‘%‘)
  9. </code>

AdminMapper配置文件

  1. <code class="language-xml"><resultMap id="BaseResultMap" type="com.zfcoding.model.AdminBean" >
  2. <id column="id" property="id" jdbcType="INTEGER" />
  3. <result column="loginacct" property="loginAcct" jdbcType="VARCHAR" />
  4. <result column="userpswd" property="userPswd" jdbcType="CHAR" />
  5. <result column="username" property="userName" jdbcType="VARCHAR" />
  6. <result column="email" property="email" jdbcType="VARCHAR" />
  7. <result column="createtime" property="createTime" jdbcType="CHAR" />
  8. </resultMap>
  9. <sql id="Base_Column_List" >
  10. id, loginacct, userpswd, username, email, createtime
  11. </sql>
  12. <select id="queryAdminByKeyWord" parameterType="java.lang.String" resultMap="BaseResultMap">
  13. SELECT
  14. <include refid="Base_Column_List"/>
  15. FROM
  16. t_admin
  17. WHERE
  18. loginacct LIKE CONCAT(‘%‘,#{keyword},‘%‘)
  19. OR username LIKE CONCAT(‘%‘,#{keyword},‘%‘)
  20. OR email LIKE CONCAT(‘%‘,#{keyword},‘%‘)
  21. </select>
  22. </code>

Mapper接口

  1. <code class="language-java">List<AdminBean> queryAdminByKeyWord(@Param("keyword") String keyword);
  2. </code>

AdminServiceImpl

  1. <code class="language-java">public PageInfo<AdminBean> queryForKeywordSearch(int pageNum, int pageSize, String keyword) {
  2. //调用PageHelper的工具方法,开启分页功能
  3. PageHelper.startPage(pageNum, pageSize);
  4. List<AdminBean> adminBeans = adminMapper.queryAdminByKeyWord(keyword);
  5. //执行分页查询
  6. return new PageInfo<AdminBean>(adminBeans);
  7. }
  8. </code>

AdminController

  1. <code class="language-java">@RequestMapping("/queryAdmin")
  2. public String queryAdminByKeyword(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
  3. @RequestParam(value = "pageSize", defaultValue = "5") int pageSize,
  4. @RequestParam(value = "keyword", defaultValue = "") String keyword,
  5. Model model) {
  6. PageInfo<AdminBean> adminBeanPageInfo = adminService.queryForKeywordSearch(pageNum, pageSize, keyword);
  7. model.addAttribute(CrowdFundingConstant.ATTR_NAME_PAGE_INFO, adminBeanPageInfo);
  8. return "admin/admin-page";
  9. }
  10. </code>

常量类

  1. <code class="language-java">public class CrowdFundingConstant {
  2. public static final String ATTR_NAME_PAGE_INFO="PAGEINFO-ADMIN";
  3. }
  4. </code>

到这里后台的功能都实现完了,下面来实现前台的功能。

页面显示 主体部分(前台)

前台页面

  1. <code class="language-html"><table class="table table-bordered">
  2. <thead>
  3. <tr>
  4. <th width="30">#</th>
  5. <th width="30"><input id="summaryBox" type="checkbox"></th>
  6. <th>账号</th>
  7. <th>名称</th>
  8. <th>邮箱地址</th>
  9. <th width="100">操作</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <c:if test="${empty requestScope[‘PAGEINFO-ADMIN‘].list}">
  14. <tr>
  15. <td style="text-align: center" colspan="6">抱歉,没有用户查询的数据!!!!</td>
  16. </tr>
  17. </c:if>
  18. <c:if test="${! empty requestScope[‘PAGEINFO-ADMIN‘].list}">
  19. <c:forEach items="${requestScope[‘PAGEINFO-ADMIN‘].list}" var="item"
  20. varStatus="myStatus">
  21. <tr>
  22. <td>${myStatus.count}</td>
  23. <th width="30"><input class="itemBox" type="checkbox"></th>
  24. <td>${item.loginAcct}</td>
  25. <td>${item.userName}</td>
  26. <td>${item.email}</td>
  27. <td>
  28. <button type="button" class="btn btn-success btn-xs"><i
  29. class=" glyphicon glyphicon-check"></i></button>
  30. <button type="button" class="btn btn-danger btn-xs uniqueRemoveBtn"><i
  31. class=" glyphicon glyphicon-remove"></i></button>
  32. </td>
  33. </tr>
  34. </c:forEach>
  35. </c:if>
  36. </tbody>
  37. <tfoot>
  38. <tr>
  39. <td colspan="6" align="center">
  40. <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
  41. </td>
  42. </tr>
  43. </tfoot>
  44. </table>
  45. </code>

页面导航条部分的实现

使用一个基于jQuery的分页插件:Pagination

环境搭建

加入样式文件,pagination.css引入工程,在需要的页面引用pagination.css

  1. <code class="language-html"><link rel="stylesheet" href="css/pagination.css"/>
  2. </code>

加入Pagination的js文件,在需要的页面引用jquery.pagination.js,这里要注意一下,需要把源码文件中 这段代码注释掉:opts.callback(current_page, this); 因为在这个地方重新加载页面,会造成死循环。

  1. <code class="language-html"> <script type="text/javascript" src="script/jquery.pagination.js"></script>
  2. </code>

分页导航条需要在HTML标签中加入的部分

  1. <code class="language-html"> <tr>
  2. <td colspan="6" align="center">
  3. <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
  4. </td>
  5. </tr>
  6. </code>

jQuery代

  1. <code class="language-javascript">// 声明函数封装导航条初始化操作
  2. function initPagination() {
  3. // 声明变量存储总记录数
  4. var totalRecord = ${requestScope[‘PAGEINFO-ADMIN‘].total};
  5. // 声明变量存储分页导航条显示时的属性设置
  6. var paginationProperties = {
  7. num_edge_entries: 3,
  8. //边缘页数
  9. num_display_entries: 5,
  10. //主体页数
  11. callback: pageselectCallback,
  12. //回调函数
  13. items_per_page: ${requestScope[‘PAGEINFO-ADMIN‘].pageSize},
  14. //每页显示数据数量,就是pageSize
  15. current_page: ${requestScope[‘PAGEINFO-ADMIN‘].pageNum - 1},//当前页页码
  16. prev_text: "上一页",
  17. //上一页文本
  18. next_text: "下一页"
  19. //下一页文本
  20. };
  21. // 显示分页导航条
  22. $("#Pagination").pagination(totalRecord, paginationProperties);
  23. };
  24. // 在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
  25. function pageselectCallback(pageIndex, jq) {
  26. // pageIndex从0开始,pageNum从1开始
  27. var pageNum = pageIndex + 1;
  28. // 跳转页面
  29. window.location.href = "admin/queryAdmin.action?pageNum=" + pageNum + "&keyword=${param.keyword}";
  30. return false;
  31. };
  32. </code>

关键词查询

  1. <code class="language-html"><form class="form-inline" action="/admin/queryAdmin.action" method="post" role="form"
  2. style="float:left;">
  3. <div class="form-group has-feedback">
  4. <div class="input-group">
  5. <div class="input-group-addon">查询条件</div>
  6. <input class="form-control has-success" name="keyword" type="text"
  7. placeholder="请输入查询条件">
  8. </div>
  9. </div>
  10. <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
  11. </button>
  12. </form>
  13. </code>

点击查询的按钮就可以实现分页查询的功能了。

源码下载

技术图片

Spring+MyBatis+SpringMvc+Mysql+Druid+PageHelper分页实现

标签:integer   trie   功能   一个   inf   mapping   record   column   artifact   

人气教程排行