JAVA-----SSM框架-----增删改查+分页
网上看了几个分页,大多代码掺在一起,不易初学者学习,今天搞一个小Demo写一下分页,大家不懂的随时留言问我!
首先我们把环境搭建一下: https://blog.csdn.net/qq_39372821/article/details/88427687
用插件把数据库实体类自动生成一下:https://blog.csdn.net/qq_39372821/article/details/88378179
当然没有的话自己手写也是没问题的 为了初学者的提升 此时我们用的比较简单的两张表
这是数据库,需要的小伙伴可以直接下载: https://pan.baidu.com/s/1R09QW6Oce7QIH8tUzNR9IA 提取码:nix5
这大概是我的项目结构:
下面开始进入主题:首先我们在多方表操作 TblEmpMapper.xml 写上全查
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hp.mapper.TblEmpMapper">
<resultMap id="BaseResultMap" type="com.hp.pojo.TblEmp">
<id column="emp_id" jdbcType="INTEGER" property="empId"/>
<result column="emp_name" jdbcType="VARCHAR" property="empName"/>
<result column="gender" jdbcType="CHAR" property="gender"/>
<result column="email" jdbcType="VARCHAR" property="email"/>
<result column="d_id" jdbcType="INTEGER" property="dId"/>
</resultMap>
<!--合并两张表的属性-->
<resultMap id="EmpAndDeptRM" type="com.hp.pojo.TblEmp" extends="BaseResultMap">
<association property="tblDept" javaType="com.hp.pojo.TblDept">
<id column="dept_id" jdbcType="INTEGER" property="deptId"/>
<result column="dept_name" jdbcType="VARCHAR" property="deptName"/>
</association>
</resultMap>
<sql id="Base_Column_List">
emp_id, emp_name, gender, email, d_id
</sql>
<!--封装两张表的属性 用于替换* (优化sql)-->
<sql id="EmpAndDept">
e.emp_id, e.emp_name, e.gender, e.email, e.d_id
,d.dept_id, d.dept_name
</sql>
<sql id="Example_Where_Clause">
<where>
<foreach collection="oredCriteria" item="criteria" separator="or">
<if test="criteria.valid">
<trim prefix="(" prefixOverrides="and" suffix=")">
<foreach collection="criteria.criteria" item="criterion">
<choose>
<when test="criterion.noValue">
and ${criterion.condition}
</when>
<when test="criterion.singleValue">
and ${criterion.condition} #{criterion.value}
</when>
<when test="criterion.betweenValue">
and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
</when>
<when test="criterion.listValue">
and ${criterion.condition}
<foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
#{listItem}
</foreach>
</when>
</choose>
</foreach>
</trim>
</if>
</foreach>
</where>
</sql>
<!--多表联查 -->
<select id="selectByExampleWithDept" parameterType="com.hp.pojo.TblEmpExample" resultMap="EmpAndDeptRM">
SELECT
<if test="distinct">
distinct
</if>
<include refid="EmpAndDept"/>
FROM tbl_emp e JOIN tbl_dept d
ON e.d_id=d.dept_id
<if test="_parameter != null">
<include refid="Example_Where_Clause" />
</if>
<if test="orderByClause != null">
order by ${orderByClause}
</if>
</select>
</mapper>
Mapper接口里,写上全查方法
package com.hp.mapper;
import com.hp.pojo.TblEmp;
import com.hp.pojo.TblEmpExample;
import java.util.List;
public interface TblEmpMapper {
/*两张表查询所有信息*/
List<TblEmp> selectByExampleWithDept(TblEmpExample example);
}
接下来去service接口也写上全查的方法
package com.hp.service;
import com.hp.pojo.TblEmp;
import com.hp.pojo.TblEmpExample;
import java.util.List;
public interface TblEmpService {
List<TblEmp> selectByExampleWithDept(TblEmpExample example);
}
对应的service实现类 @Service记得加上哦
package com.hp.service;
import com.hp.mapper.TblEmpMapper;
import com.hp.pojo.TblEmp;
import com.hp.pojo.TblEmpExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class TblEmpServiceImpl implements TblEmpService {
/*声明Mapper*/
@Autowired(required = false)
private TblEmpMapper tblEmpMapper;
/*两表查询*/
@Override
public List<TblEmp> selectByExampleWithDept(TblEmpExample example) {
return tblEmpMapper.selectByExampleWithDept(new TblEmpExample());
}
}
接下来我们把分页的工具类给搞定
Msg
package com.hp.util;
import java.util.HashMap;
import java.util.Map;
/**
* 返回得 状态 封装
*/
public class Msg {
//状态码 200-成功 400-失败
private int code;
//提示信息
private String msg;
//用户要返回给浏览器的数据
private Map<String, Object> extend = new HashMap<String, Object>();
public static Msg success(){
Msg result = new Msg();
result.setCode(200);
result.setMsg("处理成功!");
return result;
}
public static Msg fail(){
Msg result = new Msg();
result.setCode(400);
result.setMsg("处理失败!");
return result;
}
public Msg add(String key, Object value){
this.getExtend().put(key, value);
return this;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
最后就是去我们 Controller层作业了
package com.hp.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.hp.pojo.TblEmp;
import com.hp.pojo.TblEmpExample;
import com.hp.service.TblEmpService;
import com.hp.util.Msg;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class TblEmpController {
/*声明servic*/
@Autowired(required = false)
private TblEmpService tblEmpService;
/*用来找到emp这个jsp*/
@RequestMapping("/emp/listEmp")
public String empAll() {
return "listEmp";
}
@ResponseBody
@RequestMapping("/emp/empAllPage")
public Msg empAllPage(@RequestParam(value = "pageNumber", defaultValue = "1") Integer pageNumber) {
//分页
PageHelper.startPage(pageNumber, 8);
//封装分页
List<TblEmp> emps = tblEmpService.selectByExampleWithDept(new TblEmpExample());
PageInfo<TblEmp> pageInfo = new PageInfo<>(emps, 6);
return Msg.success().add("pageInfo", pageInfo);
}
}
此时我们运行,出现以下状态码200即为测试成功 ,全查跟后台分页出来啦!!
------------------------------------------------------------ 2019/03/21更新前台分页样式------------------------------------------------------------------
listEmp.jsp(此时我们用的是bootstrap)
bootstrap-3.3.7-dist:https://pan.baidu.com/s/1Isg4Ay7KGar30WA_FBEMkA 提取码:og5g
jquery-1.12.4.min:https://pan.baidu.com/s/1MhFa9heAVJHHTs0hWBOcFg 提取码:2nw5
首先我们导入以上资源,放入我们的res文件夹,随后引用资源,开始操作
用idea的朋友记得引入头文件哦 ↓ ↓ ↓
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<title>Title</title>
<base href="<%=basePath%>">
</head>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<title>员工管理页面</title>
<base href="<%=basePath%>">
<%--引入bootstrap 引入他的 js 和 css 样式
因为bootstrap是基于jQuery的 所以还要引入 jQuery
而且还必须要在所有js的前面放
--%>
<script type="text/javascript" src="res/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="res/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link href="res/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<%--页面一打开, 就执行 ajax--%>
<script>
var currentPage; //代表当前页 全局变量
// 执行 ajax
$(function () { //页面一出现 就执行 .
alert("页面一出现 就执行我");
// 先访问第一页
to_page(1);
});
//实现to_page方法
function to_page(pageNumber) {
//此刻pageNumber=1 把1通过ajax传入后台
$.ajax({
url: "emp/empAllPage",//ajax访问的网址
type: "POST", //ajax访问的方式
data: {pageNumber: pageNumber},//ajax的数据 参数
success: function (result) {//请求成功
//此时我们习惯性打桩
console.log(result);//此时去页面 f12 看数据是否获取成
//拆解 result 这个 result里面包括了 分页数据 总条数
//一页多少条 分页按钮
//1.拆解result的json数据 让他显示员工的数据 就是填充哪个表格
build_emps_table(result);//现在我们完善这个方法 result此时是一串json数据
//2.解析分页信息
build_page_info(result);
//3.解析 分页按钮
build_page_nav(result);
}
});
}
function build_emps_table(result) {
//因为每发送一次ajax请求就会填充一次表格 所以此时我们将表格清空
$("#emps_table tbody").empty();
/* var empName = $(this).parents("tr").find("td:eq(2)").text();//获得 名字
var empId = $(this).attr("del-id");*/
var emps = result.extend.pageInfo.list;//此时是当前页的所以数据,是个array 接下里我们来解析array
//解析jQuery中的数组 each() 遍历
$.each(emps, function (index, item) {
var checkBokTd = $("<td> <input type='checkbox' class='check_item'/></td>");
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender == 'M' ? "男" : "女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>").append(item.tblDept.deptName);
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append( $("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
//修改 找到这个id
editBtn.attr("edit-id", item.empId);
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append(
$("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
//删除找到这个id
delBtn.attr("del-id", item.empId);
var btnTd = $("<td></td>").append(editBtn).append(delBtn);
$("<tr></tr>").append(checkBokTd).append(empIdTd).append(empNameTd)
.append(genderTd).append(emailTd).append(deptNameTd).append(btnTd)
.appendTo("#emps_table tbody");
});
}
//显示分页信息
function build_page_info(result) {
$("#page_info_area").empty();
//解析一下分页信息
$("#page_info_area").append("总共" + result.extend.pageInfo.total + "条,当前" +
result.extend.pageInfo.pageNum + "页");
currentPage = result.extend.pageInfo.pageNumber;
}
//分页按钮
// 搞 分页按钮.
function build_page_nav(result) {
$("#page_nav_area").empty();
// 1.从 json中 拿到 分页数据
//1. 构建UL
var ul = $("<ul></ul>").addClass("pagination");
//首页
var firstPageLi = $("<li></li>").append($("<a></a>").append("首页"));
//上一页
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
// 分页条上的 按钮
if (result.extend.pageInfo.hasPreviousPage == false) {
//不能点
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
} else {
firstPageLi.click(function () {
// 首页, 也就是 执行第一页.
to_page(1);
});
//上一页的点击事件
prePageLi.click(function () {
//参数里应写 当前页-1
to_page(result.extend.pageInfo.pageNum - 1);
});
}
// 下一页
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
//末页
var lastPageLi = $("<li></li>").append($("<a></a>").append("最后一页"));
//做判断
if (result.extend.pageInfo.hasNextPage == false) {
//不能点
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
} else {
nextPageLi.click(function () {
// 当前页 + 1
to_page(result.extend.pageInfo.pageNum + 1);
});
//上一页的点击事件
lastPageLi.click(function () {
//参数里应写 当前页-1
to_page(result.extend.pageInfo.pages);
});
}
ul.append(firstPageLi).append(prePageLi);
// 搞中的 1 2 3 4 5 6
//重点 怎么遍历 1 要遍历的数组. 2参: 遍历出来的 单个值
$.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
var numLi = $("<li></li>").append($("<a></a>").append(item));
// 做一个判断 让他变身 如果是 当前页 变身蓝色 如果不是当前页 不变身
if (item == result.extend.pageInfo.pageNum) {
// ** 变身
numLi.addClass("active");
}
numLi.click(function () {
to_page(item);
});
ul.append(numLi); // 把 按钮 添加到 ul 上
});
// 添加 nextPageLi . lastPageli
ul.append(nextPageLi).append(lastPageLi);
// 把 UL 添加到 导航条
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
</script>
</head>
<body>
<h1>SSM-分页</h1>
<%--按钮--增加 删除--%>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button type="button" class="btn btn-primary" id="emp_add_modal_btn">增加</button>
<button type="button" class="btn btn-danger" id="emp_delete_modal_btn">删除</button>
</div>
</div>
<%--显示表格--%>
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>
<input type="checkbox" id="check_all"/>
</th>
<th>
编号
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
邮箱
</th>
<th>
部门名称
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<%--显示分页信息--%>
<div class="row">
<%--分页信息 条数信息 --%>
<div class="col-md-6" id="page_info_area"></div>
<%--分页按钮 nav 代表 导航条的意思 --%>
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
</body>
</html>
我们附上一张效果图--
OK!!! 我们这个分页的*也做好啦!
这是此项目,一个SSM增删改查带分页的,需要的小伙伴可以下载一下: https://download.csdn.net/download/qq_39372821/11046182