碼上快樂

相關內容    簡體    繁體

Spring+Mybatis+SpringMVC后台與前台分頁展示實例（附工程）（轉）

本文轉載自   查看原文   2016-03-13 13:55   1612 

   林炳文Evankaka原創作品。轉載請注明出處http://blog.csdn.net/evankaka

       摘要：本文實現了一個后台由Spring+Mybatis+SpringMVC組成，分頁采用PageHelper，前台展示使用bootstrap-paginator來顯示效果的分頁實例。整個項目由maven構成。這里主要講了分頁的實例，框架怎么搭建就不再說明，主要是在這里的基礎上來增加分頁功能的。注意，此文是在這個基礎 Spring+Mybatis+SpringMVC+Maven+MySql搭建實例 之上來做分頁的，建議文中看不懂的配置可以看看這里。

整個工程下載

最后的結果如下：

環境：jdk1.6

         Tomcat 7.0

         Eclipse luna/windows 7    

一、后台PageHelper使用

PageHelper:https://github.com/pagehelper/Mybatis-PageHelper

1、引入jar包

 

[html]  view plain  copy
 
  1. <!-- 添加分布插件的包pagehelper -->  
  2. <dependency>  
  3.     <groupId>com.github.pagehelper</groupId>  
  4.     <artifactId>pagehelper</artifactId>  
  5.     <version>4.0.0</version>  
  6. </dependency>  


2.mybatis-config.xml中添加插件

 

 

[html]  view plain  copy
 
  1. <plugins>  
  2.     <!-- com.github.pagehelper為PageHelper類所在包名 -->  
  3.     <plugin interceptor="com.github.pagehelper.PageHelper">  
  4.         <property name="dialect" value="mysql"/>  
  5.         <!-- 該參數默認為false -->  
  6.         <!-- 設置為true時，會將RowBounds第一個參數offset當成pageNum頁碼使用 -->  
  7.         <!-- 和startPage中的pageNum效果一樣-->  
  8.         <property name="offsetAsPageNum" value="true"/>  
  9.         <!-- 該參數默認為false -->  
  10.         <!-- 設置為true時，使用RowBounds分頁會進行count查詢 -->  
  11.         <property name="rowBoundsWithCount" value="true"/>  
  12.         <!-- 設置為true時，如果pageSize=0或者RowBounds.limit = 0就會查詢出全部的結果 -->  
  13.         <!-- （相當於沒有執行分頁查詢，但是返回結果仍然是Page類型）-->  
  14.         <property name="pageSizeZero" value="true"/>  
  15.         <!-- 3.3.0版本可用 - 分頁參數合理化，默認false禁用 -->  
  16.         <!-- 啟用合理化時，如果pageNum<1會查詢第一頁，如果pageNum>pages會查詢最后一頁 -->  
  17.         <!-- 禁用合理化時，如果pageNum<1或pageNum>pages會返回空數據 -->  
  18.         <property name="reasonable" value="false"/>  
  19.         <!-- 3.5.0版本可用 - 為了支持startPage(Object params)方法 -->  
  20.         <!-- 增加了一個`params`參數來配置參數映射，用於從Map或ServletRequest中取值 -->  
  21.         <!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,不配置映射的用默認值 -->  
  22.         <!-- 不理解該含義的前提下，不要隨便復制該配置 -->  
  23.         <property name="params" value="pageNum=start;pageSize=limit;"/>  
  24.     </plugin>  
  25. </plugins>  

這樣子就引入進來了，接下來就是來開始分頁功能的實現

 

3、mapper文件中添加如下一個方法：

 

[html]  view plain  copy
 
  1. <select id="selectUserByUserName" parameterType="java.lang.String" resultMap="BaseResultMap">  
  2.     SELECT *  
  3.     FROM t_user  
  4.     WHERE 1 = 1  
  5.     <if test="userName != null and userName !=''">  
  6.         AND USER_NAME = #{userName,jdbcType=VARCHAR}  
  7.     </if>  
  8.     ORDER BY USER_ID  
  9. </select>  


注意，這里的返回其實是一個list

[html]  view plain  copy
 
  1. <!--設置domain類和數據庫中表的字段一一對應，注意數據庫字段和domain類中的字段名稱不致，此處一定要！ -->  
  2. <resultMap id="BaseResultMap" type="com.lin.domain.User">  
  3.     <id column="USER_ID" property="userId" jdbcType="INTEGER" />  
  4.     <result column="USER_NAME" property="userName" jdbcType="CHAR" />  
  5.     <result column="USER_PASSWORD" property="userPassword" jdbcType="CHAR" />  
  6.     <result column="USER_EMAIL" property="userEmail" jdbcType="CHAR" />  
  7. </resultMap>  


4、然后就是dao類

 

 

[html]  view plain  copy
 
  1. /**  
  2.  *   
  3.  * @author linbingwen  
  4.  * @since  2015年10月22日   
  5.  * @param userName  
  6.  * @return  
  7.  */  
  8. List<User> selectUserByUserName(@Param("userName") String userName);  


這里一定的記得加@Param("userName")

 

接下來就可以在service層中添加分頁查詢的的接口了

5、接口類

 

[html]  view plain  copy
 
  1. /**  
  2.  *   
  3.  * @author linbingwen  
  4.  * @since  2015年10月23日   
  5.  * @param userName 查詢條件，可為空  
  6.  * @param pageNo 查詢條件，可為空，默認取1  
  7.  * @param pageSize 查詢條件，可為空，默認取10  
  8.  * @return  
  9.  */  
  10. PagedResult<User> queryByPage(String userName,Integer pageNo,Integer pageSize);  

6、實現類

 

 

[html]  view plain  copy
 
  1. public PagedResult<User> queryByPage(String userName,Integer pageNo,Integer pageSize ) {  
  2.     pageNo = pageNo == null?1:pageNo;  
  3.     pageSize = pageSize == null?10:pageSize;  
  4.     PageHelper.startPage(pageNo,pageSize);  //startPage是告訴攔截器說我要開始分頁了。分頁參數是這兩個。  
  5.     return BeanUtil.toPagedResult(userDao.selectUserByUserName(userName));  
  6. }  

這里就可以直接在返回里頭使用了PageHelper，這里userDao.selectUserByUserName(userName)的返回是一個list

 

其中，PagedResult是我自己封裝的一個分頁結果類

 

[java]  view plain  copy
 
  1. package com.lin.util;  
  2.   
  3. import java.util.List;  
  4.   
  5. import com.lin.dto.BaseEntity;  
  6.   
  7. /** 
  8.  * 功能概要： 
  9.  *  
  10.  * @author linbingwen 
  11.  * @since  2015年10月23日  
  12.  */  
  13. public class PagedResult<T> extends BaseEntity {  
  14.       
  15.     /*serialVersionUID*/  
  16.     private static final long serialVersionUID = 1L;  
  17.   
  18.     private List<T> dataList;//數據  
  19.       
  20.     private long pageNo;//當前頁  
  21.       
  22.     private long pageSize;//條數  
  23.       
  24.     private long total;//總條數  
  25.       
  26.     private long pages;//總頁面數目  
  27.   
  28.     public List<T> getDataList() {  
  29.         return dataList;  
  30.     }  
  31.   
  32.     public void setDataList(List<T> dataList) {  
  33.         this.dataList = dataList;  
  34.     }  
  35.   
  36.     public long getPageNo() {  
  37.         return pageNo;  
  38.     }  
  39.   
  40.     public void setPageNo(long pageNo) {  
  41.         this.pageNo = pageNo;  
  42.     }  
  43.   
  44.     public long getPageSize() {  
  45.         return pageSize;  
  46.     }  
  47.   
  48.     public void setPageSize(long pageSize) {  
  49.         this.pageSize = pageSize;  
  50.     }  
  51.   
  52.     public long getTotal() {  
  53.         return total;  
  54.     }  
  55.   
  56.     public void setTotal(long total) {  
  57.         this.total = total;  
  58.     }  
  59.   
  60.     public long getPages() {  
  61.         return pages;  
  62.     }  
  63.   
  64.     public void setPages(long pages) {  
  65.         this.pages = pages;  
  66.     }  
  67.       
  68. }  

這是它的基類

 

 

[html]  view plain  copy
 
  1. package com.lin.dto;  
  2.   
  3. import java.io.Serializable;  
  4. import java.lang.reflect.Method;  
  5. import java.lang.reflect.Modifier;  
  6. import java.util.ArrayList;  
  7. import java.util.HashMap;  
  8. import java.util.List;  
  9. import java.util.Map;  
  10.   
  11. /**  
  12.  *   
  13.  * <b>類說明：</b>bean基類  
  14.  *   
  15.  * <p>  
  16.  * <b>詳細描述：</b>  
  17.  *   
  18.  * @author costin_law   
  19.  * @since 2014-5-5  
  20.  */  
  21. public abstract class BaseEntity implements Serializable{  
  22.     private static final long serialVersionUID = 1L;  
  23.       
  24.     private static Map<Class<?>,PropertyInfo[]> class2Props = new HashMap<Class<?>,PropertyInfo[]>(128);  
  25.       
  26.     @Override  
  27.     public String toString() {  
  28.         PropertyInfo[] props = class2Props.get(this.getClass());  
  29.         if( props == null ){  
  30.             props = getProps(this.getClass());  
  31.         }  
  32.           
  33.         StringBuilder   builder = new StringBuilder(1024);  
  34.         boolean isFirst = true;  
  35.         for (int i = 0, n = props.length; i < n; i++) {  
  36.             try {  
  37.                 PropertyInfo propInfo = props[i];                 
  38.                   
  39.                 Object value = propInfo.getMethod.invoke(this, new Object[0]);  
  40.                 if (isFirst)  
  41.                     isFirst = false;  
  42.                 else  
  43.                     builder.append(",");  
  44.                 builder.append(propInfo.propName);  
  45.                 builder.append(":");  
  46.                 if (value instanceof String)  
  47.                     builder.append("\"");  
  48.                 builder.append(value);  
  49.                 if (value instanceof String)  
  50.                     builder.append("\"");                 
  51.             } catch (Exception e) {  
  52.                 // ignore  
  53.             }  
  54.         }  
  55.         return "{" + builder.toString() + "}";  
  56.     }  
  57.   
  58.     private static PropertyInfo[] getProps(Class<? extends BaseEntity> clazz) {  
  59.         PropertyInfo[] props;  
  60.         Method[] allMethods = clazz.getMethods();   
  61.         List<PropertyInfo> propList = new ArrayList<PropertyInfo>();  
  62.           
  63.         for (int i = 0, n = allMethods.length; i < n; i++) {  
  64.             try {  
  65.                 Method method = allMethods[i];  
  66.                 if ((method.getModifiers() & Modifier.PUBLIC) == 1  
  67.                         && method.getDeclaringClass() != Object.class  
  68.                         && (method.getParameterTypes() == null || method  
  69.                                 .getParameterTypes().length == 0)) {  
  70.                     String methodName = method.getName();  
  71.                     if (methodName.startsWith("get") || methodName.startsWith("is") ) {  
  72.                         PropertyInfo propInfo = new PropertyInfo();                                       
  73.                         propInfo.getMethod = method;  
  74.                         if (methodName.startsWith("get")) {  
  75.                             propInfo.propName = methodName.substring(3, 4).toLowerCase()  
  76.                                     + methodName.substring(4);  
  77.                         } else if (methodName.startsWith("is")) {  
  78.                             propInfo.propName = methodName.substring(2, 3).toLowerCase()  
  79.                                     + methodName.substring(3);  
  80.                         }                 
  81.                         propList.add(propInfo);  
  82.                     }  
  83.                 }                     
  84.             }catch(Exception e){                      
  85.             }  
  86.         }  
  87.           
  88.         props =  new PropertyInfo[propList.size()];  
  89.         propList.toArray(props);  
  90.         class2Props.put(clazz, props);  
  91.         return props;  
  92.     }  
  93.       
  94.     static class PropertyInfo{  
  95.         Method getMethod;  
  96.         String propName;          
  97.     }  
  98.   
  99. }  

BeanUtil是一個將PageHelper返回的list轉成pageResult的工具

[html]  view plain  copy
 
  1. package com.lin.util;  
  2.   
  3. import java.util.List;  
  4.   
  5. import com.github.pagehelper.Page;  
  6. import com.lin.util.PagedResult;  
  7.   
  8. /**  
  9.  * 功能概要：  
  10.  *   
  11.  * @author linbingwen  
  12.  * @since  2015年10月22日   
  13.  */  
  14.   
  15.   
  16. public class BeanUtil {  
  17.   
  18.     public static <T> PagedResult<T> toPagedResult(List<T> datas) {  
  19.         PagedResult<T> result = new PagedResult<T>();  
  20.         if (datas instanceof Page) {  
  21.             Page page = (Page) datas;  
  22.             result.setPageNo(page.getPageNum());  
  23.             result.setPageSize(page.getPageSize());  
  24.             result.setDataList(page.getResult());  
  25.             result.setTotal(page.getTotal());  
  26.             result.setPages(page.getPages());  
  27.         }  
  28.         else {  
  29.             result.setPageNo(1);  
  30.             result.setPageSize(datas.size());  
  31.             result.setDataList(datas);  
  32.             result.setTotal(datas.size());  
  33.         }  
  34.   
  35.         return result;  
  36.     }  
  37.   
  38. }  


7、這樣就好了，可以跑單元測試了

 

 

[java]  view plain  copy
 
  1. /** 
  2.  * 分頁測試 
  3.  * @author linbingwen 
  4.  * @since  2015年10月22日 
  5.  */  
  6. @Test  
  7. public void queryByPage(){  
  8.      PagedResult<User>  pagedResult = userService.queryByPage(null,1,10);//null表示查全部    
  9.      logger.debug("查找結果" + pagedResult);  
  10. }  


輸出結果：

 


看不清的話看下面


查找結果{total:46,dataList:Page{pageNum=1, pageSize=10, startRow=0, endRow=10, total=46, pages=5, reasonable=false,

 pageSizeZero=true},pageNo:1,pageSize:10,pages:5}

其中的dataList中存放的就是數據

打個斷點看下就知道了：

 

 

二、前台展示分頁結果

         前台展示主要使用了bootstrap-paginator，這里的原理其實就是將上面查出來的結果，轉換成json數據傳給前台，然后前台再根據條數和分頁數目、總目生成表格，同時每次點擊對應的按鈕都發送一個ajax請求到后台查詢應對的數據，前台每次發送到后台都會包含分頁數目、查詢條件

1、Controller層的基類

這個基類主要實現了將數據轉成json

引用到的jar包如下：

 

[html]  view plain  copy
 
  1. <!-- 添加json的依賴包 -->  
  2.         <dependency>  
  3.             <groupId>net.sf.json-lib</groupId>  
  4.             <artifactId>json-lib</artifactId>  
  5.             <version>2.3</version>  
  6.             <classifier>jdk15</classifier>  
  7.         </dependency>  
  8.   
  9.         <dependency>  
  10.             <groupId>org.springframework.data</groupId>  
  11.             <artifactId>spring-data-commons</artifactId>  
  12.             <version>1.6.1.RELEASE</version>  
  13.         </dependency>  
  14.   
  15.         <dependency>  
  16.             <groupId>org.springframework.data</groupId>  
  17.             <artifactId>spring-data-jpa</artifactId>  
  18.             <version>1.4.1.RELEASE</version>  
  19.         </dependency>  
  20.   
  21.         <dependency>  
  22.             <groupId>com.alibaba</groupId>  
  23.             <artifactId>fastjson</artifactId>  
  24.             <version>1.1.34</version>  
  25.         </dependency>  

基類如下:

 

 

[java]  view plain  copy
 
  1. package com.lin.controller;  
  2.   
  3. import com.lin.common.HttpConstants;  
  4. import com.lin.json.JsonDateValueProcessor;  
  5.   
  6. import net.sf.json.JSONArray;  
  7. import net.sf.json.JSONObject;  
  8. import net.sf.json.JsonConfig;  
  9.   
  10. import org.slf4j.Logger;  
  11. import org.slf4j.LoggerFactory;  
  12.   
  13. import java.util.Date;  
  14.   
  15. /** 
  16.  * Controller基類 
  17.  */  
  18. public class BaseController {  
  19.   
  20.     protected Logger logger = LoggerFactory.getLogger(this.getClass());  
  21.       
  22.     protected final static String DATE_FORMATE = "yyyy-MM-dd";  
  23.       
  24.     /** 
  25.      * 返回服務端處理結果 
  26.      * @param obj 服務端輸出對象 
  27.      * @return 輸出處理結果給前段JSON格式數據 
  28.      * @author YANGHONGXIA 
  29.      * @since 2015-01-06 
  30.      */  
  31.     public String responseResult(Object obj){  
  32.         JSONObject jsonObj = null;  
  33.         if(obj != null){  
  34.             logger.info("后端返回對象：{}", obj);  
  35.             JsonConfig jsonConfig = new JsonConfig();   
  36.             jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());  
  37.             jsonObj = JSONObject.fromObject(obj, jsonConfig);  
  38.             logger.info("后端返回數據：" + jsonObj);  
  39.             if(HttpConstants.SERVICE_RESPONSE_SUCCESS_CODE.equals(jsonObj.getString(HttpConstants.SERVICE_RESPONSE_RESULT_FLAG))){  
  40.                 jsonObj.element(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, false);  
  41.                 jsonObj.element(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, "");  
  42.             }else{  
  43.                 jsonObj.element(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, true);  
  44.                 String errMsg = jsonObj.getString(HttpConstants.SERVICE_RESPONSE_RESULT_MSG);  
  45.                 jsonObj.element(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, errMsg==null?HttpConstants.SERVICE_RESPONSE_NULL:errMsg);  
  46.             }  
  47.         }  
  48.         logger.info("輸出結果：{}", jsonObj.toString());  
  49.         return jsonObj.toString();  
  50.     }  
  51.       
  52.     /** 
  53.      * 返回成功 
  54.      * @param obj 輸出對象 
  55.      * @return 輸出成功的JSON格式數據 
  56.      */  
  57.     public String responseSuccess(Object obj){  
  58.         JSONObject jsonObj = null;  
  59.         if(obj != null){  
  60.             logger.info("后端返回對象：{}", obj);  
  61.             JsonConfig jsonConfig = new JsonConfig();   
  62.             jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());  
  63.             jsonObj = JSONObject.fromObject(obj, jsonConfig);  
  64.             logger.info("后端返回數據：" + jsonObj);  
  65.             jsonObj.element(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, false);  
  66.             jsonObj.element(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, "");  
  67.         }  
  68.         logger.info("輸出結果：{}", jsonObj.toString());  
  69.         return jsonObj.toString();  
  70.     }  
  71.   
  72.     /** 
  73.      * 返回成功 
  74.      * @param obj 輸出對象 
  75.      * @return 輸出成功的JSON格式數據 
  76.      */  
  77.     public String responseArraySuccess(Object obj){  
  78.         JSONArray jsonObj = null;  
  79.         if(obj != null){  
  80.             logger.info("后端返回對象：{}", obj);  
  81.             JsonConfig jsonConfig = new JsonConfig();  
  82.             jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());  
  83.             jsonObj = JSONArray.fromObject(obj, jsonConfig);  
  84.             logger.info("后端返回數據：" + jsonObj);  
  85.         }  
  86.         logger.info("輸出結果：{}", jsonObj.toString());  
  87.         return jsonObj.toString();  
  88.     }  
  89.       
  90.     /** 
  91.      * 返回成功 
  92.      * @param obj 輸出對象 
  93.      * @return 輸出成功的JSON格式數據 
  94.      */  
  95.     public String responseSuccess(Object obj, String msg){  
  96.         JSONObject jsonObj = null;  
  97.         if(obj != null){  
  98.             logger.info("后端返回對象：{}", obj);  
  99.             JsonConfig jsonConfig = new JsonConfig();   
  100.             jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());  
  101.             jsonObj = JSONObject.fromObject(obj, jsonConfig);  
  102.             logger.info("后端返回數據：" + jsonObj);  
  103.             jsonObj.element(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, false);  
  104.             jsonObj.element(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, msg);  
  105.         }  
  106.         logger.info("輸出結果：{}", jsonObj.toString());  
  107.         return jsonObj.toString();  
  108.     }  
  109.       
  110.     /** 
  111.      * 返回失敗 
  112.      * @param errorMsg 錯誤信息 
  113.      * @return 輸出失敗的JSON格式數據 
  114.      */  
  115.     public String responseFail(String errorMsg){  
  116.         JSONObject jsonObj = new JSONObject();  
  117.         jsonObj.put(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, true);  
  118.         jsonObj.put(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, errorMsg);  
  119.         logger.info("輸出結果：{}", jsonObj.toString());  
  120.         return jsonObj.toString();  
  121.     }  
  122.   
  123. }  

上面用到的一些變量如下：

 

 

[java]  view plain  copy
 
  1. package com.lin.common;  
  2.   
  3. public class HttpConstants {  
  4.   
  5.     public static final String SYSTEM_ERROR_MSG = "系統錯誤";  
  6.       
  7.     public static final String REQUEST_PARAMS_NULL = "請求參數為空";  
  8.   
  9.     public static final String SERVICE_RESPONSE_NULL = "服務端返回結果為空";  
  10.       
  11.     // 服務端返回成功的標志  
  12.     public static final String SERVICE_RESPONSE_SUCCESS_CODE = "AMS00000";  
  13.       
  14.     // 服務端返回結果的標志  
  15.     public static final String SERVICE_RESPONSE_RESULT_FLAG = "returnCode";  
  16.       
  17.     // 服務端返回結果失敗的標志  
  18.     public static final String SERVICE_RESPONSE_RESULT_MSG = "errorMsg";  
  19.       
  20.     // 返回給前段頁面成功或失敗的標志  
  21.     public static final String RESPONSE_RESULT_FLAG_ISERROR = "isError";  
  22.       
  23.     // 執行刪除操作  
  24.     public static final String OPERATION_TYPE_DELETE = "D";  
  25.   
  26.     public static final String ENUM_PATH = "com.mucfc.msm.enumeration.";  
  27.       
  28. }  


引用一個包的內容如下：

 

 

[java]  view plain  copy
 
  1. package com.lin.json;  
  2.   
  3. import net.sf.json.JsonConfig;  
  4. import net.sf.json.processors.JsonValueProcessor;  
  5.   
  6. import java.text.SimpleDateFormat;  
  7. import java.util.Date;  
  8. import java.util.Locale;  
  9.   
  10. public class JsonDateValueProcessor implements JsonValueProcessor {  
  11.   
  12.     /** 
  13.      * datePattern 
  14.      */  
  15.     private String datePattern = "yyyy-MM-dd HH:mm:ss";  
  16.   
  17.     /** 
  18.      * JsonDateValueProcessor 
  19.      */  
  20.     public JsonDateValueProcessor() {  
  21.         super();  
  22.     }  
  23.   
  24.     /** 
  25.      * @param format 
  26.      */  
  27.     public JsonDateValueProcessor(String format) {  
  28.         super();  
  29.         this.datePattern = format;  
  30.     }  
  31.   
  32.     /** 
  33.      * @param value 
  34.      * @param jsonConfig 
  35.      * @return Object 
  36.      */  
  37.     public Object processArrayValue(Object value, JsonConfig jsonConfig) {  
  38.         return process(value);  
  39.     }  
  40.   
  41.     /** 
  42.      * @param key 
  43.      * @param value 
  44.      * @param jsonConfig 
  45.      * @return Object 
  46.      */  
  47.     public Object processObjectValue(String key, Object value, JsonConfig jsonConfig) {  
  48.         return process(value);  
  49.     }  
  50.   
  51.     /** 
  52.      * process 
  53.      * 
  54.      * @param value 
  55.      * @return 
  56.      */  
  57.     private Object process(Object value) {  
  58.         try {  
  59.             if (value instanceof Date) {  
  60.                 SimpleDateFormat sdf = new SimpleDateFormat(datePattern, Locale.UK);  
  61.                 return sdf.format((Date) value);  
  62.             }  
  63.             return value == null ? "" : value.toString();  
  64.         } catch (Exception e) {  
  65.             return "";  
  66.         }  
  67.   
  68.     }  
  69.   
  70.     /** 
  71.      * @return the datePattern 
  72.      */  
  73.     public String getDatePattern() {  
  74.         return datePattern;  
  75.     }  
  76.   
  77.     /** 
  78.      * @param pDatePattern the datePattern to set 
  79.      */  
  80.     public void setDatePattern(String pDatePattern) {  
  81.         datePattern = pDatePattern;  
  82.     }  
  83.   
  84. }  

 

這里主要實現了能將list/map/set/數組等轉換成josn，並傳到前台‘

2、光這里寫不行，還得配置springMVC中以json來傳遞數據，並配置自己的字符過濾器，要不然中文傳到前台可能亂碼，這里的配置比較復雜，大部分時間都花在這里，

這里我直接放spingMVC的配置：spring-mvc.xml

 

[html]  view plain  copy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.   xmlns:p="http://www.springframework.org/schema/p"  
  4.   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  5.   xmlns:context="http://www.springframework.org/schema/context"  
  6.   xmlns:mvc="http://www.springframework.org/schema/mvc"  
  7.   xsi:schemaLocation="  
  8.     http://www.springframework.org/schema/beans  
  9.     http://www.springframework.org/schema/beans/spring-beans-3.2.xsd  
  10.     http://www.springframework.org/schema/context  
  11.     http://www.springframework.org/schema/context/spring-context-3.2.xsd  
  12.     http://www.springframework.org/schema/mvc  
  13.     http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">  
  14.        
  15.     <!-- 掃描controller（controller層注入） -->  
  16.    <context:component-scan base-package="com.lin.controller" use-default-filters="false">  
  17.         <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>  
  18.         <context:include-filter type="annotation" expression="org.springframework.web.bind.annotation.ControllerAdvice"/>  
  19.     </context:component-scan>  
  20.      
  21.      
  22.        <!-- 會自動注冊了validator  ConversionService  -->  
  23.     <mvc:annotation-driven validator="validator" conversion-service="conversionService" content-negotiation-manager="contentNegotiationManager">  
  24.         <mvc:message-converters register-defaults="true">  
  25.             <!-- StringHttpMessageConverter編碼為UTF-8，防止亂碼 -->  
  26.             <bean class="org.springframework.http.converter.StringHttpMessageConverter">  
  27.                 <constructor-arg value="UTF-8"/>  
  28.                 <property name = "supportedMediaTypes">  
  29.                     <list>  
  30.                         <bean class="org.springframework.http.MediaType">  
  31.                             <constructor-arg index="0" value="text"/>  
  32.                             <constructor-arg index="1" value="plain"/>  
  33.                             <constructor-arg index="2" value="UTF-8"/>  
  34.                         </bean>  
  35.                         <bean class="org.springframework.http.MediaType">  
  36.                             <constructor-arg index="0" value="*"/>  
  37.                             <constructor-arg index="1" value="*"/>  
  38.                             <constructor-arg index="2" value="UTF-8"/>  
  39.                         </bean>  
  40.                     </list>  
  41.                 </property>  
  42.             </bean>  
  43.             <!-- 避免IE執行AJAX時,返回JSON出現下載文件 -->  
  44.             <bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">  
  45.                 <property name="supportedMediaTypes">  
  46.                     <list>  
  47.                         <value>application/json;charset=UTF-8</value>  
  48.                     </list>  
  49.                 </property>  
  50.                 <!--<property name="serializerFeature">-->  
  51.                 <!--這個地方加上這個功能吧，能自己配置一些東西，比如時間的格式化，null輸出""等等-->  
  52.                 <!--</property>-->  
  53.             </bean>  
  54.         </mvc:message-converters>  
  55.   
  56.         <mvc:argument-resolvers>  
  57.           <bean class="org.springframework.data.web.PageableHandlerMethodArgumentResolver" />  
  58.         </mvc:argument-resolvers>  
  59.     </mvc:annotation-driven>  
  60.   
  61.   
  62.            <!-- 內容協商管理器  -->  
  63.     <!--1、首先檢查路徑擴展名（如my.pdf）；2、其次檢查Parameter（如my?format=pdf）；3、檢查Accept Header-->  
  64.     <bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">  
  65.         <!-- 擴展名至mimeType的映射,即 /user.json => application/json -->  
  66.         <property name="favorPathExtension" value="true"/>  
  67.         <!-- 用於開啟 /userinfo/123?format=json 的支持 -->  
  68.         <property name="favorParameter" value="true"/>  
  69.         <property name="parameterName" value="format"/>  
  70.         <!-- 是否忽略Accept Header -->  
  71.         <property name="ignoreAcceptHeader" value="false"/>  
  72.   
  73.         <property name="mediaTypes"> <!--擴展名到MIME的映射；favorPathExtension, favorParameter是true時起作用  -->  
  74.             <value>  
  75.                 json=application/json  
  76.                 xml=application/xml  
  77.                 html=text/html  
  78.             </value>  
  79.         </property>  
  80.         <!-- 默認的content type -->  
  81.         <property name="defaultContentType" value="text/html"/>  
  82.     </bean>  
  83.   
  84.   
  85.   
  86.     <!-- 當在web.xml 中   DispatcherServlet使用 <url-pattern>/</url-pattern> 映射時，能映射靜態資源 -->  
  87.     <mvc:default-servlet-handler />    
  88.     <!-- 靜態資源映射 -->  
  89.     <mvc:resources mapping="/static/**" location="/WEB-INF/static/"/>  
  90.      
  91.   
  92.    <!-- 對模型視圖添加前后綴 -->  
  93.      <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"  
  94.       p:prefix="/WEB-INF/view/" p:suffix=".jsp"/>  
  95.         
  96.     <!-- 這里設置靜態的資源 -->  
  97. <!--     <mvc:resources location="/static/" mapping="/static/**" /> -->  
  98.   
  99.   
  100. </beans>  


3、Spirng中也和配置：

 

 

[html]  view plain  copy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"  
  4.     xmlns:aop="http://www.springframework.org/schema/aop"  
  5.     xsi:schemaLocation="    
  6.            http://www.springframework.org/schema/beans    
  7.            http://www.springframework.org/schema/beans/spring-beans-3.0.xsd    
  8.            http://www.springframework.org/schema/aop    
  9.            http://www.springframework.org/schema/aop/spring-aop-3.0.xsd  
  10.            http://www.springframework.org/schema/context    
  11.            http://www.springframework.org/schema/context/spring-context-3.0.xsd">  
  12.              
  13.              <!-- 以下 validator  ConversionService 在使用 mvc:annotation-driven 會 自動注冊-->  
  14.     <bean id="validator" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean">  
  15.     </bean>  
  16.        
  17.      <!-- 引入jdbc配置文件 -->    
  18.      <bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">  
  19.         <property name="locations">  
  20.             <list>  
  21.                <value>classpath:properties/*.properties</value>  
  22.                 <!--要是有多個配置文件，只需在這里繼續添加即可 -->  
  23.             </list>  
  24.         </property>  
  25.     </bean>  
  26.       
  27.       
  28.          <!-- 掃描注解Bean -->  
  29.     <context:component-scan base-package="com.lin.service">  
  30.         <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>  
  31.     </context:component-scan>  
  32.       
  33.     <!-- 激活annotation功能 -->  
  34.     <context:annotation-config />  
  35.     <!-- 激活annotation功能 -->  
  36.     <context:spring-configured />  
  37.     <!-- 注解事務配置 -->  
  38.       
  39.     <!-- 類型轉換及數據格式化 -->  
  40.     <bean id="conversionService" class="org.springframework.format.support.FormattingConversionServiceFactoryBean"/>    
  41.   
  42.     <!-- 配置數據源 -->  
  43.     <bean id="dataSource"  
  44.         class="org.springframework.jdbc.datasource.DriverManagerDataSource">  
  45.         <!-- 不使用properties來配置 -->  
  46.         <!-- <property name="driverClassName" value="com.mysql.jdbc.Driver" />   
  47.             <property name="url" value="jdbc:mysql://localhost:3306/learning" />   
  48.             <property name="username" value="root" />   
  49.             <property name="password" value="christmas258@" /> -->  
  50.        <!-- 使用properties來配置 -->  
  51.         <property name="driverClassName">  
  52.             <value>${jdbc_driverClassName}</value>  
  53.         </property>  
  54.         <property name="url">  
  55.             <value>${jdbc_url}</value>  
  56.         </property>  
  57.         <property name="username">  
  58.             <value>${jdbc_username}</value>  
  59.         </property>  
  60.         <property name="password">  
  61.             <value>${jdbc_password}</value>  
  62.         </property>  
  63.     </bean>  
  64.   
  65.     <!-- 自動掃描了所有的XxxxMapper.xml對應的mapper接口文件，這樣就不用一個一個手動配置Mpper的映射了，只要Mapper接口類和Mapper映射文件對應起來就可以了。 -->  
  66.     <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">  
  67.         <property name="basePackage"  
  68.             value="com.lin.dao" />  
  69.     </bean>  
  70.   
  71.     <!-- 配置Mybatis的文件 ，mapperLocations配置**Mapper.xml文件位置，configLocation配置mybatis-config文件位置-->  
  72.     <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">  
  73.         <property name="dataSource" ref="dataSource" />  
  74.         <property name="mapperLocations" value="classpath*:com/lin/mapper/**/*.xml"/>    
  75.         <property name="configLocation" value="classpath:mybatis/mybatis-config.xml" />  
  76.         <!-- <property name="typeAliasesPackage" value="com.tiantian.ckeditor.model"   
  77.             /> -->  
  78.     </bean>  
  79.   
  80. </beans>  


其中validator這個bean需要引用如下：

 

 

[html]  view plain  copy
 
  1. <dependency>  
  2.             <groupId>javax.validation</groupId>  
  3.             <artifactId>validation-api</artifactId>  
  4.             <version>1.1.0.Final</version>  
  5.         </dependency>  
  6.   
  7.         <dependency>  
  8.             <groupId>org.hibernate</groupId>  
  9.             <artifactId>hibernate-validator</artifactId>  
  10.             <version>5.0.1.Final</version>  
  11.         </dependency>  


4、conroller層編寫

 

 

[java]  view plain  copy
 
  1. package com.lin.controller;  
  2.   
  3.   
  4. import java.util.HashMap;  
  5. import java.util.Map;  
  6.   
  7. import javax.annotation.Resource;  
  8.   
  9. import org.slf4j.Logger;  
  10. import org.slf4j.LoggerFactory;  
  11. import org.springframework.data.domain.Pageable;  
  12. import org.springframework.stereotype.Controller;  
  13. import org.springframework.web.bind.annotation.RequestMapping;  
  14. import org.springframework.web.bind.annotation.RequestMethod;  
  15. import org.springframework.web.bind.annotation.ResponseBody;  
  16. import org.springframework.web.servlet.ModelAndView;  
  17.   
  18. import com.github.pagehelper.Page;  
  19. import com.lin.domain.User;  
  20. import com.lin.service.UserService;  
  21. import com.lin.util.PagedResult;  
  22.   
  23. /** 
  24.  * 功能概要：UserController 
  25.  *  
  26.  * @author linbingwen 
  27.  * @since  2015年9月28日  
  28.  */  
  29. @Controller  
  30. public class UserController extends BaseController {  
  31.       
  32.     private Logger logger = LoggerFactory.getLogger(getClass());  
  33.       
  34.     @Resource  
  35.     private UserService userService;  
  36.       
  37.     @RequestMapping("/")    
  38.     public ModelAndView getIndex(){      
  39.         ModelAndView mav = new ModelAndView("index");   
  40.         User user = userService.selectUserById(1);  
  41.         mav.addObject("user", user);   
  42.         return mav;    
  43.     }    
  44.       
  45.     /** 
  46.      * 顯示首頁 
  47.      * @author linbingwen 
  48.      * @since  2015年10月23日  
  49.      * @return 
  50.      */  
  51.     @RequestMapping("/bootstrapTest1")    
  52.     public String bootStrapTest1(){  
  53.         return "bootstrap/bootstrapTest1";  
  54.     }  
  55.       
  56.     /** 
  57.      * 分頁查詢用戶信息 
  58.      * @author linbingwen 
  59.      * @since  2015年10月23日  
  60.      * @param page 
  61.      * @return 
  62.      */  
  63.     @RequestMapping(value="/list.do", method= RequestMethod.POST)  
  64.     @ResponseBody  
  65.     public String list(Integer pageNumber,Integer pageSize ,String userName) {  
  66.         logger.info("分頁查詢用戶信息列表請求入參：pageNumber{},pageSize{}", pageNumber,pageSize);  
  67.         try {  
  68.             PagedResult<User> pageResult = userService.queryByPage(userName, pageNumber,pageSize);  
  69.             return responseSuccess(pageResult);  
  70.         } catch (Exception e) {  
  71.             return responseFail(e.getMessage());  
  72.         }  
  73.     }  
  74. }  


5、最后一步就是前台的頁面了，這里可以先寫頁面再來寫controller也可以的

 

 

[html]  view plain  copy
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html>  
  4. <html lang="en">  
  5. <head>  
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7. <title>Bootstrap分頁實例</title>  
  8. <link href="<%=request.getContextPath()%>/static/js/bootstrap//css/bootstrap.min.css" rel="stylesheet">  
  9. <script src="<%=request.getContextPath()%>/static/js/jQuery/jquery-2.1.4.min.js"></script>  
  10. <script src="<%=request.getContextPath()%>/static/js/bootstrap/js/bootstrap.min.js"></script>  
  11. <script src="<%=request.getContextPath()%>/static/js/bootstrap/js/bootstrap-paginator.min.js"></script>  
  12. <style type="text/css">  
  13. #queryDiv {  
  14.  margin-right: auto;  
  15.  margin-left: auto;  
  16.  width:600px;  
  17. }  
  18. #textInput {  
  19.  margin-top: 10px;  
  20. }  
  21. #tableResult {  
  22.  margin-right: auto;  
  23.  margin-left: auto;  
  24.  width:600px;  
  25. }  
  26. td {  
  27.  width:150px  
  28. }  
  29. </style>  
  30. </head>  
  31. <body>  
  32.     <div id = "queryDiv">  
  33.         <input id = "textInput" type="text" placeholder="請輸入用戶名" >  
  34.         <button id = "queryButton" class="btn btn-primary" type="button">查詢</button>  
  35.     </div>  
  36.     <form id="form1">  
  37.         <table class="table table-bordered" id = 'tableResult'>  
  38.             <caption>查詢用戶結果</caption>  
  39.             <thead>  
  40.                 <tr>  
  41.                     <th>序號</th>  
  42.                     <th>用戶名</th>  
  43.                     <th>密碼</th>  
  44.                     <th>用戶郵箱</th>  
  45.                 </tr>  
  46.             </thead>  
  47.             <tbody id="tableBody">  
  48.             </tbody>  
  49.         </table>  
  50.         <!-- 底部分頁按鈕 -->  
  51.         <div id="bottomTab"></div>  
  52.     </form>  
  53.     <script type='text/javascript'>      
  54.         var PAGESIZE = 10;  
  55.         var options = {    
  56.             currentPage: 1,  //當前頁數  
  57.             totalPages: 10,  //總頁數，這里只是暫時的，后頭會根據查出來的條件進行更改  
  58.             size:"normal",    
  59.             alignment:"center",    
  60.             itemTexts: function (type, page, current) {    
  61.                 switch (type) {    
  62.                     case "first":    
  63.                         return "第一頁";    
  64.                     case "prev":    
  65.                         return "前一頁";    
  66.                     case "next":    
  67.                         return "后一頁";    
  68.                     case "last":    
  69.                         return "最后頁";    
  70.                     case "page":    
  71.                         return  page;    
  72.                 }                   
  73.             },    
  74.             onPageClicked: function (e, originalEvent, type, page) {    
  75.                 var userName = $("#textInput").val(); //取內容  
  76.                 buildTable(userName,page,PAGESIZE);//默認每頁最多10條  
  77.             }    
  78.         }    
  79.   
  80.         //獲取當前項目的路徑  
  81.         var urlRootContext = (function () {  
  82.             var strPath = window.document.location.pathname;  
  83.             var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);  
  84.             return postPath;  
  85.         })();  
  86.           
  87.          
  88.         //生成表格  
  89.         function buildTable(userName,pageNumber,pageSize) {  
  90.              var url =  urlRootContext + "/list.do"; //請求的網址  
  91.              var reqParams = {'userName':userName, 'pageNumber':pageNumber,'pageSize':pageSize};//請求數據  
  92.              $(function () {     
  93.                   $.ajax({  
  94.                         type:"POST",  
  95.                         url:url,  
  96.                         data:reqParams,  
  97.                         async:false,  
  98.                         dataType:"json",  
  99.                         success: function(data){  
  100.                             if(data.isError == false) {  
  101.                            // options.totalPages = data.pages;  
  102.                         var newoptions = {    
  103.                         currentPage: 1,  //當前頁數  
  104.                         totalPages: data.pages==0?1:data.pages,  //總頁數  
  105.                         size:"normal",    
  106.                         alignment:"center",    
  107.                         itemTexts: function (type, page, current) {    
  108.                         switch (type) {    
  109.                             case "first":    
  110.                             return "第一頁";    
  111.                             case "prev":    
  112.                             return "前一頁";    
  113.                             case "next":    
  114.                             return "后一頁";    
  115.                             case "last":    
  116.                             return "最后頁";    
  117.                         case "page":    
  118.                         return  page;    
  119.                 }                   
  120.             },    
  121.             onPageClicked: function (e, originalEvent, type, page) {    
  122.                 var userName = $("#textInput").val(); //取內容  
  123.                 buildTable(userName,page,PAGESIZE);//默認每頁最多10條  
  124.             }    
  125.          }                           
  126.          $('#bottomTab').bootstrapPaginator("setOptions",newoptions); //重新設置總頁面數目  
  127.          var dataList = data.dataList;  
  128.          $("#tableBody").empty();//清空表格內容  
  129.          if (dataList.length > 0 ) {  
  130.              $(dataList).each(function(){//重新生成  
  131.                     $("#tableBody").append('<tr>');  
  132.                     $("#tableBody").append('<td>' + this.userId + '</td>');  
  133.                     $("#tableBody").append('<td>' + this.userName + '</td>');  
  134.                     $("#tableBody").append('<td>' + this.userPassword + '</td>');  
  135.                     $("#tableBody").append('<td>' + this.userEmail + '</td>');  
  136.                     $("#tableBody").append('</tr>');  
  137.                     });    
  138.                     } else {                                  
  139.                           $("#tableBody").append('<tr><th colspan ="4"><center>查詢無數據</center></th></tr>');  
  140.                     }  
  141.                     }else{  
  142.                           alert(data.errorMsg);  
  143.                             }  
  144.                       },  
  145.                         error: function(e){  
  146.                            alert("查詢失敗:" + e);  
  147.                         }  
  148.                     });  
  149.                });  
  150.         }  
  151.           
  152.         //渲染完就執行  
  153.         $(function() {  
  154.               
  155.             //生成底部分頁欄  
  156.             $('#bottomTab').bootstrapPaginator(options);       
  157.               
  158.             buildTable("",1,10);//默認空白查全部  
  159.               
  160.             //創建結算規則  
  161.             $("#queryButton").bind("click",function(){  
  162.                 var userName = $("#textInput").val();     
  163.                 buildTable(userName,1,PAGESIZE);  
  164.             });  
  165.         });  
  166.     </script>  
  167. </body>  
  168. </html>  

注意引入的js文件，bootstrap-paginator需要引用bootstrap和jquery

 

6、最終運行結果

最后以web工程運行就可以了：

結果如下：

 

打印出來的一些日志：

后台返回給前台的就是json

整個工程下載

http://blog.csdn.net/evankaka/article/details/49452201

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Spring+Mybatis+SpringMVC后台與前台分頁展示實例（附工程） 轉easyui datagrid 前台分頁的實現 ecshop 前台分頁 easyui datagrid 后台返回所有數據，前台分頁 jquery 前台分頁插件總結（1 前台假分頁 2 后台分頁） MyEclipse搭建SSM框架(Spring+MyBatis+SpringMVC) PageInfo 前台分頁js，帶分頁欄 Spring Data JPA + layui的前台分頁插件layPage實現頁面的分頁 springmvc+spring+mybatis分頁查詢實例版本2.0 Vue中使用v-for 簡單地實現前台分頁
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM