SSH框架整合（实现分页查询）-白红宇的个人博客

发布日期：2021-06-29 19:32:39 浏览次数：2 分类：技术文章

本文共 12275 字，大约阅读时间需要 40 分钟。

SSH框架整合、分页查询案例

之前已经写过了SSM框架的分页查询案例，刚翻笔记时看到了以前写过的SSH分页查询的功能的笔记，这里就也再整理一下喽，送给那些在学习SSH框架的同学，SSH框架因为用的Hibernate，所以与SSM有所不同，希望这个小案例能对大家有所帮助。

关于项目

框架：

后端：spring + struts2 + hibernate5.x

前端：bootstrap + Fontawesome图标集

环境：IDEA + maven + mysql5.7 + Tomcat8

index：localhost:8080/SSH_Paging/

本项目GitHub地址：TyCoding-->SSH-Paging

我们先看一下项目目录结构

1. 首先这是maven项目，我们要要入依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

<artifactId>customer</artifactId>

<version>1.0-SNAPSHOT</version>

<name>customer Maven Webapp</name>

<url>http://maven.apache.org</url>

<build>

<finalName>customer</finalName>

<directory>${basedir}/src/main/java</directory>

<include>**/*.properties</include>

</includes>

</resource>

<directory>${basedir}/src/main/resources</directory>

</resource>

</resources>

</build>

<maven.compiler.source>1.8</maven.compiler.source>

<maven.compiler.target>1.8</maven.compiler.target>

</properties>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

</dependency>

<groupId>ch.qos.logback</groupId>

<artifactId>logback-classic</artifactId>

</dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<scope>runtime</scope>

</dependency>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-context</artifactId>

<version>4.3.10.RELEASE</version>

</dependency>

<groupId>org.apache.struts</groupId>

<artifactId>struts2-spring-plugin</artifactId>

</dependency>

<groupId>aspectj</groupId>

<artifactId>aspectjweaver</artifactId>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-orm</artifactId>

<version>4.3.10.RELEASE</version>

</dependency>

<groupId>org.hibernate</groupId>

<artifactId>hibernate-core</artifactId>

<version>5.2.10.Final</version>

</dependency>

<groupId>org.hibernate</groupId>

<artifactId>hibernate-c3p0</artifactId>

<version>5.2.10.Final</version>

</dependency>

</dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-databind</artifactId>

</dependency>

<groupId>javax.servlet</groupId>

<artifactId>javax.servlet-api</artifactId>

</dependency>

</dependency>

<groupId>org.apache.struts</groupId>

<artifactId>struts2-json-plugin</artifactId>

</dependency>

<groupId>com.alibaba</groupId>

<artifactId>fastjson</artifactId>

</dependency>

</dependencies>

</project>

2. 创建数据库

注：由于使用hibernate，我们已配置表结构由hibernate自动生成，这里就不需要我们创建了

create database ssh_paging character set utf8;

# 插入数据

# 以下代码需要在启动Tomcat运行项目后才能执行，不然还没有创建表结构，我们怎么插入数据呢。

insert into Admin values(a,'admin','admin');

insert into Customer values(1,'涂陌','123456789','你猜','不想写备注');

insert into Customer values(2,'逗瓜','123456789','你猜','不想写备注');

insert into Customer values(3,'愤青','123456789','你猜','不想写备注');

insert into Customer values(4,'咸鱼','123456789','你猜','不想写备注');

insert into Customer values(5,'小白','123456789','你猜','不想写备注');

insert into Customer values(6,'菜鸡','123456789','你猜','不想写备注');

3. PageBean的封装

package com.cutton.pojo;

import java.io.Serializable;

import java.util.List;

/**

* @author huys

* @date 18-3-10下午12:47

public class PageBean<T> implements Serializable {

//当前页

private int pageCode;

//总页数=总条数/每页显示的条数

//private int totalPage;

//总记录数

private int totalCount;

//每页显示的记录条数

private int pageSize;

//每页显示的数据

private List<T> beanList;

public int getPageCode() {

return pageCode;

}

public void setPageCode(int pageCode) {

this.pageCode = pageCode;

}

/**

* 调用getTotalPage() 获取到总页数

* JavaBean属性规定：totalPage是javaBean属性 ${pageBean.totalPage}

public int getTotalPage() {

//计算

int totalPage = totalCount / pageSize;

//说明整除

if(totalCount % pageSize == 0){

return totalPage;

}else{

return totalPage + 1;

}

/* public void setTotalPage(int totalPage) {

this.totalPage = totalPage;

}*/

public int getTotalCount() {

return totalCount;

}

public void setTotalCount(int totalCount) {

this.totalCount = totalCount;

}

public int getPageSize() {

return pageSize;

}

public void setPageSize(int pageSize) {

this.pageSize = pageSize;

}

public List<T> getBeanList() {

return beanList;

}

public void setBeanList(List<T> beanList) {

this.beanList = beanList;

}

4.1 action层 --> 处理前台模态框的编辑功能

/**

* 为模态框提供的查询功能

* 处理ajax的请求

public String search() {

try {

HttpServletRequest request = ServletActionContext.getRequest();

HttpServletResponse response = ServletActionContext.getResponse();

request.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

customer = customerService.findById(customer.getC_id());

//将数据放到Map集合中，再转换成json格式的数据

Map<String, Object> map = new HashMap<String, Object>();

map.put("c_id", customer.getC_id());

map.put("c_name", customer.getC_name());

map.put("c_telephone", customer.getC_telephone());

map.put("c_address", customer.getC_address());

map.put("c_remark", customer.getC_remark());

//将Map集合数据转换成json格式的数据

JSONObject json = JSONObject.fromObject(map);

result = json.toString();

System.out.println("这里我要传给前台页面的JSON数据是："+result);

} catch (Exception e) {

e.printStackTrace();

}

return SUCCESS;

}

说明：

这里我们就要说一下了，首先我们要明白这个功能：其实就是普通的更新数据的功能，即当我们点击编辑按钮的时候需要先ajax异步请求去后台根据点击的字段id去查询对应的数据库信息，然后将数据以JSON的格式返回给页面，最后页面解析JSON格式数据，回显在编辑框中，实现编辑。

那么，在这里是怎样进行将这个JSON格式数据返回给页面呢？我们需要看一下struts2.xml中配置：

<param name="root">result</param>

</result>

<allowed-methods>search</allowed-methods>

</action>

</package>

注意一下这个<allowed-methods>是为我们的通配符服务的，在struts2.3版本以后，如果我们没有写这个而直接使用通配符就会报错找不到映射，所以需要配置这个标签，格式：<allowed-methods>方法名1，方法名2…</allowed-methods>。详情请参考这篇博文

注意<result type="json">在struts2中是用来做Ajax请求的，所以根本没有跳转页面，写这个标签，会将你Action中的变量转换成JSON格式数据返回到页面，那么<param name="root">result</param>就会将你要返回的数据result（JSON字符串）返回给页面，在页面使用var d = eval("("+data+")"); 的方式将JSON字符串解析成JSON格式数据，然后我们就能通过ognl表达式解析获取数据，然后给指定的编辑框中赋值数据了。Ajax部分:

// 先去查询数据

$.ajax({

url: '<%=basePath%>/customer_search.do?c_id='+c_id,

type: 'POST',

dataType: 'json',

contentType: 'application/json;charset=UTF-8',

data: {},

success: function(data){

var d = eval("("+data+")");

$("#c_id").val(d.c_id);

$("#c_name").val(d.c_name);

$("#c_telephone").val(d.c_telephone);

$("#c_address").val(d.c_address);

$("#c_remark").val(d.c_remark);

$("#editModal").modal('show');

error: function(){

alert("错误");

}

});

详情参考这篇博文

4.2 action层 --> 处理分页逻辑

/**

* 分页查询相关

//属性驱动方式，当前页，默认页1

private Integer pageCode = 1;

public void setPageCode(Integer pageCode) {

if(pageCode == null){

pageCode = 1;

}

this.pageCode = pageCode;

}

//默认每页显示的数据条数

private Integer pageSize = 4;

public void setPageSize(Integer pageSize) {

this.pageSize = pageSize;

}

//分页查询的方法

public String findByPage(){

//调用service层

DetachedCriteria criteria = DetachedCriteria.forClass(Cutton.class);

//查询

PageBean<Cutton> page = cuttonService.findByPage(pageCode,pageSize,criteria);

//压栈

ValueStack vs = ActionContext.getContext().getValueStack();

//顶栈是map<"page",page对象>

vs.set("page",page);

return "page";

}

4.3 dao层 --> 处理分页逻辑

/**

* 分页查询的方法

* @param pageCode

* @param pageSize

* @param criteria

* @return

@Override

public PageBean<Cutton> findByPage(Integer pageCode, Integer pageSize, DetachedCriteria criteria) {

PageBean<Cutton> page = new PageBean<Cutton>();

page.setPageCode(pageCode);

page.setPageSize(pageSize);

//先查询总记录数 select count(*)

criteria.setProjection(Projections.rowCount());

List<Number> list = (List<Number>) this.getHibernateTemplate().findByCriteria(criteria);

if(list != null && list.size() > 0){

int totalCount = list.get(0).intValue();

//总记录数

page.setTotalCount(totalCount);

}

//要吧select count(*) 先清空变成select *...

criteria.setProjection(null);

//提供分页查询

List<Cutton> beanList = (List<Cutton>) this.getHibernateTemplate().findByCriteria(criteria,(pageCode - 1)*pageSize, pageSize);

//分页查询的数据，每页显示的数据，使用limit

page.setBeanList(beanList);

return page;

}

5. 前台JS的分页逻辑

分析

百度分页算法（每页显示10个页码）：

当点击页码7之后的页码，最前端的页码依次减少

[0] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

点击[7]

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

算法：

若总页数 <= 10 则begin=1 end=总页数

若总页数 > 10 则begin=当前页-5 end=当前页+4

头溢出: 若begin < 1 则begin=1 end=10

尾溢出: 若begin > 当前页则brgin=end-9 end=总页数

我对词项目每页显示5个页码：

若总页数 <= 5 则begin=1 end=总页数

若总页数 > 5 则begin=当前页-1 end=当前页+3

头溢出: 若begin < 1 则begin=1 end=5

尾溢出: 若begin > 当前页则brgin=end-4 end=总页数

前端代码

<form class="listForm" name="listForm" method="post" action="<%=basePath%>/cutton_findByPage.action">

<strong>共<b>${page.totalCount}</b>条记录，共<b>${page.totalPage}</b>页</strong>

<option value="4"

<c:if test="${page.pageSize == 4}">selected</c:if> >4

</option>

<option value="6"

<c:if test="${page.pageSize == 6}">selected</c:if> >6

</option>

<option value="8"

<c:if test="${page.pageSize == 8}">selected</c:if> >8

</option>

<option value="10"

<c:if test="${page.pageSize == 10}">selected</c:if> >10

</option>

</select>

<strong>到第</strong> <input type="text" size="3" id="page" name="pageCode"

class="form-control input-sm"

style="width:11%"/> <strong>页</strong>

</label>

<li>

<a href="<%=basePath%>/cutton_findByPage.action?pageCode=1"><strong>首页</strong></a>

</li>

<li>

<c:if test="${page.pageCode > 2}">

<a href="<%=basePath%>/cutton_findByPage.action?pageCode=${page.pageCode - 1}">«</a>

</c:if>

</li>

<c:choose>

<c:when test="${page.totalPage <= 5}">

<c:set var="begin" value="1"/>

<c:set var="end" value="${page.totalPage}"/>

</c:when>

<c:otherwise>

<c:set var="begin" value="${page.pageCode - 1}"/>

<c:set var="end" value="${page.pageCode + 3}"/>

<c:if test="${begin < 1}">

<c:set var="begin" value="1"/>

<c:set var="end" value="5"/>

</c:if>

<c:if test="${end > page.totalPage}">

<c:set var="begin" value="${page.totalPage -4}"/>

<c:set var="end" value="${page.totalPage}"/>

</c:if>

</c:otherwise>

</c:choose>

<c:forEach var="i" begin="${begin}" end="${end}">

<c:if test="${i == page.pageCode}">

</c:if>

<c:if test="${i != page.pageCode}">

<li>

<a href="<%=basePath%>/cutton_findByPage.action?pageCode=${i}">${i}</a>

</li>

</c:if>

</c:forEach>

<li>

<c:if test="${page.pageCode < page.totalPage}">

<a href="<%=basePath%>/cutton_findByPage.action?pageCode=${page.pageCode + 1}">»</a>

</c:if>

</li>

<li>

<a href="<%=basePath%>/cutton_findByPage.action?pageCode=${page.totalPage}"><strong>末页</strong></a>

</li>

</ul>

</div>

</form>

项目截图

项目截图和上一篇博文采用相同的页面，博主这里就懒一下咯（嘿嘿

<br/>

交流

如果大家有兴趣，欢迎大家加入我的Java交流群：671017003 ，一起交流学习Java技术。博主目前一直在自学JAVA中，技术有限，如果可以，会尽力给大家提供一些帮助，或是一些学习方法，当然群里的大佬都会积极给新手答疑的。所以，别犹豫，快来加入我们吧！

<br/>

联系

If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.

Blog@TyCoding's blog

GitHub@TyCoding

ZhiHu@TyCoding

————————————————

原文链接：https://blog.csdn.net/TyCoding/article/details/80106900

转载地址：https://daqiang.blog.csdn.net/article/details/102619646 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：litemall又一个小商城。litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端

下一篇：Struts2+Spring+MyBatis+Maven的Web整合实例(附DB数据)

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章