实现一个增删改查系统的过程

今天讲一下做一个增删改查系统的具体过程，案例为之前发布的随笔，企业erp生产管理系统。

要完成整个系统的前端后端流程，配置系统环境是必不可少的，比如，我用到的环境有：

语言环境：Java1.8

数据库：mysql8.0

用到的数据库图形化软件：Navicat

由于项目是基于的SpingBoot，用到了Maven框架，用起来很方便

这些都可以在B站搜到配置教程，这些都配置好了就可以创建一个基于Springboot的项目，如下图

创建好以后，需要配置一下pom文件，一般有一个现成的项目就可以直接拿过来复制粘贴用了，下面是我的这个项目的pom代码，springboot的版本一定要对应自己的数据库，第一次配置会下载一段时间

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.8</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>ProductionPlan</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>ProductionPlan</name>
    <description>ProductionPlan</description>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <properties>
        <java.version>8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
<!--        <dependency>-->
<!--            <groupId>org.mybatis.spring.boot</groupId>-->
<!--            <artifactId>mybatis-spring-boot-starter-test</artifactId>-->
<!--            <version>3.0.3</version>-->
<!--            <scope>test</scope>-->
<!--        </dependency>-->
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

配置好pom文件加载成功后，才可以正常运行，然后按照要求创建数据库和字表信息，用navicat可以直接配置，也可以直接在idea中测试链接mysql，如图

 

 然后按照表中的数据写对应的dao层代码，尽量与数据库中的表对应，再编写getter setter toString方法，这里可以用到快捷键Alt+Insert快速编写 很方便

 同时写一个Result记录响应后端能否接收数据，写相应成功和失败的函数，这里代码比较固定，Select类负责封装根据数据库中所含字段的函数

接下来写Bean层代码，一般用到Mapper接口和其镜像用起来很方便，在里面编写数据库增删改查语句，以调用数据库，如下是新增sql语句，每写一个语句在下面写后端数据的对应方法，注意调用函数的返回值要对应，比如新增的返回值为空就为Void，而查询的语句返回值需为整体Plan

@Insert("INSERT INTO product_plan(id, name, overview, productway, begin, end, technology) VALUES(#{id},#{name},#{overview},#{productway},#{begin},#{end},#{technology})")
    void insert(String id, String name, String overview, String productway, LocalDateTime begin, LocalDateTime end, String technology);

接下来需要编写接受前端数据的代码，也就是控制层，这里需要配置一个网页链接 创建一个逻辑访问层的对象， 并用这个对象处理接收的数据，增加用Post，删除Delete，修改用Put，查看用Get.，这里也比较通用，需要用到

@Autowired来自动装载对象

@RequestMapping("/plan")用来定位网页的地址

新增的举例

    //增加
    @PostMapping("/add")
    public Result addPlan(@RequestBody Plan plan) {
        try {
            System.out.println(plan);
            planService.addPlan(plan);
            return Result.success(plan);
        } catch (Exception e) {
            e.printStackTrace(); // 输出异常信息到控制台
            throw e; // 抛出异常以查看更多详细信息
        }
    }

这里需要调用逻辑访问层的新增代码，所以需要写Service层写对数据处理（增删改查）的函数方法，供给控制层调用处理前端接收的数据

Service层需要创建一个自动封装的Mapper对象，用这个对象写函数方便调用，如新增

 @Autowired
    private PlanMapper planMapper;

    //增加
    public void addPlan(Plan plan) {
        String id = plan.getId();
        String name = plan.getName();
        String overview = plan.getOverview();
        String productway = plan.getProductway();
        LocalDateTime begin = plan.getBegin();
        LocalDateTime end = plan.getEnd();
        String technology = String.join(",", plan.getTechnology());
        planMapper.insert(id, name, overview, productway, begin, end, technology);
    }

这里分别用到了dao层代码的各种get方法，实现了函数多层调用，最后用到了mapper层写的insert新增方法将新增的信息添加到数据库中，到这里后端的新增方法也就写的差不多了，但是还需要写前端的页面进行交互，

前端新增页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增生产计划</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #root {
            margin: 20px;
        }

        h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input, select {
            width: 300px;
            padding: 5px;
            font-size: 16px;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">新增生产计划</h1>
<div id="root" style="border: 1px solid black">
    <h2>增加生产计划</h2>
    <form id="addForm">
        <label for="planId">计划编号:</label>
        <input type="text" id="planId" name="planId" required oninput="limitInput(this)" maxlength="10">
        <label for="planName">计划名称:</label>
        <input type="text" id="planName" name="planName" required>
        <label for="planOverview">计划概述:</label>
        <input type="number" id="planOverview" name="planOverview">
        <label>排产方式:</label>
        <div id="way">
            <label><input type="radio" name="way" value="串行排产">串行排产</label>
            <label><input type="radio" name="way" value="并行排产">并行排产</label>
            <label><input type="radio" name="way" value="串并行排产">串并行排产</label>
        </div>
        <label for="beginTime">开始时间:</label>
        <input type="datetime-local" id="beginTime" name="beginTime">
        <label for="endTime">结束时间:</label>
        <input type="datetime-local" id="endTime" name="endTime">
        <label>包含工艺:</label>
        <div id="technology">
            <label><input type="checkbox" name="technology" value="锯">锯</label>
            <label><input type="checkbox" name="technology" value="热">热</label>
            <label><input type="checkbox" name="technology" value="车">车</label>
            <label><input type="checkbox" name="technology" value="铣">铣</label>
            <label><input type="checkbox" name="technology" value="钳">钳</label>
            <label><input type="checkbox" name="technology" value="去">去</label>
            <label><input type="checkbox" name="technology" value="珩">珩</label>
            <label><input type="checkbox" name="technology" value="表镀铬">表镀铬</label>
            <label><input type="checkbox" name="technology" value="表喷砂">表喷砂</label>
            <label><input type="checkbox" name="technology" value="综检">综检</label>
            <label><input type="checkbox" name="technology" value="洗">洗</label>
            <label><input type="checkbox" name="technology" value="包">包</label>
            <label><input type="checkbox" name="technology" value="入">入</label>
            <label><input type="checkbox" name="technology" value="装">装</label>
        </div>
        <button type="submit">添加生产计划</button>
    </form>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("addForm").addEventListener("submit", function (event) {
        event.preventDefault();
        const planId = document.getElementById("planId");
        const planName = document.getElementById("planName");
        const planOverview = document.getElementById("planOverview");
        const way = document.querySelectorAll('input[name="way"]');
        let w;

        way.forEach(radio => {
            if (radio.checked) {
                w = radio.value;
                alert(w);
            }
        });
        const begin = document.getElementById("beginTime");
        const end = document.getElementById("endTime");
        const technologies = document.querySelectorAll('input[name="technology"]:checked');
        const teList = [];
        for (const t of technologies) {
            teList.push(t.value);
        }
        fetch('plan/add',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    id: planId.value,
                    name: planName.value,
                    overview: planOverview.value,
                    productway: w,
                    begin: begin.value,
                    end: end.value,
                    technology: teList,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("添加成功");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>
    function limitInput(input) {
        const value = input.value;
        if (value.length > 10) {
            input.value = value.slice(0, 10);
        }
        if (value.length < 10) {
            input.setCustomValidity('计划编号前八位必须为年月份后两位为编号');
        } else {
            input.setCustomValidity('');
        }
    }
</script>
</html>

这里比较重要的是

fetch('plan/add',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    id: planId.value,
                    name: planName.value,
                    overview: planOverview.value,
                    productway: w,
                    begin: begin.value,
                    end: end.value,
                    technology: teList,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("添加成功");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });

这里需要对页面上显示的数据进行一个接收并以josn的数据形式存在，以便于后端controller层进行调用时查到数据，正是后端用到了@PostMapping("/add")和 @RequestBody才能成功接受到数据，@RequestBody主要用来接收前端传递给后端的json字符串中的数据的至此一个简单的增删改查中的新增也就做好了，增删改查基本上是一个道理，换汤不换药，按照这个逻辑都可以迎刃而解。