利用SSM框架实现简单的增删查改以及分页功能
关于什么是SSM以及SSM框架优缺点等等问题可以参见博主李奕锋的
手把手教你整合最优雅SSM框架：SpringMVC + Spring + MyBatis
开发工具
java运行环境：jdk1.8；
web服务器版本：tomcat8.5；
开发工具：idea2020.1 + navicat premium 15
数据库：mysql 8.0
源码链接
源码：CSDN无需积分下载
SQL文件：SQL文件无需积分下载
项目文件结构
主要功能如下:(增删改查以及分页)
增加功能
增加功能前端代码：
<%@ page 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>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- my style CSS -->
<link rel="stylesheet" type="text/css" href="../css/mystyles.css">
<link rel="stylesheet" type="text/css" href="../css/all.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootbox.js/5.4.0/bootbox.js"></script>
<script type="text/javascript">
function sub(){
if(!confirm("确认要提交？")){
window.event.returnValue = false;
}
}
</script></head>
<body>
<!-- 正文 创建时间 -->
<div id="home">
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="">新增用户资料</a>
</li>
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="${pageContext.request.contextPath}/Customer/getAllCustomer">所有客户信息</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userlist" role="tabpanel" aria-labelledby="profile-tab">
<div id="friendform">
<form action="${pageContext.request.contextPath}/Customer/insertCustomer" method="post" onsubmit="return sub()">
<div class="form-group row">
<label for="username" class="col-sm-2 col-form-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username">
</div>
</div>
<div class="form-group row">
<label for="work" class="col-sm-2 col-form-label">职业</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="work" name="jobs">
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 col-form-label">电话号码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone">
</div>
</div>
<div class="form-group rowcenter">
<button type="submit" class="btn btn-primary mr-3">提交</button>
<button type="button" class="btn btn-primary" onclick="history.go(-1)">返回</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Controller层代码：
/**
* 跳转到添加界面
*/
@RequestMapping(value="insert")
public String insert() {
return "addCustomer";
}
/**
* 添加客户
*/
@RequestMapping(value="/insertCustomer")
public String insertCustomer(@Validated Customer customer) {
customerService.insertCustomer(customer);
return "redirect:/Customer/getAllCustomer";
}
Mapper层代码：
<!--插入客户信息 -->
<select id="insertCustomer" parameterType="Customer">
insert into t_customer(username,jobs,phone) values (#{username},#{jobs},#{phone})
</select>
删除功能
前端代码：
<div id="home">
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="${pageContext.request.contextPath}/Customer/insert">客户添加</a>
</li>
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="${pageContext.request.contextPath}/Customer/search">客户查询</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userlist" role="tabpanel" aria-labelledby="profile-tab">
<div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">编号</th>
<th scope="col">姓名</th>
<th scope="col">职业</th>
<th scope="col">电话号码</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="customer" items="${pageInfo.list}">
<tr>
<td>${customer.id}</td>
<td>${customer.username}</td>
<td>${customer.jobs}</td>
<td>${customer.phone}</td>
<td>
<a href="${pageContext.request.contextPath}/Customer/toupdate${customer.id}" class="btn btn-outline-danger btn-sm border-0">修改</a>
<a href="${pageContext.request.contextPath}/Customer/deleteCustomerById/${customer.id}"
onclick="return del()" class="btn btn-outline-danger btn-sm border-0">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
Controller层代码：
/**
* 根据ID删除客户
*/
@RequestMapping(value="/deleteCustomerById/{id}")
public String deleteCustomerById(@PathVariable("id") int id) {
customerService.deleteCustomerById(id);
return "redirect:/Customer/getAllCustomer";
}
Mapper层代码：
<!-- 删除 -->
<delete id="deleteCustomerById" parameterType="Integer">
delete from t_customer where id = #{id}
</delete>
修改功能
前端代码：
<%@ page 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>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- my style CSS -->
<link rel="stylesheet" type="text/css" href="../css/mystyles.css">
<link rel="stylesheet" type="text/css" href="../css/all.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootbox.js/5.4.0/bootbox.js" type=""></script>
<script type="text/javascript">
function sub(){
if(!confirm("确认修改？")){
window.event.returnValue = false;
}
}
</script></head>
<body>
<!-- 正文 创建时间 -->
<div id="home">
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="">修改用户资料</a>
</li>
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="${pageContext.request.contextPath}/Customer/getAllCustomer">所有客户信息</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userlist" role="tabpanel" aria-labelledby="profile-tab">
<div id="friendform">
<form action="${pageContext.request.contextPath}/Customer/updateCustomer" method="post" onsubmit="return sub()">
<div class="form-group row">
<label for="username" class="col-sm-2 col-form-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username" value="${customer.username}">
</div>
</div>
<div class="form-group row">
<label for="work" class="col-sm-2 col-form-label">职业</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="work" name="jobs" value="${customer.jobs}">
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 col-form-label">电话号码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone" value="${customer.phone}">
</div>
</div>
<div class="form-group rowcenter">
<button type="submit" class="btn btn-primary mr-3">提交</button>
<button type="button" class="btn btn-primary" onclick="history.go(-1)">返回</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Controller层代码：
/**
* 跳转到更新界面
* 数据回传
*/
@RequestMapping(value="/toupdate{id}")
public String ToUpdate(@PathVariable int id,Model model) {
Customer customer = customerService.findCustomerById(id);
model.addAttribute("customer", customer);
return "editCustomer";
}
/**
* 更新客户
*/
@RequestMapping(value="/updateCustomer")
public String updateCustomer(Customer customer) {
customerService.updateCustomer(customer);
return "redirect:/Customer/getAllCustomer";
}
Mapper层代码：
<!-- 更新 -->
<update id="updateCustomer" parameterType="Customer">
update t_customer set jobs=#{jobs},phone=#{phone} where username=#{username}
</update>
查询功能
前端代码：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- my style CSS -->
<link rel="stylesheet" type="text/css" href="../css/mystyles.css">
<link rel="stylesheet" type="text/css" href="../css/all.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootbox.js/5.4.0/bootbox.js"></script>
<script type="text/javascript">
function search() {
if(!confirm("确认要查询？")){
window.event.returnValue = false;
}
}
</script>
</head>
<body>
<div id="home">
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="">查询用户资料</a>
</li>
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="${pageContext.request.contextPath}/Customer/getAllCustomer">所有客户信息</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userlist" role="tabpanel" aria-labelledby="profile-tab">
<div id="friendform">
<form action="${pageContext.request.contextPath}/Customer/searchCustomer" method="post" onsubmit="return sub()">
<div class="form-group row">
<label for="username" class="col-sm-2 col-form-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username">
</div>
</div>
<div class="form-group row">
<label for="jobs" class="col-sm-2 col-form-label">职业</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="jobs" name="jobs">
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 col-form-label">电话号码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone">
</div>
</div>
<div class="form-group rowcenter">
<button type="submit" class="btn btn-primary mr-3">提交</button>
<button type="button" class="btn btn-primary" onclick="history.go(-1)">返回</button>
</div>
</form>
</div>
</div>
</div>
<div class="tab-content" id="myTabContent1">
<div class="tab-pane fade show active" id="userlist1" role="tabpanel" aria-labelledby="profile-tab">
<div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">编号</th>
<th scope="col">姓名</th>
<th scope="col">职业</th>
<th scope="col">电话号码</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="customer" items="${customers}">
<tr>
<td>${customer.id}</td>
<td>${customer.username}</td>
<td>${customer.jobs}</td>
<td>${customer.phone}</td>
<td>
<a href="${pageContext.request.contextPath}/Customer/toupdate${customer.id}" class="btn btn-outline-danger btn-sm border-0">修改</a>
<a href="${pageContext.request.contextPath}/Customer/deleteCustomerById/${customer.id}"
onclick="return del()" class="btn btn-outline-danger btn-sm border-0">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Controller层代码：
/**
* 跳转到添加界面
*/
@RequestMapping(value="search")
public String search() {
return "search";
}
/**
* 根据条件查询客户
*/
@RequestMapping(value="/searchCustomer")
public String searchCustomer(@Validated Customer customer,Model model) {
List <Customer> customers = customerService.SearchCustomerByCondition(customer);
model.addAttribute("customers", customers);
return "search";
}
Mapper层代码：
<!-- 多条件查询用户列表 -->
<select id="SearchCustomerByCondition" resultType="Customer" parameterType="Customer">
select * from t_customer where username like CONCAT('%',#{username},'%')
<if test='jobs!=null and jobs!=" "'>
and jobs like CONCAT('%',#{jobs},'%')
</if>
<if test='phone!=null and phone!=" "'>
and phone like CONCAT('%',#{phone},'%')
</if>
</select>
分页功能
前端代码：
<!-- 分页 -->
<nav aria-label="Page navigation example">
总共${pageInfo.totalPage} 页，共${pageInfo.totalCount} 条数据。
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="${pageContext.request.contextPath}/Customer/findAllByPage?currentPage=1" aria-label="Previous">
<span aria-hidden="true">首页</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="${pageContext.request.contextPath}/Customer/findAllByPage?currentPage=${pageInfo.currentPage-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pageInfo.totalPage}" var="pageNum">
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/Customer/findAllByPage?currentPage=${pageNum}">${pageNum}</a></li>
</c:forEach>
<li class="page-item">
<a class="page-link" href="${pageContext.request.contextPath}/Customer/findAllByPage?currentPage=${pageInfo.currentPage+1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="${pageContext.request.contextPath}/Customer/findAllByPage?currentPage=${pageInfo.totalPage}" aria-label="Previous">
<span aria-hidden="true">尾页</span>
</a>
</li>
</ul>
</nav>
Controller层代码：
/**
* 分页查询
*/
@RequestMapping("/findAllByPage")
public ModelAndView findAllByPage(HttpServletRequest request) {
ModelAndView mv = new ModelAndView();
int currentPage = Integer.parseInt(request.getParameter("currentPage"));
//获取分页信息
PageInfo <Customer> pageInfo = customerService.findByPage(currentPage);
// 将数据返回到页面上
mv.setViewName("allCustomer");
mv.addObject("pageInfo", pageInfo);
return mv;
}
Mapper层代码：
<!--获取总数据量-->
<select id="getTotal" resultType="Integer">
select count(*) from t_customer
</select>
<!--获取当前页的信息-->
<select id="findByPage" parameterType="int" resultType="Customer">
select * from t_customer limit #{start},#{size}
</select>
PageInfo类代码:
package com.test.model;
import java.util.List;
public class PageInfo<T> {
private List<T> list;
private int totalPage;
private int totalCount;
private int size;
private int currentPage;
public PageInfo() {
}
public PageInfo(List<T> list, int totalPage, int totalCount, int size, int currentPage) {
this.list = list;
this.totalPage = totalPage;
this.totalCount = totalCount;
this.size = size;
this.currentPage = currentPage;
}
public List<T> getList() {
return list;
}
public int getTotalPage() {
return totalPage;
}
public int getTotalCount() {
return totalCount;
}
public int getSize() {
return size;
}
public int getCurrentPage() {
return currentPage;
}
public void setList(List<T> list) {
this.list = list;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public void setSize(int size) {
this.size = size;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
}
版权声明：本文为weixin_43305485原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。