ssm项目之Bookstrap创建页面并分页查询
本文地址:http://www.cnblogs.com/maplefighting/p/7491866.html
一、引入bookstrap
Bookstrap: http://www.bootcss.com/
解压后,拷贝放到webapp/static下,然后引入,因为需要jquery,所以网上下了一个,放到webapp/static/js下
<!-- 引入jquery -->
<script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>
<!-- 引入样式 -->
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
然后要组件,要样式,自己在文档查后加就行了
二、引入分页插件
因为手写比较麻烦,我们可以用pagehelper,github上查一下(使用的是5.0.0)
<!-- 引入pageHelper分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
在mybatis配置文件配置下,mybatis-config.xml下,放在最后面
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>
新建EmployeeController.java
package com.sgd.crud.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.sgd.crud.bean.Employee;
import com.sgd.crud.service.EmployeeService;
/**
* 处理CRUD请求
*
*/
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
/**
* 查询员工数据(分页查询)
* @return
*/
@RequestMapping("/emps")
public String getEmps(@RequestParam(value="pn", defaultValue="1")Integer pn,Model model) {
//引入PageHelper分页插件
//在查询之前只需要调用。传入页码,以及每页大小
PageHelper.startPage(pn,5);
//startPage后面紧跟的查询就是分页查询
List<Employee> emps = employeeService.getAll();
//pageInfo包装查询后的结果,只需要将pageINfo交给页面
//封装了详细的分页信息,包括我们查询出来的数据,传入连续显示的页数
PageInfo page = new PageInfo(emps,5);
model.addAttribute("pageInfo", page);
return "list";
}
}
EmployeeService.java
package com.sgd.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.sgd.crud.bean.Employee;
import com.sgd.crud.dao.EmployeeMapper;
@Service
public class EmployeeService {
@Autowired
EmployeeMapper employeeMapper;
/**
* 查询所有员工
* @return
*/
public List<Employee> getAll() {
return employeeMapper.selectByExampleWithDept(null);
}
}
测试下
package com.sgd.crud.test;
import java.util.List;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mock.web.MockHttpServletRequest;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.MvcResult;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;
import com.github.pagehelper.PageInfo;
import com.sgd.crud.bean.Employee;
/**
* 使用spring测试模块提供的测试请求功能,测试crud
* Spring4测试的时候需要Servlet3.0的支持
*
*/
@RunWith(SpringJUnit4ClassRunner.class)
@WebAppConfiguration
@ContextConfiguration(locations= {"classpath:applicationContext.xml","file:src/main/webapp/WEB-INF/dispatcherServlet-servlet.xml"})
public class MvcTest {
//传入springmvc的ioc
@Autowired
WebApplicationContext context;
//虚拟mvc请求。获取处理结果
MockMvc mockMvc;
@Before
public void initMockMvc() {
mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
}
@Test
public void testPage() throws Exception {
//模拟请求拿到返回值
MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "1")).andReturn();
//请求成功以后,请求域中会有pageInfo,我们可以取出pageInfo验证
MockHttpServletRequest request = result.getRequest();
PageInfo pi = (PageInfo) request.getAttribute("pageInfo");
System.out.println("当前页码:"+ pi.getPageNum());
System.out.println("总页码:"+ pi.getPages());
System.out.println("总记录数:"+ pi.getTotal());
System.out.println("当前页码:"+ pi.getPageNum());
System.out.println("在页面连续显示的页码");
int[] nums = pi.getNavigatepageNums();
for (int i: nums) {
System.out.println(" "+i);
}
//获取员工数据
List<Employee> list = pi.getList();
for (Employee employee : list) {
System.out.println("ID:" + employee.getEmpId() + "姓名:"+ employee.getEmpName());
}
}
}
然后发现居然报错了,需要servlet3.0
所以我们把pom里面的servlet2.5改下3.0+ (用的是3.0.1),把2.5的删了
测试结果
ok!!!
接下来就写页面啦
三、 搭建bookstrap页面,并进行查询
需要组件http://v3.bootcss.com/components/
需要样式到最上面点样式,然后喜欢什么就选什么
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:forward page="/emps"></jsp:forward>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
引入jquery
<script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>
引入样式
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-success">(成功)Success</button>
</body>-->
</html>
list.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 以/开始的相对路径,找资源,以服务器路径为基准 -->
<!-- 引入jquery -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<!-- 引入bookstrap -->
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 搭建显示页面 -->
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<!-- 表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>department</th>
<th>操作</th>
</tr>
<tr>
<th>1</th>
<th>a</th>
<th>男</th>
<th>aaa@sgd.com</th>
<th>department</th>
<th>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
编辑
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</th>
</tr>
</table>
</div>
</div>
<!-- 分页数据 -->
<div class="row">
<!-- 分页文字信息 -->
<div class="col-md-6">
当前记录数:×××
</div>
<!-- 分页条信息 -->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#">首页</a></li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------
把页面数据查询等写完,页码以及一些逻辑判断
list.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 以/开始的相对路径,找资源,以服务器路径为基准 -->
<!-- 引入jquery -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<!-- 引入bookstrap -->
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 搭建显示页面 -->
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<!-- 表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>department</th>
<th>操作</th>
</tr>
<c:forEach items="${pageInfo.list }" var="emp">
<tr>
<th>${emp.empId }</th>
<th>${emp.empName }</th>
<th>${emp.gender=="M"?"男":"女" }</th>
<th>${emp.email }</th>
<th>${emp.department.deptName }</th>
<th>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
编辑
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</th>
</tr>
</c:forEach>
</table>
</div>
</div>
<!-- 分页数据 -->
<div class="row">
<!-- 分页文字信息 -->
<div class="col-md-6">
当前${pageInfo.pageNum}页,总${pageInfo.pages}页,总${pageInfo.total }条记录
</div>
<!-- 分页条信息 -->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="${APP_PATH }/emps?pn=1">首页</a></li>
<c:if test="${pageInfo.hasPreviousPage }">
<li>
<a href="${APP_PATH }/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
<c:if test="${page_Num==pageInfo.pageNum }">
<li class="active"><a href="#">${page_Num }</a></li>
</c:if>
<c:if test="${page_Num!=pageInfo.pageNum }">
<li><a href="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>
</c:if>
</c:forEach>
<c:if test="${pageInfo.hasNextPage }">
<li>
<a href="${APP_PATH }/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<li><a href="${APP_PATH}/emps?pn=${pageInfo.pages} ">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
暂时就完成了一部分啦!!这样整合也就成功了,还少了增加删除修改的功能
本文版权归作者本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.