Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分页（二）
上一篇文章地址：
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+"/";
%>
登入页面
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+"/";
%>
主界面
<%--导航栏和用户信息--%>
<%--下方主界面--%>
在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+"/";
%>
roleManager.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Title
这里是权限管理页面！
menuManager.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Title
这里是菜单管理页面
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 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+"/";
%>
共${requestScope.page1.totalRecord}条记录 每页
条 第
${requestScope.page1.currentPage}
页/共
${requestScope.page1.totalPage}
页
1}">
doSubmitForm(getElementById('firstPage').value);"/>
1 }">
doSubmitForm(getElementById('endPage').value);"/>
转到
页
1}">
doSubmitForm(getElementById('page').value);">
没有符合条件的记录，请输入条件后重试!
在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+分页（一）