基于ssm框架进行分页显示。数据库mysql、前端Easy_UI框架。 参考资源:基于ssm框架下的分页显示。
在大量数据的查询下,我们需要使用到分页查询。
创建数据库page及表product_info
CREATE DATABASE IF NOT EXISTS page ; /*创建商品表*/ USE `page`; DROP TABLE IF EXISTS `product_info`; CREATE TABLE `product_info`( `id` INT(4) NOT NULL AUTO_INCREMENT, `code` VARCHAR(16) DEFAULT NULL COMMENT '商品编号', `name` VARCHAR(255) DEFAULT NULL COMMENT '商品名称', `tid` INT(4) DEFAULT NULL COMMENT '商品类别', `num` INT(4) UNSIGNED ZEROFILL DEFAULT NULL COMMENT '商品库存', `status` INT(4) DEFAULT '1' COMMENT '商品状态', `price` INT(6) DEFAULT NULL COMMENT '价格', PRIMARY KEY (`id`) )ENGINE=INNODB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;插入的数据可以下载参考资源,在src/main/resource/page.sql中 数据库设计完成后需要在项目中配置连接文件,在下面项目中配置dbcnfig.properties
jdbc.jdbcUrl=jdbc:mysql://localhost:3306/page jdbc.driverClass=com.mysql.jdbc.Driver jdbc.user=root jdbc.password=pass2.1 新建maven项目pagetest 2.2 配置xml文件 有web,xml,springmvc配置,spring配置
2.2.1 web.xml配置 在 src/main/webapp/WEB-INF 下配置 配置启动spring的容器 applicationContext.xml即是spring的配置文件
<!--1、启动Spring的容器 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param><listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener>配置springmvc的前段控制器,用于拦截所有请求
<!--2、springmvc的前端控制器,拦截所有请求 --> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>注:还有字符编码配置,URI转换配置,这里省略,详见附件。
2.2.2 springmvc的配置文件dispatcherServlet-servlet.xml 在src/main/webapp/WEB-INF下配置dispatcherServlet-servlet.xml
<!--SpringMVC的配置文件,包含网站跳转逻辑的控制,配置 --> <!-- 启动注解扫描的功能 --> <context:component-scan base-package="com.pagetest" use-default-filters="false"> <!--为了避免重复,只扫描控制器controller --> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /> </context:component-scan> <!--配置视图解析器,页面返回 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> --> <property name="prefix" value="/" /> <property name="suffix" value=".jsp" /> </bean>2.2.3 spring的配置文件applicationContext.xml 在src/main/resource下配置applicationContext.xml
<!-- 自动扫描 --> <context:component-scan base-package="com.pagetest"> <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller" /> </context:component-scan> <!-- Spring的配置文件,这里主要配置和业务逻辑有关的 --> <!--=================== 数据源,事务控制 ================--> <context:property-placeholder location="classpath:dbconfig.properties" /> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <property name="jdbcUrl" value="${jdbc.jdbcUrl}"></property> <property name="driverClass" value="${jdbc.driverClass}"></property> <property name="user" value="${jdbc.user}"></property> <property name="password" value="${jdbc.password}"></property> </bean> <!-- 配置SqlSessionFactoryBean --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> </bean> <!-- 配置MapperScannerConfigurer,DAO接口所在包名,Spring会自动查找其下的类 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.pagetest.dao" /> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property> </bean> <!-- 配置DataSourceTransactionManager(事务管理) --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource" /> </bean> <!-- 启用基于注解的声明式事务管理配置 --> <tx:annotation-driven transaction-manager="transactionManager" />最后完成的目录结构如下:
2.3 设计数据访问,控制层 2.3.1 创建实体类 com.pagetest.pojo.ProductInfo
package com.pagetest.pojo; public class ProductInfo { // 商品基本信息 private int id; // 商品编号 private String code; // 商品编码 private String name; // 商品名称 private String type; // 商品类型 private int num; // 商品数量 private double price; // 商品价格 private int status; // 商品状态 //省略get,set方法 }创建实体类Pager用于存放分页信息。 com.pagetest.pojo.Pager
package com.pagetest.pojo; public class Pager { private int curPage;// 待显示页 private int perPageRows;// 每页显示的记录数 private int rowCount; // 记录总数 //省略get set方法 // 根据rowCount和perPageRows计算总页数 public int getPageCount() { return (rowCount + perPageRows - 1) / perPageRows; } // 分页显示时,获取当前页的第一条记录的索引 public int getFirstLimitParam() { return (this.curPage - 1) * this.perPageRows; }}2.3.2 创建数据访问层
创建接口package com.pagetest.dao.ProductInfoDao,用于访问数据层 其中@SelectProvider(type = ProductInfoDynaSqlProvider.class, method = “selectWithParam”)调用ProductInfoDynaSqlProvider.java中的selectWithParam方法
package com.pagetest.dao; public interface ProductInfoDao { // 分页获取商品 @Results({ @Result(id = true, column = "id", property = "id"), @Result(column = "code", property = "code"), @Result(column = "name", property = "name"), @Result(column = "pic", property = "pic"), @Result(column = "num", property = "num"), @Result(column = "price", property = "price"), @Result(column = "status", property = "status"), @Result(column = "tid", property = "type")}) @SelectProvider(type = ProductInfoDynaSqlProvider.class, method = "selectWithParam") List<ProductInfo> selectByPage(Map<String, Object> params); // 根据条件查询商品总数 @SelectProvider(type = ProductInfoDynaSqlProvider.class, method = "count") Integer count(Map<String, Object> params); }com.pagetest.dao.provider.ProductInfoDynaSqlProvider方法如下:
package com.pagetest.dao.provider; public class ProductInfoDynaSqlProvider { // 分页动态查询 public String selectWithParam(Map<String, Object> params) { String sql = new SQL() { { SELECT("*"); FROM("product_info"); }}.toString(); if (params.get("pager") != null) { sql += " limit #{pager.firstLimitParam} , #{pager.perPageRows}";} return sql; } //查询商品总记录数 public String count(Map<String, Object> params) { return new SQL() { { SELECT("count(*)"); FROM("product_info"); }}.toString(); }}2.3.3 创建业务逻辑层 业务逻辑层用于调用数据访问层的接口
package com.pagetest.service; public interface ProductInfoService { // 分页显示商品 List<ProductInfo> findProductInfo(ProductInfo productInfo, Pager pager); // 商品计数 Integer count(Map<String, Object> params); }com.pagetest.service.impl.ProductInfoServiceImpl 实现了ProductInfoService中的方法, 通过return productInfoDao.selectByPage(params);实现了数据访问,并将结果返回。
package com.pagetest.service.impl; @Service("productInfoService") @Transactional(propagation = Propagation.REQUIRED, isolation = Isolation.DEFAULT) public class ProductInfoServiceImpl implements ProductInfoService { @Autowired ProductInfoDao productInfoDao; @Override public List<ProductInfo> findProductInfo(ProductInfo productInfo, Pager pager) { // 创建对象params Map<String, Object> params = new HashMap<String, Object>(); // 将封装有查询条件的productInfo对象放入params params.put("productInfo", productInfo); // 根据条件计算商品总数 int recordCount = productInfoDao.count(params); // 给pager对象设置rowCount属性值(记录总数) pager.setRowCount(recordCount); if (recordCount > 0) { // 将page对象放入params params.put("pager", pager); } // 分页获取商品信息 return productInfoDao.selectByPage(params); } @Override public Integer count(Map<String, Object> params) { return productInfoDao.count(params); } }2.3.4 控制器设计 控制器是连接表示层和后端的核心。 创建包com.pagetest.controller。创建类ProductInfoController用于接收URI请求 设计的请求为 /productinfo/list
package com.pagetest.controller; @Controller @RequestMapping("/productinfo") public class ProductInfoController { @Autowired ProductInfoService productInfoService; // 后台商品列表分页显示 @RequestMapping(value = "/list") @ResponseBody public Map<String, Object> list(Integer page, Integer rows, ProductInfo productInfo) { // 初始化分页类对象pager Pager pager = new Pager(); pager.setCurPage(page); pager.setPerPageRows(rows); // 创建params对象,封装查询条件 Map<String, Object> params = new HashMap<String, Object>(); params.put("productInfo", productInfo); int totalCount = productInfoService.count(params);// 获取满足条件的商品总数 // 获取满足条件的商品列表 List<ProductInfo> productinfos = productInfoService.findProductInfo(productInfo, pager); // 创建result对象,保存查询结果数据 Map<String, Object> result = new HashMap<String, Object>(2); result.put("total", totalCount); result.put("rows", productinfos); // 将结果以JSON格式发送到前端控制器 return result; } }最后的目录结构展示如下:
3.1 添加easyUI的文件 将easyUI的依赖添加到src/main/webapp中 3.2 新建admin.jsp,引入esayUI的依赖,并在region:'center’中调用productlist.jsp
<html> <head> <title>商品展示</title> <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="EasyUI/demo.css" rel="stylesheet" type="text/css" /> <script src="EasyUI/jquery.min.js" type="text/javascript"></script> <script src="EasyUI/jquery.easyui.min.js" type="text/javascript"></script> <script src="EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script> </head> <body class="easyui-layout"> <div data-options="region:'center'"> <jsp:include page="productlist.jsp" /> </div> </body> </html>3.3 设计productinfo.jsp
展示的效果 body中的内容涉及如下: **url : ‘productinfo/list’, //为datagrid设置数据源用于向控制器申请数据
<body> <!-- 定义table, 用于创建easy ui的datagrid控件 --> <table id="dg_productinfo" class="easyui-datagrid"></table> <script type="text/javascript"> $(function() { $('#dg_productinfo').datagrid({ singleSelect : false, //设置datagrid为单选 url : 'productinfo/list', //为datagrid设置数据源 pagination : true, //启用分页 pageSize : 10, //设置初始每页记录数(页大小) pageList : [ 10, 15, 20 ], //设置可供选择的页大小 rownumbers : true, //显示行号 fit : true, //设置自适应 toolbar : '#tb_productinfo', //为datagrid添加工具栏 header : '#searchtb_productinfo', //为datagrid标头添加搜索栏 columns : [ [ { //编辑datagrid的列 title : '序号', field : 'id',align : 'center',checkbox : true }, {field : 'name', title : '商品名称', width : 120 }, {field : 'type', title : '商品类型', width : 60 }, {field : 'status',title : '商品状态', formatter : function(value, row, index) { if (row.status == 1) { return "在售";} else {return "下架"; } },width : 60 }, {field : 'code', title : '商品编码',width : 60 }, {field : 'price',title : '价格', width : 50 }, {field : 'num',title : '库存',width : 50 } ] ] }); }); </script> </body>分页显示,是ssm设计中的重要一块。在大量数据展示的时候有重要作用。