<?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、setting
    public 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;
    }

    @Override
    public 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 {
	//依赖注入持久层
    @Resource
    private FruitMapper fruitMapper;
	
	/**
     * 利用RowBounds分页查询（逻辑分页）
     * @param pageNum
     * @return
     */
    @Override
    public List<Fruit> fruitPages(Integer pageNum) {
        //分页 公式：(当前页-1)*当前页条数
        RowBounds rowBounds = new RowBounds((pageNum-1)*5,5);
        return fruitMapper.findAll(rowBounds);
    }

	/**
     * 获取水果库存总数量
     * @return
     */
    @Override
    public 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
     */
    @Override
    public 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
     */
    @Override
    public 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 {
	//依赖注入业务层
    @Resource
    private 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")
    @ResponseBody
    public 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")
    @ResponseBody
    public 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")
    @ResponseBody
    public 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>