企业ERP生产计划管理系统

好久没发博客了，距离上次发博客还是大三的时候，转眼已经研究生了，时光飞逝，我仿佛又回到了熟悉的软工。

今天做了企业erp生产计划管理系统，实现了对生产计划管理系统的增删改查。具体实现功能如下图：

 新增生产计划

 

 修改生产计划

 删除生产计划

 

 生产计划浏览

 具体实现过程：

1.创建Spring Boot项目，配置Maven，以及数据库配置文件，项目总体结构以及配置文件数据如下图

 2.创建数据库字表，按要求创建如图所示

 

3.编写Pojo文件    在Spring中也称为Dao层    封装对象类，写getter ，setter， toString函数，供后端代码引入使用。

Plan.java 负责封装数据库中字表    Result.java负责记录响应后端能否接收数据，编写success函数和error函数    Select.java负责封装根据数据库中所含字段的函数

package com.example.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.time.LocalDateTime;
import java.util.List;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Plan {
    private String id;
    private String name;
    private String overview;
    private String productway;
    private LocalDateTime begin;
    private LocalDateTime end;
    private List<String> technology;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getOverview() {
        return overview;
    }

    public void setOverview(String overview) {
        this.overview = overview;
    }

    public String getProductway() {
        return productway;
    }

    public void setProductway(String productway) {
        this.productway = productway;
    }

    public LocalDateTime getBegin() {
        return begin;
    }

    public void setBegin(LocalDateTime begin) {
        this.begin = begin;
    }

    public LocalDateTime getEnd() {
        return end;
    }

    public void setEnd(LocalDateTime end) {
        this.end = end;
    }

    public List<String> getTechnology() {
        return technology;
    }

    public void setTechnology(List<String> technology) {
        this.technology = technology;
    }
}

package com.example.pojo;

/**
 * 统一响应结果封装类
 */
public class Result {
    private Integer code;//1 成功 , 0 失败
    private String msg; //提示信息
    private Object data; //数据 data


    public static Result success(Object data) {
        return new Result(1, "success", data);
    }

    public static Result success() {
        return new Result(1, "success", null);
    }

    public static Result error(String msg) {
        return new Result(0, msg, null);
    }

    public Result() {
    }

    public Result(Integer code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

package com.example.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Select {
    public String getSelectId() {
        return selectId;
    }

    public void setSelectId(String selectId) {
        this.selectId = selectId;
    }

    public String getSelectName() {
        return selectName;
    }

    public void setSelectName(String selectName) {
        this.selectName = selectName;
    }

    public String getSelectWay() {
        return selectWay;
    }

    public void setSelectWay(String selectWay) {
        this.selectWay = selectWay;
    }

    public List<String> getSelectTechnology() {
        return selectTechnology;
    }

    public void setSelectTechnology(List<String> selectTechnology) {
        this.selectTechnology = selectTechnology;
    }

    private String selectId;
    private String selectName;
    private String selectWay;
    private List<String> selectTechnology;
}

4.写Mapper层代码 在Spring中也称为Bean层  处理数据库   配置Mapper以及对应的映像文件  编写数据库的增删改查语句 并在映射文件中写出模糊查询的语句 以便调用。

package com.example.mapper;

import com.example.pojo.Plan;
import org.apache.ibatis.annotations.*;

import java.time.LocalDateTime;
import java.util.List;

@Mapper

public interface PlanMapper {
    @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);

    @Select("delete from product_plan where id=#{id}")
    void deleteByID(String id);

    List<Plan> selectByCondition(String id, String name, String productway, String technology);

    @Select("select * from product_plan")
    List<Plan> selectAll();

    @Select("select * from product_plan where id=#{id}")
    Plan selectById(String id);

    @Update("update product_plan set id=#{id},name=#{name},overview=#{overview},productway=#{productway},begin=#{begin},end=#{end},technology=#{technology} ")
    void updateById(String id, String name, String overview, String productway, LocalDateTime begin, LocalDateTime end, String technology);
}

5.编写控制层从前端接收数据 ，并配置网页链接 创建一个逻辑访问层的对象，并用这个对象处理接收的数据，增加用Post，删除Delete，修改用Put，查看用Get.

package com.example.controller;

import com.example.pojo.Plan;
import com.example.pojo.Result;
import com.example.pojo.Select;
import com.example.service.PlanService;
import org.apache.ibatis.annotations.Insert;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/plan")
public class PlanController {
    @Autowired
    private PlanService planService;

    //增加
    @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; // 抛出异常以查看更多详细信息
        }
    }

    //删除
    @DeleteMapping("/delete/{id}")
    public Result deletePlan(@PathVariable String id) {
        Plan plan = planService.selectPlan(id);
        if (plan != null) {
            planService.deletePlan(id);
            return Result.success(plan);
        } else {
            return Result.error("并未查询到信息");
        }
    }

    //修改
    @PutMapping("/update")
    public Result updatePlan(@RequestBody Plan plan) {
        Plan plan1 = planService.selectPlan(plan.getId());
        if (plan1 != null) {
            planService.updatePlan(plan);
            return Result.success(plan1);
        } else {
            return Result.error("无法查询到信息，无法修改");
        }
    }

    //查看
    @GetMapping("/getAll")
    public Result getAll() {

        List<Plan> plans = planService.getAll();
        return Result.success(plans);
    }

    @GetMapping("/getById/{id}")
    public Result getById(@PathVariable String id) {
        Plan plan = planService.selectPlan(id);
        if (plan != null) {
            return Result.success(plan);
        } else {
            return Result.error("未查询到相关信息");
        }
    }

    @GetMapping("/getByCondition")
    public Result getByCondition(@RequestBody Select select) {
        List<Plan> plan = planService.selectByCondition(select);
        if (plan != null) {
            return Result.success(plan);
        } else {
            return Result.error("未查询到相关信息");
        }
    }
}

6.编写逻辑访问层代码  创建Mapper的对象，用这个对象写对数据处理（增删改查）的函数方法，供给控制层调用处理前端接收的数据

package com.example.service;

import com.example.mapper.PlanMapper;
import com.example.pojo.Select;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.example.pojo.Plan;

import java.time.LocalDateTime;
import java.util.List;

@Service

public class PlanService {
    @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);
    }

    //删除
    public void deletePlan(String id) {
        planMapper.deleteByID(id);
    }

    //查找
    public Plan selectPlan(String id) {
        return planMapper.selectById(id);
    }

    public List<Plan> getAll() {
        return planMapper.selectAll();
    }

    public List<Plan> selectByCondition(Select select) {
        String selectId = select.getSelectId();
        String selectName = select.getSelectName();
        String selectWay = select.getSelectWay();
        String selectTechnology = String.join(",", select.getSelectTechnology());
        return planMapper.selectByCondition(selectId, selectName, selectWay, selectTechnology);
    }

    //更改
    public void updatePlan(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());
        if (plan.getId() != null) {
            planMapper.updateById(id, name, overview, productway, begin, end, technology);
        } else {
            System.out.println("id为空，无法修改");
        }
    }
}

以上是后端代码的实现，前端代码如下，由于前端页面做的不是很好，就不过多讲解了。

add.html

<!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>

delete.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除生产计划</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            border: 1px solid #ccc;
            padding: 500px;
        }

        button {
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="tablecontainer">
    <h1 style="text-align: center">删除生产计划</h1>
    <form id="deleteform">
        <label>计划编号</label>
        <input type="text" id="studentid" required oninput="limitInput(this)" maxlength=10">
        <br>
        <div id="container">

        </div>
        <button type="submit" name="查询">查询</button>
    </form>
    <form id="delete">
        <input type="text" id="id" required oninput="limitInput(this)" maxlength=10">
        <br>
        <button type="submit" name="删除">删除</button>
    </form>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("deleteform").addEventListener('submit', function (event) {
        event.preventDefault()
        const id = document.getElementById("studentid");
        fetch('plan/getById/' + id.value, {
            method: 'GET',
            headers: {
                'Content-Type': 'application.json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data);
                } else {
                    alert("此结果不存在");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("tablecontainer");

        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");

        let row = document.createElement("tr");
        row.innerHTML = '<td>计划编号</td><td>计划名称</td><td>开始时间</td><td>结束时间</td>';
        tableBody.appendChild(row);

        row = document.createElement("tr");
        row.innerHTML = `<td>${data.id}</td><td>${data.name}</td><td>${data.begin}</td><td>${data.end}</td>`;
        tableBody.appendChild(row);

        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
<script>
    document.getElementById("delete").addEventListener('submit', function (event) {
        event.preventDefault();
        const studentid = document.getElementById("id");
        fetch('plan/delete/' + studentid.value, {
            method: 'DELETE',
            headers: {
                'Content-type': 'application.json'
            },
            body: JSON.stringify(
                {
                    id: studentid.value
                }
            )
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg == 'success') {
                    alert("删除成功");
                } 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>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产计划管理系统</title>
    <style>
        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        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 class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <a href="add.html" target="_blank">
                    <button>新增生产计划计划</button>
                </a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href="update.html" target="_blank">
                <button>修改生产计划</button>
            </a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <a href="delete.html" target="_blank">
                    <button>删除生产计划</button>
                </a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>
                <a href="selectByCondition.html" target="_blank">
                    <button>查询生产计划</button>
                </a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>
                <a href="select.html" target="_blank">
                    <button>生产计划浏览</button>
                </a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

select.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生产计划浏览</title>
</head>
<body>
<h2 style="text-align: left">生产计划浏览</h2>
<div id="tablecontainer">

</div>
<div>
    <a href="index.html">
        <button>返回主界面</button>
    </a>
</div>
</body>
<script>
    display();

    function display() {
        fetch('plan/getAll', {
            method: 'GET',
            headers: {
                'Content-Type': 'application.json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data,);
                } else {
                    alert("此结果不存在");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("tablecontainer");

        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        // if (data.length>1) {
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>计划编号</td><td>计划名称</td><td>开始时间</td><td>结束时间</td>';
        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = data.length - 1; i >= 0; i--) {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].begin}</td><td>${data[i].end}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
</html>

以上为我个人做此项目的总结。