上一篇文章地址：
Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分页-笔记（一）
这篇文章将会在上一篇文章的基础上做完善，还没有看上一篇文章的可以先看下
1.引入Bootstrap,优化登入页面及注册页面
先引入bootstrap、jquery、jquery validate文件和一张背景图片
注：在引入bootstrap.js之前要先引入jquery
关于bootstrap具体如何使用，请百度学习一下：Bootstrap菜鸟教程
login.jsp完整代码，登入页面和注册页面写了一起
<%@ page contentType="text/html;charset=UTF-8"%>
<%
/*获取工程路径*/
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>登入页面</title>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!--用百度的静态资源库的cdn安装bootstrap环境-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--表单校验JS：jquery.validate-->
<script type="text/javascript" src="<%=basePath%>js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="<%=basePath%>js/login.js" ></script>
<style type="text/css">
body{background: url(<%=basePath%>img/4.jpg) no-repeat;background-size:cover;font-size: 16px;}
.form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}
#login_form{display: block;}
#register_form{display: none;}
.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
input[type="text"],input[type="password"]{padding-left:26px;}
.checkbox{padding-left:21px;}
</style>
<script type="text/javascript">
$(function () {
if('${msg}'!=''){
$("#register_form").css("display", "block");
$("#login_form").css("display", "none");
alert('${msg}');
}
});
</script>
</head>
<body>
<div class="container">
<div class="form row">
<form action="<%=basePath%>user/login" method="post" class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
<h3 class="form-title">Login to your account</h3>
<div class="col-sm-9 col-md-9">
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="LoginName" name="loginName" autofocus="autofocus" maxlength="20"/>
</div>
<div class="form-group">
<i class="fa fa-lock fa-lg"></i>
<input class="form-control required" type="password" placeholder="Password" name="password" maxlength="8"/>
</div>
<div class="form-group">
<label class="checkbox">
<input type="checkbox" name="remember" value="1"/> Remember me
</label>
<hr />
<a href="javascript:;" id="register_btn" class="">Create an account</a>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success pull-right" value="Login "/>
</div>
</div>
</form>
</div>
<div class="form row">
<form action="<%=basePath%>user/register" method="post" class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form">
<h3 class="form-title">Login to your account</h3>
<div class="col-sm-9 col-md-9">
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="Name" name="name" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="Age" name="age" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="LoginName" name="loginName" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-lock fa-lg"></i>
<input class="form-control required" type="password" placeholder="Password" id="register_password" name="password"/>
</div>
<div class="form-group">
<i class="fa fa-check fa-lg"></i>
<input class="form-control required" type="password" placeholder="Re-type Your Password" name="rpassword"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success pull-right" value="Sign Up "/>
<input type="button" class="btn btn-info pull-left" id="back_btn" value="Back"/>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
login.js，注册时做表单校验
$().ready(function() {
$("#login_form").validate({
rules: {
loginName: "required",
password: {
required: true,
minlength: 1
},
},
messages: {
loginName: "请输入登入名",
password: {
required: "请输入密码"
},
}
});
$("#register_form").validate({
rules: {
loginName: "required",
age:{
digits:true,
min:0,
max:120
},
password: {
required: true,
minlength: 1
},
rpassword: {
equalTo: "#register_password"
}
},
messages: {
name:"请输入您的姓名",
loginName: "请输入登入名",
age:{
required:"请输入您的年龄"
},
password: {
required: "请输入密码"
},
rpassword: {
equalTo: "两次密码不一样",
required: "请再次输入密码"
}
}
});
});
$(function() {
$("#register_btn").bind("click",function () {
$("#register_form").css("display", "block");
$("#login_form").css("display", "none");
});
$("#back_btn").bind("click",function () {
$("#register_form").css("display", "none");
$("#login_form").css("display", "block");
});
});
启动应用，访问localhost:8080
点击 Create an account 显示注册页面
登入试试，账号admin，密码123
2.注册功能实现
注册校验规则看login.js文件，不符合校验规则会出现对应的提示
用户注册接口
/**
* 用户注册
* @param userInfo
* @return
*/
@RequestMapping("/register")
public String register(UserInfo userInfo,Model model){
try {
UserInfo user = userInfoService.selectUserByLoginName(userInfo.getLoginName());
if(user!=null){
model.addAttribute("msg","注册失败,该登入名已存在！");
}else{
userInfoService.insertUser(userInfo);
model.addAttribute("msg","注册成功，请登入！");
}
}catch (Exception e){
model.addAttribute("msg","注册失败！");
e.printStackTrace();
}
return "/login";
}
注册一个账号试试
点击Sing up提示注册成功，现在到数据库看下
3.系统主界面设计##
垂直方向分3层，第一层显示当前用户信息和一个退出按钮，第二层是导航栏信息，第三层是数据主体部分
main.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
/*获取工程路径*/
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>主界面</title>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$("#userManager").attr("class","active");
$("#frm_right").attr("src","<%=basePath%>user/selectAll");
});
function menuClick(obj,url){
if(obj==1){
$("#userManager").attr("class","active");
$("#roleManager").attr("class","");
$("#menuManager").attr("class","");
}
if(obj==2){
$("#roleManager").attr("class","active");
$("#userManager").attr("class","");
$("#menuManager").attr("class","");
}
if(obj==3){
$("#menuManager").attr("class","active");
$("#roleManager").attr("class","");
$("#userManager").attr("class","");
}
$("#frm_right").attr("src",url);
}
function loginOut(obj){
if (confirm('您确定要退出系统吗？')) {
obj.href = "<%=basePath%>user/loginOut";
obj.onclick = "";
obj.click();
}
}
//主界面自适应高度 这个函数要在frm_right加载完了调用才有用
function mainHeight() {
var ifm= document.getElementById("frm_right");
var subWeb =document.frames ? document.frames["frm_right"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
var hg=subWeb.body.scrollHeight;
ifm.height = hg<600?600:hg;
}
}
</script>
</head>
<body>
<%--导航栏和用户信息--%>
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">您好:${userInfo.name},欢迎登入,当前账号为：${userInfo.loginName}</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)" onclick="loginOut(this)"><span class="glyphicon glyphicon-user"></span> 退出</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<div>
<ul class="nav navbar-nav" id="top" style="font-size: 16px;">
<li id="userManager"><a href="javascript:void(0)" onclick="menuClick(1,'<%=basePath%>user/selectAll')">用户管理</a></li>
<li id="roleManager"><a href="javascript:void(0)" onclick="menuClick(2,'<%=basePath%>user/roleManager')">权限管理</a></li>
<li id="menuManager"><a href="javascript:void(0)" onclick="menuClick(3,'<%=basePath%>user/menuManager')">菜单管理</a></li>
</ul>
</div>
</div>
</nav>
</div>
<%--下方主界面--%>
<div style=" text-align: center;height: 100%;">
<iframe frameborder="0" name="frm_right" id="frm_right" width="100%" scrolling="no" src="" style="margin:0px auto 0px auto; background-color: white;padding: 0px" ></iframe>
</div>
</body>
</html>
在views目录下新建userManager.jsp、roleManager.jsp、menuManager.jsp，这是三个导航栏的主界面，这里写用户管理，其他不管
userManager.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
/*获取工程路径*/
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
//主界面高度自适应
$(function () {
//top代表顶层窗口对象
top.mainHeight();
if('${msg}'!=''){
alert('${msg}');
}
});
//查询事件
function findData(){
$('#currentPage').val('1');
document.forms[0].submit();
}
//清空查询条件
function clearP(){
$("#name").val("");
$("#loginName").val("");
}
//删除用户
function del(id) {
if(confirm("确定要删除该用户吗？")){
$.ajax({
url:"<%=basePath%>user/del",
type:"post",
dataType:"json",
data:{id:id},
success:function () {
alert("删除成功！");
$("#myform").submit();
},
error:function () {//不知道为什么有时会走error
alert("删除成功！");
$("#myform").submit();
}
});
}
}
//编辑用户 先获取当前ID用户信息
function edit(id) {
$.ajax({
url:"<%=basePath%>user/selectUserById",
type:"post",
dataType:"json",
data:{id:id},
success:function (data) {
$("#editModal").modal("show");
$("#name2").val(data.name);
$("#age2").val(data.age);
$("#loginName2").val(data.loginName);
$("#rpassword2").val(data.password);
$("#password2").val(data.password);
$("#myid").val(data.id);
},
error:function () {
alert("获取用户数据失败！");
}
});
}
</script>
</head>
<body>
<div class="table-responsive">
<form class="form-inline" role="form" action="<%=basePath%>user/selectAll" method="post" id="myform">
<div style="margin-left: 80px;">
姓名：<input type="text" name="name" id="name" value="${userInfo1.name}" class="form-control" style="width: 120px;">
账号：<input type="text" name="loginName" id="loginName" value="${userInfo1.loginName}" class="form-control" style="width: 120px;">
<input type="button" onclick="findData();" class="btn btn-info" value="查询"/>
<input type="button" onclick="clearP();" class="btn btn-info" value="清空"/>
<input type="button" data-toggle="modal" data-target="#addModal" class="btn btn-info" value="新增"/>
</div>
<hr style="margin-top: 10px;"/>
<div style="margin-left: 20px;">
<table class="table table-hover">
<thead>
<tr style="text-align: center">
<th style="text-align: center">序号</th>
<th style="text-align: center">姓名</th>
<th style="text-align: center">年龄</th>
<th style="text-align: center">账号</th>
<th style="text-align: center">密码</th>
<th style="text-align: center">操作</th>
</tr>
</thead>
<tbody>
<c:if test="${!empty userList }">
<c:forEach items="${userList}" var="user" varStatus="status">
<tr style="text-align: center">
<td>${user.id}</td>
<td>${user.name }</td>
<td>${user.age }</td>
<td>${user.loginName }</td>
<td>${user.password }</td>
<td>
<button type="button" class="btn btn-success" onclick="edit('${user.id }')">编辑</button>
<button type="button" class="btn btn-danger" onclick="del('${user.id }')">删除</button>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
<div >
<jsp:include page="/common/page.jsp"/>
</div>
</div>
</form>
</div>
<!-- 新增用户模态框（Modal） -->
<form action="<%=basePath%>user/addUser" method="post" id="register_form1">
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 id="mytitle" class="modal-title" id="myModalLabel">
新增用户
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" id="name1" placeholder="Name" name="name" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="Age" id="age1" name="age" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="LoginName" id="loginName1" name="loginName" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-lock fa-lg"></i>
<input class="form-control required" placeholder="Password" id="password1" name="password"/>
</div>
<div class="form-group">
<i class="fa fa-check fa-lg"></i>
<input class="form-control required" placeholder="Re-type Your Password" id="rpassword1" name="rpassword"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="submit" class="btn btn-info">
确认
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</form>
<!-- 编辑用户模态框（Modal） -->
<form action="<%=basePath%>user/addUser" method="post" id="editModalForm">
<input type="hidden" id="myid" name="myid"/>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 id="mytitle1" class="modal-title" id="myModalLabel1">
编辑用户
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" id="name2" placeholder="Name" name="name" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="Age" id="age2" name="age" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="LoginName" id="loginName2" name="loginName" autofocus="autofocus"/>
</div>
<div class="form-group">
<i class="fa fa-lock fa-lg"></i>
<input class="form-control required" placeholder="Password" id="password2" name="password"/>
</div>
<div class="form-group">
<i class="fa fa-check fa-lg"></i>
<input class="form-control required" placeholder="Re-type Your Password" id="rpassword2" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="submit" class="btn btn-info">
确认
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</form>
</body>
</html>
roleManager.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<div style="text-align: center">这里是权限管理页面！</div>
</body>
</html>
menuManager.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<div style="text-align: center">这里是菜单管理页面</div>
</body>
</html>
UserInfoController，实现基本的增删改查功能
package com.xujd.controller;
import com.xujd.model.UserInfo;
import com.xujd.service.UserInfoService;
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.ResponseBody;
import javax.servlet.http.HttpServletRequest;
@Controller
@RequestMapping("/user")
public class UserInfoController{
@Autowired
private UserInfoService userInfoService;
/**
* 用户登入
* @param userInfo
* @return
*/
@RequestMapping("/login")
public String login(UserInfo userInfo, HttpServletRequest request, Model model){
String msg="";
//根据登入账号判断该用户是否存在
UserInfo user = userInfoService.selectUserByLoginName(userInfo.getLoginName());
if(user==null){
msg="该用户不存在！";
}else{
if(user.getPassword().equals(userInfo.getPassword())){
/*将用户信息放入session*/
request.getSession().setAttribute("userInfo",user);
//获取sessionid
String sessionId=request.getSession().getId();
model.addAttribute("sessionId",sessionId);
//进入主界面
return "/main";
}else{
msg="密码错误！";
}
}
model.addAttribute("msg",msg);
return "/login";
}
/**
* 用户注册
* @param userInfo
* @return
*/
@RequestMapping("/register")
public String register(UserInfo userInfo,Model model){
try {
UserInfo user = userInfoService.selectUserByLoginName(userInfo.getLoginName());
if(user!=null){
model.addAttribute("msg","注册失败,该登入名已存在！");
}else{
userInfoService.insertUser(userInfo);
model.addAttribute("msg","注册成功，请登入！");
}
}catch (Exception e){
model.addAttribute("msg","注册失败！");
e.printStackTrace();
}
return "/login";
}
/**
* 退出系统
* @return
*/
@RequestMapping("/loginOut")
public String loginOut(HttpServletRequest request){
//清空session
request.getSession().invalidate();
return "login";
}
/**
* 新增或编辑用户信息
* @param userInfo
* @param model
* @return
*/
@RequestMapping("/addUser")
public String addUser(UserInfo userInfo,Model model,String myid){
try {
UserInfo user = userInfoService.selectUserByLoginName(userInfo.getLoginName());
if(user!=null){
model.addAttribute("msg","操作失败,该登入名已存在！");
}else{
if(myid!=null&&!"".equals(myid)){//myid存在表示编辑操作
userInfo.setId(Integer.parseInt(myid));
userInfoService.updateUser(userInfo);
}else{
userInfoService.insertUser(userInfo);
}
model.addAttribute("msg","操作成功！");
}
}catch (Exception e){
model.addAttribute("msg","操作失败！");
e.printStackTrace();
}
return "redirect:/user/selectAll";
}
/**
* 根据ID获取用户
* @param id
* @param model
* @return
*/
@RequestMapping("selectUserById")
@ResponseBody
public UserInfo selectUserById(int id,Model model){
UserInfo userInfo = userInfoService.selectUserById(id);
return userInfo;
}
/**
* 删除用户
* @param id 用户ID
* @return
*/
@RequestMapping("/del")
@ResponseBody
public String del(int id){
try {
userInfoService.deleteUser(id);
}catch (Exception e){
e.printStackTrace();
}
return null;
}
/**
* 权限管理
* @return
*/
@RequestMapping("roleManager")
public String roleManager(){
return "roleManager";
}
/**
* 菜单管理
* @return
*/
@RequestMapping("menuManager")
public String menuManager(){
return "menuManager";
}
/**
* 获取所有用户
* @return
*/
@RequestMapping("/selectAll")
public String selectAll(Model model,UserInfo userInfo){
model.addAttribute("userList",userInfoService.selectUserByParams(userInfo));
model.addAttribute("userInfo1",userInfo);
return "/userManager";
}
}
启动应用，访问localhost：8080，并登入，可以看到主界面为：
新增用户
可以看到用户已经成功添加到数据库了
查找
编辑
点击确认
删除功能就不截图演示了，到这里用户管理的增删改查已经完成，还剩一个分页功能。
4.分页功能的实现
在model包下新增PageUtil
package com.xujd.model;
import java.util.List;
/**
* 分页工具类
*
* @author XuJD
*
*/
public class PageUtil {
/**
* 当前页 默认为1
*/
private int currentPage=1;
/**
* 每页显示的记录数 默认为10条
*/
private int pageSize = 10;
/**
* 总页数
*/
private int totalPage;
/**
* 总记录数
*/
private int totalRecord;
/**
* 起始记录
*/
private int startRow;
/**
* 终止记录
*/
private int endRow;
/**
* 上一页
*/
private int upPage;
/**
* 下一页
*/
private int downPage;
/**
* 访问路径
*/
private String accessUrl;
/**
* 页面需要显示的数据集合
*/
private List objectLists;
/**
* 当前页页码
*
* @param currentPage
*/
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getCurrentPage() {
return currentPage;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
/**
* 总页数，根据总记录数计算得出
*
* @return
*/
public int getTotalPage() {
return this.totalRecord % this.pageSize == 0 ? this.totalRecord
/ this.pageSize : (this.totalRecord / this.pageSize) + 1;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
/**
* 总记录数
*
* @return
*/
public int getTotalRecord() {
return totalRecord;
}
public void setTotalRecord(int totalRecord) {
this.totalRecord = totalRecord;
}
/**
* 起始记录行
*
* @return
*/
public int getStartRow() {
return (this.currentPage - 1) * this.pageSize;
}
/**
* 结束记录行
*
* @return
*/
public int getEndRow() {
return this.currentPage * this.pageSize;
}
/**
* 上一页
*
* @return
*/
public int getUpPage() {
return (this.currentPage == 1) ? 1 : (this.currentPage - 1);
}
/**
* 下一页
*
* @return
*/
public int getDownPage() {
return (this.currentPage == this.totalPage) ? this.totalPage
: (this.currentPage + 1);
}
/*
* 结果记录集
*/
public List getObjectLists() {
return objectLists;
}
public void setObjectLists(List objectLists) {
this.objectLists = objectLists;
}
}
改造一下selectAll接口
/**
* 获取所有用户
* @return
*/
@RequestMapping("/selectAll")
public String selectAll(Model model,UserInfo userInfo,PageUtil pageP){
//获取所有数据数量
int count = userInfoService.selectUserCount();
PageUtil page = new PageUtil();
//pageSize默认为10 currentPage默认为1
page.setPageSize(pageP.getPageSize());
page.setCurrentPage(pageP.getCurrentPage());
//mysql中用 --这里用limit a,b 去分页，数据量比较大时不推荐limit
//a表示起始行，b表示数量，如 limit 0,5 表示查5条数据，从数据库中的第一条查起
userInfo.setStartRow(page.getStartRow());
userInfo.setEndRow(page.getEndRow()-page.getStartRow());
//分页查询数据
List<UserInfo> userList = userInfoService.selectUserByParams(userInfo);
//设置所有用户数量 如果有查询条件则以查询结果数量为准，不然为所有数量
if((userInfo.getName()!=null&&!"".equals(userInfo.getName()))
||(userInfo.getLoginName()!=null&&!"".equals(userInfo.getLoginName()))){
page.setTotalRecord(userList.size());
}else{
page.setTotalRecord(count);
}
model.addAttribute("page1",page);
model.addAttribute("userList",userList);
model.addAttribute("userInfo1",userInfo);
return "/userManager";
}
在common包下新增page.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
/*获取工程路径*/
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.btn {
/*color: rgb(50, 151, 233);*/
/*background-color: #F6F6F6;*/
cursor: pointer;
float: none;
margin-left: auto;
padding: 5px 10px;
}
</style>
<script type="text/javascript">
function doSubmitForm(value) {
if (isNaN(value)) {
alert("请输入0-9的数字!");
document.getElementById('page').value = "";
return false;
} else if (value === null || value === "" || value <= 0) {
document.getElementById("currentPage").value = 1;
} else if (parseInt(value) >parseInt('${requestScope.page1.totalPage}')) {
document.getElementById("currentPage").value = '${requestScope.page1.totalPage}';
} else {
document.getElementById("currentPage").value = value;
}
document.forms[0].submit();
}
function chageSize() {
$('#currentPage').val('1');
document.forms[0].submit();
}
</script>
<table style="font-size: 12px;" align="right">
<tr>
<c:if test="${requestScope.page1.totalRecord > 0}">
<td style="border: 0;">
共<span class='totalRecord'>${requestScope.page1.totalRecord}条记录 每页
<select name="pageSize" id="pageSize" onchange="chageSize()" title="">
<option value="5" <c:if test="${requestScope.page1.pageSize == 5}">selected</c:if>>5</option>
<option value="10" <c:if test="${requestScope.page1.pageSize == 10}">selected</c:if>>10</option>
<option value="15" <c:if test="${requestScope.page1.pageSize == 15}">selected</c:if>>15</option>
<option value="20" <c:if test="${requestScope.page1.pageSize == 20}">selected</c:if>>20</option>
<option value="30" <c:if test="${requestScope.page1.pageSize == 30}">selected</c:if>>30</option>
</select>
条 第
${requestScope.page1.currentPage}
页/共
${requestScope.page1.totalPage}
页
<input type="button" class="btn addNewButton btn-info" value="首页"
onclick="<c:if test="${requestScope.page1.totalPage > 1}">
doSubmitForm(getElementById('firstPage').value);</c:if>"/>
<input type="hidden" value="${1}" id="firstPage"/>
<c:if test="${requestScope.page1.currentPage > 1 &&
requestScope.page1.currentPage <= requestScope.page1.totalPage}">
<input type="button" class="btn addNewButton btn-info" value="上一页"
onclick="doSubmitForm(getElementById('upPage').value);"/>
<input type="hidden" value="${requestScope.page1.upPage}"
id="upPage"/>
</c:if>
<c:if test="${requestScope.page1.currentPage >= 1 &&
requestScope.page1.currentPage < requestScope.page1.totalPage}">
<input type="button" class="btn addNewButton btn-info" value="下一页"
onclick="doSubmitForm(getElementById('downPage').value);"/>
<input type="hidden" value="${requestScope.page1.downPage}" id="downPage"/>
</c:if>
<input type="button" class="btn addNewButton btn-info" value="末页"
onclick="<c:if test="${requestScope.page1.totalPage > 1 }">
doSubmitForm(getElementById('endPage').value);</c:if>"/>
<input type="hidden" value="${requestScope.page1.totalPage}" id="endPage"/>
转到
<input type="text" style="width:30px;" id="page" size="2" title="">
页
<input type="button" value="GO" class="btn addNewButton btn-info"
onclick="<c:if test="${requestScope.page1.totalPage > 1}">
doSubmitForm(getElementById('page').value);</c:if>">
<input type="hidden" name="currentPage" id="currentPage"
value="${requestScope.page1.currentPage}"/>
</td>
</c:if>
<c:if test="${requestScope.page1.totalRecord == 0}">
<td colspan="99" style="border: 0;">
<div align="left">
<span style="color: red">没有符合条件的记录，请输入条件后重试!</span>
</div>
</td>
</c:if>
</tr>
</table>
在userManager页面引入page.jsp
最后改下sql,在原有的基础上做了个limit过滤
重启应用，访问localhost:8080，并登入，可以看到已经成功分页了
点击下一页，可以看到已经获取第二页数据了
对于分页还不是很清楚的小伙伴认真阅读page.jsp和PageUtil类，还有两个重要的参数：当前页（currentPage）和pageSize，因为后端都是通过这两个参数做处理去获取数据的
到这里整个系统的主界面设计、分页相关功能都已经完成了，是时候分享一波源码了
本章节源码下载地址：
CSDN下载地址：
Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分页（二）
GitHub下载地址：
Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分页（二）
GitHub下载的小伙伴记得点个star哟，万分感谢！
关于Intellij IDEA集成SSM明细请看上一篇文章
上一篇文章地址：
Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分页（一）
3071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
