您的位置：首页 > 编程语言 > Java开发

Spring+Mybatis+SpringMVC后台与前台分页展示实例（附工程）

2016-11-23 18:52 537 查看

出处http://blog.csdn.net/evankaka

目录(?)[+]

转载请注明出处http://blog.csdn.net/evankaka

摘要：本文实现了一个后台由spring+Mybatis+SpringMVC组成，分页采用PageHelper，前台展示使用bootstrap-paginator来显示效果的分页实例。整个项目由maven构成。这里主要讲了分页的实例，框架怎么搭建就不再说明，主要是在这里的基础上来增加分页功能的。注意，此文是在这个基础Spring+Mybatis+SpringMVC+Maven+MySQL搭建实例之上来做分页的，建议文中看不懂的配置可以看看这里。

整个工程下载(旧版本，日志打印使用log4j,数据库配置放在properties文件)

新版本下载：https://github.com/appleappleapple/ssm_project （日志打印使用logback,数据库配置放在POM.XML）博主推荐使用新版本，而且这里详细说明了整个工程应用的框架，数据源配置，SQL语句等等！

重要的事情说三遍：请下新版本~[b]请下新版本~请下新版本~[/b]

最后的结果如下：

环境：jdk1.6

Tomcat 7.0

Eclipse luna/windows 7

一、后台PageHelper使用

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

1、引入jar包

[html] view
plain copy

<dependency>

<groupId>com.github.pagehelper</groupId>

<artifactId>pagehelper</artifactId>

<version>4.0.0</version>

</dependency>

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

[html] view
plain copy

<plugins>



<plugin interceptor="com.github.pagehelper.PageHelper">

<property name="dialect" value="mysql"/>







<property name="offsetAsPageNum" value="true"/>





<property name="rowBoundsWithCount" value="true"/>





<property name="pageSizeZero" value="true"/>







<property name="reasonable" value="false"/>









<property name="params" value="pageNum=start;pageSize=limit;"/>

</plugin>

</plugins>

这样子就引入进来了，接下来就是来开始分页功能的实现

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

[html] view
plain copy

<select id="selectUserByUserName" parameterType="java.lang.String" resultMap="BaseResultMap">

SELECT *

FROM t_user

WHERE 1 = 1

<if test="userName != null and userName !=''">

AND USER_NAME = #{userName,jdbcType=VARCHAR}

</if>

ORDER BY USER_ID

</select>

注意，这里的返回其实是一个list

[html] view
plain copy

<resultMap id="BaseResultMap" type="com.lin.domain.User">

<id column="USER_ID" property="userId" jdbcType="INTEGER" />

<result column="USER_NAME" property="userName" jdbcType="CHAR" />

<result column="USER_PASSWORD" property="userPassword" jdbcType="CHAR" />

<result column="USER_EMAIL" property="userEmail" jdbcType="CHAR" />

</resultMap>

4、然后就是dao类

[html] view
plain copy

/**

*

* @author linbingwen

* @since 2015年10月22日

* @param userName

* @return

*/

List<User> selectUserByUserName(@Param("userName") String userName);

这里一定的记得加@Param("userName")

接下来就可以在service层中添加分页查询的的接口了

5、接口类

[html] view
plain copy

/**

*

* @author linbingwen

* @since 2015年10月23日

* @param userName 查询条件，可为空

* @param pageNo 查询条件，可为空，默认取1

* @param pageSize 查询条件，可为空，默认取10

* @return

*/

PagedResult<User> queryByPage(String userName,Integer pageNo,Integer pageSize);

6、实现类

[html] view
plain copy

public PagedResult<User> queryByPage(String userName,Integer pageNo,Integer pageSize ) {

pageNo = pageNo == null?1:pageNo;

pageSize = pageSize == null?10:pageSize;

PageHelper.startPage(pageNo,pageSize); //startPage是告诉拦截器说我要开始分页了。分页参数是这两个。

return BeanUtil.toPagedResult(userDao.selectUserByUserName(userName));

}

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

其中，PagedResult是我自己封装的一个分页结果类

[java] view
plain copy

package com.lin.util;

import java.util.List;

import com.lin.dto.BaseEntity;

/**

* 功能概要：

*

* @author linbingwen

* @since 2015年10月23日

*/

public class PagedResult<T> extends BaseEntity {

/*serialVersionUID*/

private static final long serialVersionUID = 1L;

private List<T> dataList;//数据

private long pageNo;//当前页

private long pageSize;//条数

private long total;//总条数

private long pages;//总页面数目

public List<T> getDataList() {

return dataList;

}

public void setDataList(List<T> dataList) {

this.dataList = dataList;

}

public long getPageNo() {

return pageNo;

}

public void setPageNo(long pageNo) {

this.pageNo = pageNo;

}

public long getPageSize() {

return pageSize;

}

public void setPageSize(long pageSize) {

this.pageSize = pageSize;

}

public long getTotal() {

return total;

}

public void setTotal(long total) {

this.total = total;

}

public long getPages() {

return pages;

}

public void setPages(long pages) {

this.pages = pages;

}

}

这是它的基类

[html] view
plain copy

package com.lin.dto;

import java.io.Serializable;

import java.lang.reflect.Method;

import java.lang.reflect.Modifier;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

/**

*

* <b>类说明：</b>bean基类

*

* <p>

* <b>详细描述：</b>

*

* @author costin_law

* @since 2014-5-5

*/

public abstract class BaseEntity implements Serializable{

private static final long serialVersionUID = 1L;

private static Map<Class<?>,PropertyInfo[]> class2Props = new HashMap<Class<?>,PropertyInfo[]>(128);

@Override

public String toString() {

PropertyInfo[] props = class2Props.get(this.getClass());

if( props == null ){

props = getProps(this.getClass());

}

StringBuilder builder = new StringBuilder(1024);

boolean isFirst = true;

for (int i = 0, n = props.length; i < n; i++) {

try {

PropertyInfo propInfo = props[i];

Object value = propInfo.getMethod.invoke(this, new Object[0]);

if (isFirst)

isFirst = false;

else

builder.append(",");

builder.append(propInfo.propName);

builder.append(":");

if (value instanceof String)

builder.append("\"");

builder.append(value);

if (value instanceof String)

builder.append("\"");

} catch (Exception e) {

// ignore

}

}

return "{" + builder.toString() + "}";

}

private static PropertyInfo[] getProps(Class<? extends BaseEntity> clazz) {

PropertyInfo[] props;

Method[] allMethods = clazz.getMethods();

List<PropertyInfo> propList = new ArrayList<PropertyInfo>();

for (int i = 0, n = allMethods.length; i < n; i++) {

try {

Method method = allMethods[i];

if ((method.getModifiers() & Modifier.PUBLIC) == 1

&& method.getDeclaringClass() != Object.class

&& (method.getParameterTypes() == null || method

.getParameterTypes().length == 0)) {

String methodName = method.getName();

if (methodName.startsWith("get") || methodName.startsWith("is") ) {

PropertyInfo propInfo = new PropertyInfo();

propInfo.getMethod = method;

if (methodName.startsWith("get")) {

propInfo.propName = methodName.substring(3, 4).toLowerCase()

+ methodName.substring(4);

} else if (methodName.startsWith("is")) {

propInfo.propName = methodName.substring(2, 3).toLowerCase()

+ methodName.substring(3);

}

propList.add(propInfo);

}

}

}catch(Exception e){

}

}

props = new PropertyInfo[propList.size()];

propList.toArray(props);

class2Props.put(clazz, props);

return props;

}

static class PropertyInfo{

Method getMethod;

String propName;

}

}

BeanUtil是一个将PageHelper返回的list转成pageResult的工具

[html] view
plain copy

package com.lin.util;

import java.util.List;

import com.github.pagehelper.Page;

import com.lin.util.PagedResult;

/**

* 功能概要：

*

* @author linbingwen

* @since 2015年10月22日

*/

public class BeanUtil {

public static <T> PagedResult<T> toPagedResult(List<T> datas) {

PagedResult<T> result = new PagedResult<T>();

if (datas instanceof Page) {

Page page = (Page) datas;

result.setPageNo(page.getPageNum());

result.setPageSize(page.getPageSize());

result.setDataList(page.getResult());

result.setTotal(page.getTotal());

result.setPages(page.getPages());

}

else {

result.setPageNo(1);

result.setPageSize(datas.size());

result.setDataList(datas);

result.setTotal(datas.size());

}

return result;

}

}

7、这样就好了，可以跑单元测试了

[java] view
plain copy

/**

* 分页测试

* @author linbingwen

* @since 2015年10月22日

*/

@Test

public void queryByPage(){

PagedResult<User> pagedResult = userService.queryByPage(null,1,10);//null表示查全部

logger.debug("查找结果" + pagedResult);

}

输出结果：

看不清的话看下面

查找结果{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

<dependency>

<groupId>net.sf.json-lib</groupId>

<artifactId>json-lib</artifactId>

<version>2.3</version>

<classifier>jdk15</classifier>

</dependency>

<dependency>

<groupId>org.springframework.data</groupId>

<artifactId>spring-data-commons</artifactId>

<version>1.6.1.RELEASE</version>

</dependency>

<dependency>

<groupId>org.springframework.data</groupId>

<artifactId>spring-data-jpa</artifactId>

<version>1.4.1.RELEASE</version>

</dependency>

<dependency>

<groupId>com.alibaba</groupId>

<artifactId>fastjson</artifactId>

<version>1.1.34</version>

</dependency>

基类如下:

[java] view
plain copy

package com.lin.controller;

import com.lin.common.HttpConstants;

import com.lin.json.JsonDateValueProcessor;

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

import net.sf.json.JsonConfig;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import java.util.Date;

/**

* Controller基类

*/

public class BaseController {

protected Logger logger = LoggerFactory.getLogger(this.getClass());

protected final static String DATE_FORMATE = "yyyy-MM-dd";

/**

* 返回服务端处理结果

* @param obj 服务端输出对象

* @return 输出处理结果给前段JSON格式数据

* @author YANGHONGXIA

* @since 2015-01-06

*/

public String responseResult(Object obj){

JSONObject jsonObj = null;

if(obj != null){

logger.info("后端返回对象：{}", obj);

JsonConfig jsonConfig = new JsonConfig();

jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());

jsonObj = JSONObject.fromObject(obj, jsonConfig);

logger.info("后端返回数据：" + jsonObj);

if(HttpConstants.SERVICE_RESPONSE_SUCCESS_CODE.equals(jsonObj.getString(HttpConstants.SERVICE_RESPONSE_RESULT_FLAG))){

jsonObj.element(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, false);

jsonObj.element(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, "");

}else{

jsonObj.element(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, true);

String errMsg = jsonObj.getString(HttpConstants.SERVICE_RESPONSE_RESULT_MSG);

jsonObj.element(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, errMsg==null?HttpConstants.SERVICE_RESPONSE_NULL:errMsg);

}

}

logger.info("输出结果：{}", jsonObj.toString());

return jsonObj.toString();

}

/**

* 返回成功

* @param obj 输出对象

* @return 输出成功的JSON格式数据

*/

public String responseSuccess(Object obj){

JSONObject jsonObj = null;

if(obj != null){

logger.info("后端返回对象：{}", obj);

JsonConfig jsonConfig = new JsonConfig();

jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());

jsonObj = JSONObject.fromObject(obj, jsonConfig);

logger.info("后端返回数据：" + jsonObj);

jsonObj.element(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, false);

jsonObj.element(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, "");

}

logger.info("输出结果：{}", jsonObj.toString());

return jsonObj.toString();

}

/**

* 返回成功

* @param obj 输出对象

* @return 输出成功的JSON格式数据

*/

public String responseArraySuccess(Object obj){

JSONArray jsonObj = null;

if(obj != null){

logger.info("后端返回对象：{}", obj);

JsonConfig jsonConfig = new JsonConfig();

jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());

jsonObj = JSONArray.fromObject(obj, jsonConfig);

logger.info("后端返回数据：" + jsonObj);

}

logger.info("输出结果：{}", jsonObj.toString());

return jsonObj.toString();

}

/**

* 返回成功

* @param obj 输出对象

* @return 输出成功的JSON格式数据

*/

public String responseSuccess(Object obj, String msg){

JSONObject jsonObj = null;

if(obj != null){

logger.info("后端返回对象：{}", obj);

JsonConfig jsonConfig = new JsonConfig();

jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());

jsonObj = JSONObject.fromObject(obj, jsonConfig);

logger.info("后端返回数据：" + jsonObj);

jsonObj.element(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, false);

jsonObj.element(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, msg);

}

logger.info("输出结果：{}", jsonObj.toString());

return jsonObj.toString();

}

/**

* 返回失败

* @param errorMsg 错误信息

* @return 输出失败的JSON格式数据

*/

public String responseFail(String errorMsg){

JSONObject jsonObj = new JSONObject();

jsonObj.put(HttpConstants.RESPONSE_RESULT_FLAG_ISERROR, true);

jsonObj.put(HttpConstants.SERVICE_RESPONSE_RESULT_MSG, errorMsg);

logger.info("输出结果：{}", jsonObj.toString());

return jsonObj.toString();

}

}

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

[java] view
plain copy

package com.lin.common;

public class HttpConstants {

public static final String SYSTEM_ERROR_MSG = "系统错误";

public static final String REQUEST_PARAMS_NULL = "请求参数为空";

public static final String SERVICE_RESPONSE_NULL = "服务端返回结果为空";

// 服务端返回成功的标志

public static final String SERVICE_RESPONSE_SUCCESS_CODE = "AMS00000";

// 服务端返回结果的标志

public static final String SERVICE_RESPONSE_RESULT_FLAG = "returnCode";

// 服务端返回结果失败的标志

public static final String SERVICE_RESPONSE_RESULT_MSG = "errorMsg";

// 返回给前段页面成功或失败的标志

public static final String RESPONSE_RESULT_FLAG_ISERROR = "isError";

// 执行删除操作

public static final String OPERATION_TYPE_DELETE = "D";

public static final String ENUM_PATH = "com.mucfc.msm.enumeration.";

}

引用一个包的内容如下：

[java] view
plain copy

package com.lin.json;

import net.sf.json.JsonConfig;

import net.sf.json.processors.JsonValueProcessor;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.Locale;

public class JsonDateValueProcessor implements JsonValueProcessor {

/**

* datePattern

*/

private String datePattern = "yyyy-MM-dd HH:mm:ss";

/**

* JsonDateValueProcessor

*/

public JsonDateValueProcessor() {

super();

}

/**

* @param format

*/

public JsonDateValueProcessor(String format) {

super();

this.datePattern = format;

}

/**

* @param value

* @param jsonConfig

* @return Object

*/

public Object processArrayValue(Object value, JsonConfig jsonConfig) {

return process(value);

}

/**

* @param key

* @param value

* @param jsonConfig

* @return Object

*/

public Object processObjectValue(String key, Object value, JsonConfig jsonConfig) {

return process(value);

}

/**

* process

*

* @param value

* @return

*/

private Object process(Object value) {

try {

if (value instanceof Date) {

SimpleDateFormat sdf = new SimpleDateFormat(datePattern, Locale.UK);

return sdf.format((Date) value);

}

return value == null ? "" : value.toString();

} catch (Exception e) {

return "";

}

}

/**

* @return the datePattern

*/

public String getDatePattern() {

return datePattern;

}

/**

* @param pDatePattern the datePattern to set

*/

public void setDatePattern(String pDatePattern) {

datePattern = pDatePattern;

}

}

这里主要实现了能将list/map/set/数组等转换成josn，并传到前台‘

2、光这里写不行，还得配置springMVC中以json来传递数据，并配置自己的字符过滤器，要不然中文传到前台可能乱码，这里的配置比较复杂，大部分时间都花在这里，

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

[html] view
plain copy

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:p="http://www.springframework.org/schema/p"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:context="http://www.springframework.org/schema/context"

xmlns:mvc="http://www.springframework.org/schema/mvc"

xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">


<context:component-scan base-package="com.lin.controller" use-default-filters="false">

<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>

<context:include-filter type="annotation" expression="org.springframework.web.bind.annotation.ControllerAdvice"/>

</context:component-scan>



<mvc:annotation-driven validator="validator" conversion-service="conversionService" content-negotiation-manager="contentNegotiationManager">

<mvc:message-converters register-defaults="true">



<bean class="org.springframework.http.converter.StringHttpMessageConverter">

<constructor-arg value="UTF-8"/>

<property name = "supportedMediaTypes">

<list>

<bean class="org.springframework.http.MediaType">

<constructor-arg index="0" value="text"/>

<constructor-arg index="1" value="plain"/>

<constructor-arg index="2" value="UTF-8"/>

</bean>

<bean class="org.springframework.http.MediaType">

<constructor-arg index="0" value="*"/>

<constructor-arg index="1" value="*"/>

<constructor-arg index="2" value="UTF-8"/>

</bean>

</list>

</property>

</bean>



<bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">

<property name="supportedMediaTypes">

<list>

<value>application/json;charset=UTF-8</value>

</list>

</property>







</bean>

</mvc:message-converters>

<mvc:argument-resolvers>

<bean class="org.springframework.data.web.PageableHandlerMethodArgumentResolver" />

</mvc:argument-resolvers>

</mvc:annotation-driven>





<bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">



<property name="favorPathExtension" value="true"/>



<property name="favorParameter" value="true"/>

<property name="parameterName" value="format"/>



<property name="ignoreAcceptHeader" value="false"/>

<property name="mediaTypes"> 

<value>

json=application/json

xml=application/xml

html=text/html

</value>

</property>



<property name="defaultContentType" value="text/html"/>

</bean>



<mvc:default-servlet-handler />



<mvc:resources mapping="/static/**" location="/WEB-INF/static/"/>



<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"

p:prefix="/WEB-INF/view/" p:suffix=".jsp"/>





</beans>

3、Spirng中也和配置：

[html] view
plain copy

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"

xmlns:aop="http://www.springframework.org/schema/aop"

xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">


<bean id="validator" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean">

</bean>



<bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">

<property name="locations">

<list>

<value>classpath:properties/*.properties</value>



</list>

</property>

</bean>



<context:component-scan base-package="com.lin.service">

<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>

</context:component-scan>



<context:annotation-config />



<context:spring-configured />





<bean id="conversionService" class="org.springframework.format.support.FormattingConversionServiceFactoryBean"/>



<bean id="dataSource"

class="org.springframework.jdbc.datasource.DriverManagerDataSource">







<property name="driverClassName">

<value>${jdbc_driverClassName}</value>

</property>

<property name="url">

<value>${jdbc_url}</value>

</property>

<property name="username">

<value>${jdbc_username}</value>

</property>

<property name="password">

<value>${jdbc_password}</value>

</property>

</bean>



<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

<property name="basePackage"

value="com.lin.dao" />

</bean>



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

<property name="dataSource" ref="dataSource" />

<property name="mapperLocations" value="classpath*:com/lin/mapper/**/*.xml"/>

<property name="configLocation" value="classpath:mybatis/mybatis-config.xml" />



</bean>

</beans>

其中validator这个bean需要引用如下：

[html] view
plain copy

<dependency>

<groupId>javax.validation</groupId>

<artifactId>validation-api</artifactId>

<version>1.1.0.Final</version>

</dependency>

<dependency>

<groupId>org.hibernate</groupId>

<artifactId>hibernate-validator</artifactId>

<version>5.0.1.Final</version>

</dependency>

4、conroller层编写

[java] view
plain copy

package com.lin.controller;

import java.util.HashMap;

import java.util.Map;

import javax.annotation.Resource;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.data.domain.Pageable;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.servlet.ModelAndView;

import com.github.pagehelper.Page;

import com.lin.domain.User;

import com.lin.service.UserService;

import com.lin.util.PagedResult;

/**

* 功能概要：UserController

*

* @author linbingwen

* @since 2015年9月28日

*/

@Controller

public class UserController extends BaseController {

private Logger logger = LoggerFactory.getLogger(getClass());

@Resource

private UserService userService;

@RequestMapping("/")

public ModelAndView getIndex(){

ModelAndView mav = new ModelAndView("index");

User user = userService.selectUserById(1);

mav.addObject("user", user);

return mav;

}

/**

* 显示首页

* @author linbingwen

* @since 2015年10月23日

* @return

*/

@RequestMapping("/bootstrapTest1")

public String bootStrapTest1(){

return "bootstrap/bootstrapTest1";

}

/**

* 分页查询用户信息

* @author linbingwen

* @since 2015年10月23日

* @param page

* @return

*/

@RequestMapping(value="/list.do", method= RequestMethod.POST)

@ResponseBody

public String list(Integer pageNumber,Integer pageSize ,String userName) {

logger.info("分页查询用户信息列表请求入参：pageNumber{},pageSize{}", pageNumber,pageSize);

try {

PagedResult<User> pageResult = userService.queryByPage(userName, pageNumber,pageSize);

return responseSuccess(pageResult);

} catch (Exception e) {

return responseFail(e.getMessage());

}

}

}

5、最后一步就是前台的页面了，这里可以先写页面再来写controller也可以的

[html] view
plain copy

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap分页实例</title>

<link href="<%=request.getContextPath()%>/static/js/bootstrap//css/bootstrap.min.css" rel="stylesheet">

<script src="<%=request.getContextPath()%>/static/js/jQuery/jquery-2.1.4.min.js"></script>

<script src="<%=request.getContextPath()%>/static/js/bootstrap/js/bootstrap.min.js"></script>

<script src="<%=request.getContextPath()%>/static/js/bootstrap/js/bootstrap-paginator.min.js"></script>

<style type="text/css">

#queryDiv {

margin-right: auto;

margin-left: auto;

width:600px;

}

#textInput {

margin-top: 10px;

}

#tableResult {

margin-right: auto;

margin-left: auto;

width:600px;

}

td {

width:150px

}

</style>

</head>

<body>

<div id = "queryDiv">

<input id = "textInput" type="text" placeholder="请输入用户名" >

<button id = "queryButton" class="btn btn-primary" type="button">查询</button>

</div>

<form id="form1">

<table class="table table-bordered" id = 'tableResult'>

<caption>查询用户结果</caption>

<thead>

<tr>

<th>序号</th>

<th>用户名</th>

<th>密码</th>

<th>用户邮箱</th>

</tr>

</thead>

<tbody id="tableBody">

</tbody>

</table>



<div id="bottomTab"></div>

</form>

<script type='text/javascript'>

var PAGESIZE = 10;

var options = {

currentPage: 1, //当前页数

totalPages: 10, //总页数，这里只是暂时的，后头会根据查出来的条件进行更改

size:"normal",

alignment:"center",

itemTexts: function (type, page, current) {

switch (type) {

case "first":

return "第一页";

case "prev":

return "前一页";

case "next":

return "后一页";

case "last":

return "最后页";

case "page":

return page;

}

},

onPageClicked: function (e, originalEvent, type, page) {

var userName = $("#textInput").val(); //取内容

buildTable(userName,page,PAGESIZE);//默认每页最多10条

}

}

//获取当前项目的路径

var urlRootContext = (function () {

var strPath = window.document.location.pathname;

var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);

return postPath;

})();

//生成表格

function buildTable(userName,pageNumber,pageSize) {

var url = urlRootContext + "/list.do"; //请求的网址

var reqParams = {'userName':userName, 'pageNumber':pageNumber,'pageSize':pageSize};//请求数据

$(function () {

$.ajax({

type:"POST",

url:url,

data:reqParams,

async:false,

dataType:"json",

success: function(data){

if(data.isError == false) {

// options.totalPages = data.pages;

var newoptions = {

currentPage: 1, //当前页数

totalPages: data.pages==0?1:data.pages, //总页数

size:"normal",

alignment:"center",

itemTexts: function (type, page, current) {

switch (type) {

case "first":

return "第一页";

case "prev":

return "前一页";

case "next":

return "后一页";

case "last":

return "最后页";

case "page":

return page;

}

},

onPageClicked: function (e, originalEvent, type, page) {

var userName = $("#textInput").val(); //取内容

buildTable(userName,page,PAGESIZE);//默认每页最多10条

}

}

$('#bottomTab').bootstrapPaginator("setOptions",newoptions); //重新设置总页面数目

var dataList = data.dataList;

$("#tableBody").empty();//清空表格内容

if (dataList.length > 0 ) {

$(dataList).each(function(){//重新生成

$("#tableBody").append('<tr>');

$("#tableBody").append('<td>' + this.userId + '</td>');

$("#tableBody").append('<td>' + this.userName + '</td>');

$("#tableBody").append('<td>' + this.userPassword + '</td>');

$("#tableBody").append('<td>' + this.userEmail + '</td>');

$("#tableBody").append('</tr>');

});

} else {

$("#tableBody").append('<tr><th colspan ="4"><center>查询无数据</center></th></tr>');

}

}else{

alert(data.errorMsg);

}

},

error: function(e){

alert("查询失败:" + e);

}

});

});

}

//渲染完就执行

$(function() {

//生成底部分页栏

$('#bottomTab').bootstrapPaginator(options);

buildTable("",1,10);//默认空白查全部

//创建结算规则

$("#queryButton").bind("click",function(){

var userName = $("#textInput").val();

buildTable(userName,1,PAGESIZE);

});

});

</script>

</body>

</html>

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

6、最终运行结果

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

结果如下：

打印出来的一些日志：

后台返回给前台的就是json

整个工程下载（旧版本）

新版本下载：https://github.com/appleappleapple/ssm_project （日志打印使用logback,数据库配置放在POM.XML）博主推荐使用新版本，而且这里详细说明了整个工程应用的框架，数据源配置，SQL语句等等！

[b]重要的事情说三遍：请下新版本~请下新版本~请下新版本~[/b]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航