<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><!-- DispatchServlet 前端控制器配置 --><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><!-- 加载所有的配置文件 applicationContext.xml里加载了全部文件 --><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></init-param><!-- 当值为0或者大于0时，表示容器在应用启动时就加载这个servlet;反则需要时加载 --><load-on-startup>1</load-on-startup></servlet><!-- 映射路径 --><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping><!-- 乱码过滤 --><filter><filter-name>encodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>utf-8</param-value></init-param></filter><!-- 过滤路径：/* 全部过滤 --><filter-mapping><filter-name>encodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- Session --><session-config><session-timeout>15</session-timeout></session-config>
</web-app>

到此，本系统的所有配置就已经完毕，SSM整合也到此完成了，接下来就可以开始后端功能的编写了。

4、持久层(Mapper) 编写

我们先来编写持久层，也就是操作数据库的功能，不过在编写之前，我们得先创建一个与数据表对应的实体类， 具体代码如下：

package pojo;
/*** 水果库存实体类*/
public class Fruit {private Integer id; //编号private String name; //名称private Float price; //单格private Integer count; //数量private String remark; //广告词private String producer; //产地//构造public Fruit() {}public Fruit(Integer id, String name, Float price, Integer count, String remark, String producer) {this.id = id;this.name = name;this.price = price;this.count = count;this.remark = remark;this.producer = producer;}//getting、settingpublic Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Float getPrice() {return price;}public void setPrice(Float price) {this.price = price;}public Integer getCount() {return count;}public void setCount(Integer count) {this.count = count;}public String getRemark() {return remark;}public void setRemark(String remark) {this.remark = remark;}public String getProducer() {return producer;}public void setProducer(String producer) {this.producer = producer;}@Overridepublic String toString() {return "Fruit{" +"id=" + id +", name='" + name + '\'' +", price=" + price +", count=" + count +", remark='" + remark + '\'' +", producer='" + producer + '\'' +'}';}
}

数据映射已经编写完成，接下来就是功能实现了，持久层代码如下：

package mapper;import org.apache.ibatis.annotations.*;
import org.apache.ibatis.session.RowBounds;
import pojo.Fruit;import java.util.List;
/*** 操作数据库的接口*/
public interface FruitMapper {/* 查询所有数据 */@Select("select fid id, fname name,price,fcount count,remark,producer from t_fruit")List<Fruit> findAll(RowBounds rowBounds);/* 查询总数据量 */@Select("select count(*) from t_fruit")int fruitCount();/* 新增水果库存 数据库实现了id自增策略，不用写id;字段名要和数据库一致，不用写别名 */@Insert("insert into t_fruit(fname,price,fcount,remark,producer) values (#{name},#{price},#{count},#{remark},#{producer})")int addFruit(Fruit fruit);//删除库存@Delete("delete from t_fruit where fid=#{id}")int delFruit(Integer id);//修改库存@Update("update t_fruit set fname=#{name}, price=#{price},fcount=#{count},remark=#{remark},producer=#{producer} where fid=#{id}")int updateFruit(Fruit fruit);//根据水果名称查询水果信息@Select("select fid id, fname name,price,fcount count,remark,producer from t_fruit where fname=#{fruitName}")Fruit findByName(String fruitName);
}

5、业务层(Service) 编写

到了业务层，由于本系统的业务还是比较简单的，直接调用持久层就可以了：

package service;import pojo.Fruit;import java.util.List;
/*** 业务层接口*/
public interface FruitService {/* 逻辑分页 */List<Fruit> fruitPages(Integer pageNum);/* 查询总条数 */int fruitCount();//新增库存int saveFruit(Fruit fruit);//删除库存int delFruit(Integer id);//修改库存int updateFruit(Fruit fruit);//根据水果名称查询水果信息Fruit findByName(String fruitName);
}

业务实现类如下：

package service.impl;import mapper.FruitMapper;
import org.apache.ibatis.session.RowBounds;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import pojo.Fruit;
import service.FruitService;import javax.annotation.Resource;
import java.util.List;/*** 水果库存业务具体实现*/
@Service
public class FruitServiceImpl implements FruitService {//依赖注入持久层@Resourceprivate FruitMapper fruitMapper;/*** 利用RowBounds分页查询（逻辑分页）* @param pageNum* @return*/@Overridepublic List<Fruit> fruitPages(Integer pageNum) {//分页 公式：(当前页-1)*当前页条数RowBounds rowBounds = new RowBounds((pageNum-1)*5,5);return fruitMapper.findAll(rowBounds);}/*** 获取水果库存总数量* @return*/@Overridepublic int fruitCount() {return fruitMapper.fruitCount();}/*** 新增水果库存业务* @param fruit* @return*/@Override@Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)public int saveFruit(Fruit fruit) {int flg = fruitMapper.addFruit(fruit);return flg;}/*** 删除操作* @param id* @return*/@Overridepublic int delFruit(Integer id) {return fruitMapper.delFruit(id);}/*** 修改库存* @param fruit*/@Override@Transactional(propagation = Propagation.REQUIRED,rollbackFor = Exception.class)public int updateFruit(Fruit fruit) {return fruitMapper.updateFruit(fruit) ;}/*** 根据水果名称查询水果库存* @param fruitName 水果名称* @return*/@Overridepublic Fruit findByName(String fruitName) {Fruit fruit = fruitMapper.findByName(fruitName);return fruit;}
}

6、控制层(Controller) 编写

最后就到了控制层的编写，这里是直接与前端交互的接口，具体代码如下：

package controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import pojo.Fruit;
import service.FruitService;import javax.annotation.Resource;
import java.util.List;@Controller
@RequestMapping("/fruit")
public class FruitController {//依赖注入业务层@Resourceprivate FruitService fruitService;/*** 访问首页* @return*/@RequestMapping("/index")public String index(){return "/index";}/*** 查询水果库存列表* @param pageNum* @param model 存储到域中* @return*/@GetMapping("/all/{pageNum}")public String findAll(@PathVariable(required = false) Integer pageNum, Model model){List<Fruit> fruitList = fruitService.fruitPages(pageNum);model.addAttribute("fruitList",fruitList);//查询总条数int count = fruitService.fruitCount();model.addAttribute("count",count);//页数model.addAttribute("pageNum",pageNum);System.out.println(model.getAttribute("fruitList"));return "food"; //指定页面}/*** 新增水果库存* produces = "application/json;charset=UTF-8"：防止响应数据乱码* @return msg 响应数据*/@PostMapping(value = "/addFruit", produces = "application/json;charset=UTF-8")@ResponseBodypublic String addFruit(Fruit fruit){//响应信息String msg = "添加水果库存成功！";//在添加水果库存之前查询一下水果名称是否唯一Fruit fruit1 = fruitService.findByName(fruit.getName());if (fruit1 != null){//存在//响应提示语给前端msg = "该水果名称已注册，不可复用！";return msg;}//调用服务层进行新增水果库存int flg = fruitService.saveFruit(fruit);if (flg < 1){msg = "添加水果库存失败，请联系管理员！";}return msg;}/*** 修改水果库存* @param fruit* @return msg 响应数据*/@PostMapping(value = "/updateFruit", produces = "application/json;charset=UTF-8")@ResponseBodypublic String updateFruit(Fruit fruit){//响应信息String msg = "水果库存修改失败！";//传进来的库存不为空并且id不为空if (fruit != null && fruit.getId() != null){//在添加水果库存之前查询一下水果名称是否唯一Fruit dbFruit = fruitService.findByName(fruit.getName());System.out.println("传进来:"+fruit+"\n数据库中:"+dbFruit);//校验水果名称是否已注册但排除本身if (dbFruit != null && dbFruit.getId() != fruit.getId()){//存在//响应提示语给前端msg = "该水果名称已注册，不可复用！";return msg;}//校验完毕，进行修改操作int flg = fruitService.updateFruit(fruit);if (flg >= 1)  msg = "水果库存修改成功！";}System.out.println("水果："+fruit);return msg;}/*** 删除水果库存* @param id* @return*/@GetMapping(value = "/delFruit", produces = "application/json;charset=UTF-8")@ResponseBodypublic String deleteFruit(Integer id){//响应信息String msg = "删除水果库存成功！";if (null == id){msg = "请选择待删除的库存";return msg;}//调用服务层进行删除水果库存int flg = fruitService.delFruit(id);if (flg < 1){msg = "删除水果库存失败，请联系管理员！";}return msg;}
}

到此，后端的代码就已经编写完成了，我们来看一下整体结构图：

五、前端篇

1、页面结构HTML

1.1 index页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水果库存系统</title><style>h1{padding: 5px 10px 8px 10px;background-color: blanchedalmond;font-family: kaiti;display: inline-block;border-radius: 5px;margin: 0;}h2{text-align: center;padding-top: 20px;}h2 a{text-decoration: none;}</style>
</head>
<body><h1>水果库存系统</h1><h2><a th:href="@{/fruit/all/1}">进入水果库存详情页>>></a></h2>
</body>
</html>

1.2 food页面：

<!DOCTYPE html>
<!-- xmlns:th="http://www.thymeleaf.org" Thymeleaf的声明，有语法提示，th开头的都是Thymeleaf语法 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水果库存</title><!-- 路径前面要加/ 当前目录 --><link rel="stylesheet" type="text/css" href="./css/food.css" th:href="@{/css/food.css}" />
</head><body><div id="div_conteiner"><div id="div_fruit_list"><table id="tbl_fruit"><thead><tr><th class="w16">名称</th><th class="w16">单价</th><th class="w16">数量</th><th class="w16">广告词</th><th class="w16">产地</th><th class="w16">操作</th></tr></thead><tbody><!-- 从服务器中获取数据 --><tr th:each="fruit,item:${fruitList}" th:id="${item.count}"><!-- 隐藏域 存放水果编号 --><input type="hidden" name="id" th:id="|id${item.count}|" th:value="${fruit.id}"><td th:text="${fruit.name}" th:class="|name${item.count}|">西瓜</td><td th:text="${fruit.price}" th:class="|price${item.count}|">3</td><td th:text="${fruit.count}" th:class="|count${item.count}|">60</td><td th:text="${fruit.remark}" th:class="|remark${item.count}|">描述</td><td th:text="${fruit.producer}" th:class="|producer${item.count}|">产地</td><td><img src="./images/del.jpg" th:src="@{/images/del.jpg}" th:id="${item.count}" alt="删除" class="delImg"/></td></tr><tr th:if="${#lists.isEmpty(fruitList)}"><td colspan="6">对不起，暂无数据！</td></tr></tbody><tfoot><tr><td colspan="6"><span>当前第&nbsp;<span style="color: coral; size: 1.5rem; font-weight: bold" th:text="${pageNum}">1</span>&nbsp;页&nbsp;&nbsp;&nbsp;&nbsp;</span><a th:if="${pageNum>1}" th:href="@{/fruit/all/{pageNum}(pageNum=${pageNum}-1)}">上一页</a><a th:if="${pageNum==1}" th:disabled="true">上一页</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span><a th:href="@{/fruit/all/{pageNum}(pageNum=${pageNum}+1)}">下一页</a><span>&nbsp;&nbsp;总条数：<strong style="color: coral; size: 1.5rem;" th:text="${count}"></strong></span></td></tr></tfoot></table><hr color="black"/><div id="add_fruit_div"><table id="add_fruit_tbl"><tr><td>名称：</td><td><input type="text" id="name" /></td></tr><tr><td>单价：</td><td><input type="text" id="price"/></td></tr><tr><td>数量：</td><td><input type="text" id="count"/></td></tr><tr><td>广告词：</td><td><input type="text" id="remark"/></td></tr><tr><td>产地：</td><td><input type="text" id="producer"/></td></tr><th colspan="2"><input type="button" value="添加" id="addOrUpdateBtn" class="addBtn"/></th></table></div></div></div>
</body>
</html>

【说明】以上都是使用了Thymeleaf模板引擎，我们再把CSS样式编写完毕，就可以访问一下页面试试效果了。

html{width: 100%;height: 100%;
}
body{margin: 0;padding: 0;background:url(../images/bg.jpg) center no-repeat;background-size: cover;}
/*所有div设置*/
div{position: relative;float: left;
}/*页面数据主体*/
#div_conteiner{width: 80%;height: 100%;margin-left: 13%;float: left;margin-top: 3%;}
/*数据列表大盒子*/
#div_fruit_list{width: 89%;text-align: center;background-color: rgb(237, 249, 255);border-radius: 20px;padding-top: 2%;padding-bottom: 2%;
}
/*搜索栏*/
.search{margin-bottom: 5px;margin-left: 9%;
}
.search input{font-size: 1.2rem;padding: 3px;border-radius: 5px 0 0 5px;outline: none;border: lightgray solid 2px;}
.search button{font-size: 1.2rem;border-radius: 0 5px 5px 0;border: lightgray solid 2px;padding-bottom: 3px;background-color: #1371c3;color: white;cursor: pointer;position: relative;right: 7px;
}/*显示数据列表*/
#tbl_fruit{width: 80%;text-align: center;line-height:45px;margin-left: 9%;border-radius: 20px;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{border: 1px solid gray;border-collapse: collapse;
}
.w16{width: 16%;
}
.delImg{width: 30px;height: 30px;vertical-align: middle; /* 图片垂直居中 */cursor: pointer;
}
thead{font-size: 1.3rem;  
}#add_fruit_div{width: 40%;margin-left: 30%;
}
#add_fruit_tbl{width: 80%;margin-top: 5px;margin-left: 5%;border-collapse: collapse;
}
#add_fruit_tbl,#add_fruit_tbl tr,#add_fruit_tbl th,#add_fruit_tbl td{border: 1px solid lightgray;text-align: center;
}/*添加和修改*/
#add_fruit_tbl input{outline: none;
}
#add_fruit_tbl td input[type='text']{width: 90%;padding: 4px;
}
/*添加修改按钮样式*/
.addBtn{font-size: 1.2rem;padding: 3px 16px;
}/*a链接禁用*/
a[disabled] {pointer-events: none;cursor: default;text-decoration: none;color: #999;
}

//当鼠标悬浮时，显示背景颜色
function showBGColor(e) {//获取事件源  event：当前发生的事件 tagName：获取当前的元素// alert(event.srcElement.tagName)// alert(window.event.srcElement.tagName);//判断是否存在该元素if (window.event && window.event && window.event.srcElement.tagName == "TD") {var td = window.event.srcElement;var tr = td.parentElement;//设置样式tr.style.backgroundColor = "lightblue";//获取tr中所有单元格var tds = tr.cells;for (var i = 0; i < tds.length; i++) {tds[i].style.color = "white";}}
}//鼠标移除时执行
function cleanBGColor() {if (window.event && window.event && window.event.srcElement.tagName == "TD") {var td = window.event.srcElement;var tr = td.parentElement;//设置样式tr.style.backgroundColor = " rgb(237, 249, 255)";//获取tr中所有单元格var tds = tr.cells;for (var i = 0; i < tds.length; i++) {tds[i].style.color = "black";}}
}

	<!-- food.js 即上面代码存储的文件 --><script type="text/javascript" src="./js/food.js" th:src="@{/js/food.js}" ></script><!-- 后续功能实现要使用到Ajax，所以引入jQuery库 --><script type="text/javascript" src="js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>

	<!-- onmouseover：鼠标悬浮，显示背景颜色；onmouseout：鼠标移除，清除背景颜色 --><tr th:each="fruit,item:${fruitList}" th:id="${item.count}" onmouseover="showBGColor()" onmouseout ="cleanBGColor()"></tr>

//当页面加载完成后执行
window.onload = function () {addFruit();
}//点击添加按钮时进行数据新增操作
function addFruit(){$("#addOrUpdateBtn").click(function(){if ($("#addOrUpdateBtn").val() == '添加'){//校验if(!check())return false;$.ajax({url: "/fruit/addFruit",type: "post",data: { //前端携带的数据name: $("#name").val(),price: $("#price").val(),count: $("#count").val(),remark: $("#remark").val(),producer: $("#producer").val()},dataType:'text', //后端是String返回，所以为文本形式表示json格式success:function (data){//响应数据alert(data);//页面刷新location.reload();}});}});
}//在发起请求之前进行数据校验
function check(){if ($("#name").val() == ''){alert("水果名称不能为空!");return false;}if ($("#price").val() == ''){alert("水果单价不能为空!");return false;}if ($("#count").val() == ''){alert("水果数量不能为空!");return false;}return true; //校验通过
}//点击对应水果库存进行具体操作 参数为：id值
function showData(id){switch (id){case '1'://获取水果id值let fid1 = $("#id"+id).val();//调用修改水果库存函数updateFruit(id,fid1);break;case '2'://获取水果id值let fid2 = $("#id"+id).val();updateFruit(id,fid2);break;case '3'://获取水果id值let fid3 = $("#id"+id).val();updateFruit(id,fid3);break;case '4'://获取水果id值let fid4 = $("#id"+id).val();updateFruit(id,fid4);break;case '5'://获取水果id值let fid5 = $("#id"+id).val();updateFruit(id,fid5);break;}
}//修改水果库存 id：行id fid：水果id
function updateFruit(id,fid){//获取水果库存各属性值$("#name").val($('.name'+id).text());$("#price").val($('.price'+id).text());$("#count").val($('.count'+id).text());$("#remark").val($('.remark'+id).text());$("#producer").val($('.producer'+id).text());//把‘添加’按钮值改为‘修改’$("#addOrUpdateBtn").val("修改");//点击修改按钮进行相应操作$("#addOrUpdateBtn").click(function (){if ($("#addOrUpdateBtn").val() == "修改"){//参数校验if(!check()){return false;}//发起ajax请求$.ajax({url: "/fruit/updateFruit/",type: "post",data: { //前端携带的数据id: fid,name: $("#name").val(),price: $("#price").val(),count: $("#count").val(),remark: $("#remark").val(),producer: $("#producer").val()},dataType:'text', //后端是String返回，所以为文本形式表示json格式success:function (data){//响应数据alert(data);//页面刷新location.reload();}});}return false;})
}

<!-- 绑定点击事件函数 showData(this.id)：把id值传参，这里就可以实现数据显示了 -->
<tr th:each="fruit,item:${fruitList}" th:id="${item.count}" onclick="showData(this.id)"></tr>

//点击删除小图标执行删除数据的函数 num：html绑定事件中的参数获取
function delFruit(num) {//用户提示框let result = confirm("确定要删除该记录吗？");if (result){//确定，执行删除操作$.ajax({url: "/fruit/delFruit",type: "get",data: { //前端携带的数据id: $("#id"+num).val(),},dataType:'text', //后端是String返回，所以为文本形式表示json格式success:function (data){//响应数据alert(data);//页面刷新location.reload();}});}else {// 用户点击取消，则返回false，不执行任何操作return false;}
}

	<td><!-- οnclick="delFruit(this.id)"：传入的参数是id值 --><img src="./images/del.jpg" th:src="@{/images/del.jpg}" th:id="${item.count}" onclick="delFruit(this.id)" alt="删除" class="delImg"/></td>