1.说明，jdk8，jsp(如果用thymeleaf和vue其实也差不多，最好别直接后台返回个json，前台慢慢jquery追加，很麻烦，容易出bug，之前试过，就算只返回一个json最好要用vue)，ssm
我这里的页面中删除和添加等功能禁用了，主要是展视分页，其中按条件查询并且分页也做出来的，完整的还有个登录功能和验证码功能，这里就不展示了，有空我再传到github上
截图效果
controller
默认按5条分页，SelectVo是那个按照条件查询来给的对象
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("findListUser")
public String findListUserByPage(@RequestParam(defaultValue = "1")Integer page,
@RequestParam(defaultValue = "5")Integer rows,
SelectVo vo ,
Model model){
Pager<User> listPage = userService.findListPage(page, rows ,vo);
System.err.println(listPage);
model.addAttribute("listPage",listPage);
model.addAttribute("selectParam",vo);
return "list";
}
}SelectVo和User和Pager(分页对象)
//这是user对象
private Integer id;
private String username;
private String password;
private String gender;
private Integer age;
private String born;
private String qq;
private String email;
//这是按条件查询的vo
private String username;
private String born;
private String email;
//这是分页对象（给泛型）
public class Pager<T> {
private int totalCount; // 总记录数
private int totalPage ; // 总页码
private List<T> list ; // 每页的数据
private int currentPage ; //当前页码
private int rows;//每页显示的记录数
....
}Service(dao和sql就不给你们看了，猜应该也能猜到是啥)
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
@Override
public User findByUsernameAndPassword(User user) {
return userDao.findByUsernameAndPassword(user);
}
@Override
public Pager<User> findListPage(Integer page, Integer rows, SelectVo vo) {
Pager<User> pager = new Pager<>(); //分页对象，注意上面的参数page是前台的当前
//页，不是数据库查询的sql的limit的第一位，别搞错了
pager.setCurrentPage(page);
pager.setRows(rows);
Integer totalCount = userDao.selectCountByPage(vo);//查询总页数，根据条件
pager.setTotalCount(totalCount);
pager.setTotalPage(totalCount%rows==0?(totalCount/rows):(totalCount/rows)+1);
int start = (page-1)*rows; //这个才是limit的开始
pager.setList(userDao.selectListByPage(start,rows,vo));
return pager;
}
}sql(sql还是看一下，我怕有些新人不知道那个动态sql)
<mapper namespace="com.hunter.dao.UserDao">
<select id="findByUsernameAndPassword" resultType="user">
select * from user where username = #{username} and password=#{password}
</select>
<select id="selectCountByPage" resultType="int">
select count(*) from user
<include refid="queryWhere"></include>
</select>
<select id="selectListByPage" resultType="user">
select * from user
<include refid="queryWhere"></include>
limit #{page},#{rows}
</select>
<sql id="queryWhere">
<where>
<if test="vo.username!=null and vo.username!=''">
username like concat("%",#{vo.username},"%")
</if>
<if test="vo.born!=null and vo.born!=''">
and born like concat("%",#{vo.born},"%")
</if>
<if test="vo.email!=null and vo.email!=''">
and email like concat("%",#{vo.email},"%")
</if>
</where>
</sql>
</mapper>前台的jsp (其实很简单，主要就是利用那个模板引擎，thymeleaf和freemarker也是一样，vue也差不多，有点区别，逻辑一样)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>用户信息管理系统</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="/js/bootstrap/js/jquery-3.5.1.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="/js/bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
<script>
$(function () {
//1.获取第一个cb
$("#firstCb").click(function () {
//2.获取下边列表中所有的cb
var cbs = $("input[name='uid']")
//3.遍历
for (var i = 0; i < cbs.length; i++) {
//4.设置这些cbs[i]的checked状态 = firstCb.checked
cbs[i].checked = this.checked;
}
})
})
</script>
</head>
<body>
<div class="container">
<h3 style="text-align: center">用户信息列表</h3>
<div style="float: left;">
<form class="form-inline" action="${pageContext.request.contextPath}/findListUser" method="get">
<div class="form-group">
<label for="exampleInputName2">用户名</label>
<input type="text" id="query_name" name="username" value="${selectParam.username}" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group">
<label for="exampleInputName3">籍贯</label>
<input type="text" id="query_born" name="born" value="${selectParam.born}" class="form-control" id="exampleInputName3" >
</div>
<div class="form-group">
<label for="exampleInputEmail2">邮箱</label>
<input type="text" id="query_email" name="email" value="${selectParam.email}" class="form-control" id="exampleInputEmail2" >
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
<div style="float: right;margin: 5px;">
<a class="btn btn-primary" href="javascript:void(0)" disabled="false">添加联系人</a>
<a class="btn btn-primary" href="javascript:void(0);" disabled="false">删除选中</a>
</div>
<table id="mytable" border="1" class="table table-bordered table-hover">
<tr id="list_title" class="success">
<th><input type="checkbox" id="firstCb"></th>
<th>编号</th>
<th>用户名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:forEach items="${listPage.list}" var="user" varStatus="s">
<tr>
<td><input type="checkbox" name="uid" value="${user.id}"></td>
<td>${s.count}</td>
<td>${user.username}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.born}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
<td> <a class='btn btn-default btn-sm' href='javascript:void(0)' disabled='false'>修改</a> <a class='btn btn-default btn-sm' href='javascript:void(0)' disabled='false'>删除</a></td>
</tr>
</c:forEach>
</table>
<div style="margin-bottom: 3px;margin-top: -10px">
<nav aria-label="Page navigation" style="height: 34px">
<ul id="page_ul" class="pagination" style="margin-top: 0px">
<c:if test="${listPage.currentPage == 1}">
<li class="disabled">
<a class="btn disabled" href="${pageContext.request.contextPath}/findListUser?page=1&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
<span aria-hidden="true">首页</span>
</a>
</c:if>
<c:if test="${listPage.currentPage != 1}">
<li>
<a href="${pageContext.request.contextPath}/findListUser?page=1&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
<span aria-hidden="true">首页</span>
</a>
</c:if>
</li>
<c:if test="${listPage.currentPage == 1}">
<li class="disabled">
<a class="btn disabled" href="${pageContext.request.contextPath}/findListUser?page=${listPage.currentPage - 1}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</c:if>
<c:if test="${listPage.currentPage != 1}">
<li>
<a href="${pageContext.request.contextPath}/findListUser?page=${listPage.currentPage - 1}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</c:if>
</li>
<c:forEach begin="1" end="${listPage.totalPage}" var="i" >
<c:if test="${listPage.currentPage == i}">
<li class="active">
</c:if>
<c:if test="${listPage.currentPage != i}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findListUser?page=${i}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}">
${i}
</a>
</li>
</c:forEach>
<c:if test="${listPage.currentPage == listPage.totalPage}">
<li class="disabled">
<a class="btn disabled" href="${pageContext.request.contextPath}/findListUser?page=${listPage.currentPage +1 }&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</c:if>
<c:if test="${listPage.currentPage != listPage.totalPage}">
<li>
<a href="${pageContext.request.contextPath}/findListUser?page=${listPage.currentPage +1 }&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</c:if>
</li>
<c:if test="${listPage.currentPage == listPage.totalPage}">
<li class="disabled">
<a class="btn disabled" href="${pageContext.request.contextPath}/findListUser?page=${listPage.totalPage}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
<span aria-hidden="true">尾页</span>
</a>
</c:if>
<c:if test="${listPage.currentPage != listPage.totalPage}">
<li>
<a href="${pageContext.request.contextPath}/findListUser?page=${listPage.totalPage}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
<span aria-hidden="true">首页</span>
</a>
</c:if>
</li>
<li>
<div style="display: inline-block;font-size: 16px;line-height: 34px;color: #0c7cd5">
跳转至第
<div class="dropdown" style="display: inline-block">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
${listPage.currentPage}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<c:forEach begin="1" end="${listPage.totalPage}" var="p">
<li><a href="${pageContext.request.contextPath}/findListUser?page=${p}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}">
${p}
</a></li>
</c:forEach>
</ul>
</div>
页
</div>
</li>
</ul>
</nav>
</div>
<span style="margin-top: 5px">当前一共<span id="total" style="color: red">${listPage.totalCount}</span>条数据,共<span style="color: red" id="total_page">${listPage.totalPage}</span>页</span>
</div>
</body>
</html>
分享出来也是刚参加工作不久，之前公司不用vue，直接后台返回json，vue习惯了，jsp当时也没怎么用过，直接拿jquery去追加元素老是有各种问题，而且看起来特别乱，所以分享出来，要用的话可以直接拿去用，如果有问题，我后期上传到github，写这个文章也花了点时间，我也是新人，所以我也没太多时间来搞这些东西，要留时间学习，谢谢大家的观看，目前没发现大问题，有问题可以指出
扫一扫
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
