基于 Spring Boot 和 Vue 框架构建工厂车间管理系统，采用 MySQL 数据库存储数据。系统包含管理员与人员两种角色，实现个人中心、看板管理、设备管理、生产开立、工序及流程管理等核心功能。通过可行性分析、系统设计、编码实现及测试验证，确保系统稳定性与安全性。该系统支持移动端与 PC 端访问，提升数据处理效率，满足车间信息化管理需求。
社会发展日新月异，用计算机应用实现数据管理功能已经比较完善。随着移动互联网的到来，处理信息不再受制于地理位置的限制，及时高效，备受人们喜爱。本次开发一套基于 Vue 的工厂车间管理系统，包含管理员和人员两个角色。管理员功能包括个人中心、人员管理、看板信息管理、设备信息管理、生产开立管理、生产工序管理、生产流程管理。注册的人员可以登录并查看管理员发布的所有信息。系统服务端使用 Java 开发，采用 Spring Boot 框架构建后台，数据库使用 MySQL 存储数据。该方案让用户使用方便快捷，通过统一后台进行业务处理，后台可根据并发量做好部署，软硬件协作满足数据交互式处理，确保数据存储安全且获取便捷。
关键字： 基于 Vue 的工厂车间管理系统；Spring Boot 框架；Java；MySQL
互联网时代不仅包含电脑网络连接，也包含移动终端连接互联网进行复杂处理。传统互联网时代泛指 PC 端，而最近几十年是移动互联网时代，向物联网过渡的重要阶段。目前移动互联网大行其道，人人手持智能机，如果开发一个用于手机上的程序软件，符合潮流和管理者客户的理想。本次开发基于 Vue 的工厂车间管理系统，有管理员和人员两个角色。管理员功能包括个人中心、人员管理、看板信息管理、设备信息管理、生产开立管理、生产工序管理、生产流程管理。注册的人员可以登录并查看管理员发布的所有信息。
当微软操作系统占据市场大半江山时，不分年龄和种族，使用频率最高，覆盖面积最广。各大行业软件阵地转移到了 Windows 平台上，包含带商城的免费管理系统、带广告的免费应用以及游戏类应用。尤其是经过疫情涌现的互联网办公、学校互联网教学等，不断刷新人们对互联网的认知。
从经济成本考虑，手机价格亲民，对于非必须在电脑上办公的人员，手机上能解决问题更方便。 从使用便利角度讲，用手机上的应用处理业务，无需考虑网线是否存在或位置变化，依托无处不在的手机信号即可在任何有信号的地方处理事务，不限制时间和地点。 从操作角度讲，手机操作先天高于电脑操作，因为电脑适合处理复杂操作，而手机是为了简化操作而生，方便高效。 此次开发基于 Vue 的工厂车间管理系统，不仅满足用户需要，也能跟上时代发展风向，从技术还是用户角度开发都很有意义。
论文设计的结构依照程序开发的流程进展，涉及功能需求分析、功能设计与实现、程序测试等流程。
为了更容易理解 MySQL 数据库，描述其主要特征： （1）首选 MySQL 数据库也是为了节省开发资金，网络上对 MySQL 的源码已公开展示，开发者根据程序开发需要下载并修改后使用，可推动开发进度。 （2）SQL 数据语言在 MySQL 里面同样适用。 （3）MySQL 支持多种编程语言，如 C 语言、Java 语言、PHP 语言、C++ 语言等，安装与使用不挑剔平台。 （4）MySQL 支持具有千万条数据记录的数据库，操作系统首次安装或重装时可选择 32 位或 64 位，32 位最多存放 4GB 表文件，64 位最多存放 8TB 表文件。 （5）MySQL 可通过 GPL 协议进行个性化定制，开发者需自行修改源代码以开发属于自己的 MySQL。
程序开发语言众多，但截至目前，Java 语言在 IT 领域内仍是最被认可及广泛运用的编写语言之一。Java 不仅在 Web 开发领域有突出贡献，在大数据开发及 Windows 开发领域也得到了广泛运用。由于 Java 拥有较强的扩展性能和稳定性能，成为大型后端系统开发语言首选，也是常用的互联网平台解决方案。
作为一种开源的面向对象程序开发语言，Java 程序运行需在操作平台上配置环境，包括数据库软件与 Java 程序开发软件等工具的安装与配置。在 Win7、Win10 或其他操作平台上配置成功，Java 程序均可运行。
Spring Boot 由 Pivotal 团队提供，设计目的是用来新应用的初始搭建以及开发过程。该框架使用特定方式进行配置，使开发人员不再需要定义样板化的配置。Spring Boot 致力于在快速应用开发领域成为领导者。
Spring Boot 可与经典 Java 开发工具一起使用或作为命令行工具安装。需要 Java SDK 1.6 或更高版本，本项目用到的是 JDK 1.8 版本。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。自身不是一个全能框架——它只聚焦于视图层。因此非常容易学习，也容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。
特点：
在进行系统分析之前，需要从网络或图书馆的开发类书籍中收集大量资料，帮助即将开发的程序软件制定最优方案。一旦确定程序软件需要具备的功能，接下来的工作都围绕此方案执行，所以系统分析需要对程序功能反复思考和研究。
开发一款系统软件之前，用户都会思考这个软件是否值得去开发，把开发过程中可能涉及的问题罗列出来并分析解决，以此来确定开发是否有必要。这样的分析方法也能帮助用户降低损失，不至于开发进度进行到一半之后突然遇到问题放弃。
此次开发程序使用的开发工具有 MySQL 等，使用的开发语言是 Java。选择的开发工具和语言都是在大学课堂接触并学习过，后期通过网络渠道或借助图书馆的开发类书籍进行过系统学习，积累了一定的知识储备。加上在校期间独立开发过一些软件作品，积累了开发经验，所以这次毕设作品的制作在技术上无须担忧过多。
目前的信息时代，对信息的管理趋于高效化、便捷化，这是计算机大力普及带来的便利。此程序软件在设备选用上依靠比较大众的电脑设备，对电脑配置没有过多要求，一般学校的计算机机房电脑都可以满足程序开发需求。另外，开发出此款程序让信息处理变得高效率，所带来的高效益远超程序开发的低成本，资金投入可忽略不计。
程序软件的操作界面符合大众审美需求，功能模块布局类似于社会上同种类型的软件，使用者操作该软件可无需培训就上手。加上现在计算机入驻各家各户，大部分人的计算机操作水平较高，表明开发出来的程序在操作性问题上不用担心。
综合上面的可行性论证，基本可以确定程序开发完全可行。
程序经过编码可以实现对程序设计的功能。但是编码实现时需要一定的配置环境，包括电脑上的硬件环境和操作系统上安装的软件环境。
硬件环境：一台可以正常使用并能上网的笔记本或电脑，电脑内存最低要求 4G，中央处理器可配置 i5 CPU。 软件环境：采用比较稳定的 Windows 7 旗舰版系统，采用主流浏览器，并在此系统上通过浏览器下载安装好 MySQL 软件等。
分析程序的流程，涉及到程序的整体操作流程，通过分析与设计，绘制的程序操作流程图见下图。
图 3-1 程序操作流程图
程序处理数据会涉及到数据的录入环节，绘制的添加流程见下图。程序录入数据过程中，始终与数据库保持同步。
图 3-2 信息添加流程图
程序里面的数据也会出现错误，因此就有相应的修改数据的功能，绘制的程序修改流程见下图。此过程也是跟后台数据库进行数据同步显示。
图 3-3 信息修改流程图
程序数据存放于数据仓库，有时也会涉及到数据删除，此过程对应的流程图见下图。数据信息被删除之后，数据库里面也就没有了该数据信息了。
图 3-4 信息删除流程图
在系统设计过程中，也需要遵循相应的设计原则，这些原则可以帮助设计者在短时间内设计出符合设计规范的设计方案。设计原则主要有可靠性、安全性、可定制化、可扩展性、可维护性、可升级性以及客户体验等原则。
在管理员功能模块确定下来的基础上，对管理员各个功能进行设计，确定管理员功能的详细模块。管理员功能有个人中心、用户管理、看板信息管理、设备信息管理、订单管理、系统管理。
与功能结构设计一样，数据库设计也是程序开发不可避免的设计环节，数据库设计最主要的目的就是帮助运行程序存储相应的数据信息。数据库设计包含的内容有数据表结构的设计，也包含了数据库 E-R 图的设计。
在绘制 E-R 图之前，先要找出数据库的实体，明确各个实体具有的属性。比如用户信息这个实体，它具备的属性包括了用户的姓名属性、用户的密码属性、用户的创建时间属性等。明确了用户这个实体，以及用户实体具备的属性之后，就需要根据这些信息绘制用户实体对应的实体属性图了。绘制软件选用当下认可度高、使用范围广、操作便利的微软旗下的 Visio 工具。
（1）管理员实体属性图通过 Visio 工具绘制，绘制结果展示如下： 图 4-4 管理员实体属性图
（2）人员实体属性图通过 Visio 工具绘制，绘制结果展示如下： 图 4-5 人员实体属性图
（3）设备信息实体属性图通过 Visio 工具绘制，绘制结果展示如下： 图 4-6 设备信息实体属性图
在进行这部分设计之前，需要明白和掌握数据类型以及各个数据类型的长度范围等知识。因为在一张具体的数据表中，为了方便理解，这里就举个简单的例子。比如用户信息表，这个表格的字段就是用户这个实体具备的属性，这时就需要对字段进行数据类型，以及字段长度的设置，也要设置一个主键来作为用户信息表的唯一标识。这些都是数据库表结构设计需要完成的内容。根据基于 Vue 的工厂车间管理系统的功能设计以及数据库设计要求，展示该系统的数据表结构。
1 人员表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | addtime | Date | 创建时间 | 是 |
| 3 | zhanghao | String | 账号 | 是 |
| 4 | mima | String | 密码 | 是 |
| 5 | xingming | String | 姓名 | 是 |
| 6 | xingbie | String | 性别 | 是 |
| 7 | touxiang | String | 头像 | 是 |
| 8 | youxiang | String | 邮箱 | 是 |
| 9 | shouji | String | 手机 | 是 |
| 10 | renyuanleixing | String | 人员类型 | 是 |
2 生产工序表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | addtime | Date | 创建时间 | 是 |
| 3 | shengchanpici | String | 生产批次 | 是 |
| 4 | gongxumingcheng | String | 工序名称 | 是 |
| 5 | gongxubianhao | String | 工序编号 | 是 |
| 6 | shebeimingcheng | String | 设备名称 | 是 |
| 7 | picishuliang | Integer | 批次数量 | 是 |
| 8 | gongxuneirong | String | 工序内容 | 是 |
| 9 | chanpinmingcheng | String | 产品名称 | 是 |
| 10 | fabushijian | datetime | 发布时间 | 是 |
3 生产开立表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | addtime | Date | 创建时间 | 是 |
| 3 | gongdanshuliang | Integer | 工单数量 | 是 |
| 4 | shengchanpici | String | 生产批次 | 是 |
| 5 | picishuliang | Integer | 批次数量 | 是 |
| 6 | picishuoming | String | 批次说明 | 是 |
| 7 | chanpinmingcheng | String | 产品名称 | 是 |
| 8 | fabushijian | datetime | 发布时间 | 是 |
4 看板信息表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | addtime | Date | 创建时间 | 是 |
| 3 | kanbanmingcheng | String | 看板名称 | 是 |
| 4 | yulantu | String | 预览图 | 是 |
| 5 | wangyelianjie | String | 网页链接 | 是 |
| 6 | neirongshuoming | String | 内容说明 | 是 |
5 生产流程表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | addtime | Date | 创建时间 | 是 |
| 3 | shengchanpihao | String | 生产批号 | 是 |
| 4 | shengchanpici | String | 生产批次 | 是 |
| 5 | gongxumingcheng | String | 工序名称 | 是 |
| 6 | gongxubianhao | String | 工序编号 | 是 |
| 7 | shebeimingcheng | String | 设备名称 | 是 |
| 8 | picishuliang | Integer | 批次数量 | 是 |
| 9 | chanpinmingcheng | String | 产品名称 | 是 |
| 10 | shengchanzhuangtai | String | 生产状态 | 是 |
6 设备信息表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | addtime | Date | 创建时间 | 是 |
| 3 | shebeibianhao | String | 设备编号 | 是 |
| 4 | shebeimingcheng | String | 设备名称 | 是 |
| 5 | shebeileixing | String | 设备类型 | 是 |
| 6 | guimo | String | 规模 | 是 |
| 7 | shuliang | Integer | 数量 | 是 |
| 8 | zhuyishixiang | String | 注意事项 | 是 |
7 管理员表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | username | String | 用户名 | 是 |
| 3 | password | String | 密码 | 是 |
| 4 | role | String | 角色 | 是 |
| 5 | addtime | Date | 新增时间 | 是 |
系统实现这个章节的内容主要还是展示系统的功能界面设计效果，在实现系统基本功能，比如修改、添加、删除等管理功能的同时，也显示出系统各个功能的界面实现效果。该部分内容一方面与前面提到的系统分析、系统设计的内容相呼应，另一方面也是一个实际成果的展示。
管理员可以对人员信息进行添加、修改、删除、查询操作。
图 5-1 人员管理页面
管理员可以对看板信息信息进行添加、修改、删除、查询操作。
图 5-2 看板信息管理页面
管理员可以对设备信息进行添加、修改、删除、查询操作。
图 5-3 设备信息管理页面
管理员可以查看、修改、删除、查询生产开立信息。
图 5-4 生产开立页面
人员可以对生产开立信息进行添加、修改、删除、查询操作。
图 5-5 生产开立信息页面
人员可以对生产工序信息进行添加、修改、删除、查询操作。
图 5-6 生产工序页面
人员可以对生产流程信息进行添加、修改、删除、查询操作。
图 5-7 生产流程页面
程序软件的开发阶段也包括了系统测试，这个部分就是程序质量评定的一个重要环节。如果说程序通过编码实现功能之后，不通过测试检查程序中出现的错误，那么程序一旦投入生活中运行使用时，就会产生许多大大小小的错误，这个时候去解决问题已经晚了。所以一个程序在被交付给使用者使用之前，开发者就需要使用多种测试方法反复进行测试，也是对程序的一个负责表现。程序进入系统测试阶段，在讲究策略进行测试时，也需要对时效性进行把控。当开发者测试完程序，并解决完测试期间程序产生的各种错误时，就需要程序的验收方来对程序进行验收测试，这也是程序测试的最后一个操作步骤。验收测试也是对程序的质量以及可交付性方面起到关键的作用。
程序软件进入到系统测试这一个环节时，也需要根据测试的方法进行规范化测试操作，测试方法以及使用顺序分别是：首先是单元测试，接着是集成测试和系统测试，最后才是验收测试，下面将描述系统测试方法。
基于 Vue 的工厂车间管理系统在经历了一系列测试步骤之后，可以确定该系统可以交付给使用者进行使用了。在系统的功能主界面上可以清晰展示各个功能，并且各个功能的超链接也是正常跳转，能够实现用户要求的功能。在程序的稳定性、可靠性、验证逻辑以及操作流程方面跟需求文档很贴合。所以，开发完成的基于 Vue 的工厂车间管理系统符合用户需求，它投入运行使用带给用户的便利是显而易见的。
基于 Vue 的工厂车间管理系统的开发制作，从题目确定到成品完成，自己投入的精力与心血是非常多的。这也是我第一次使用 Spring Boot 框架语言，开发的这个比较简单的基于 Vue 的工厂车间管理系统。
基于 Vue 的工厂车间管理系统开发过程中，自己之前觉得比较抽象的许多门课程，例如数据库原理、软件工程、动态网站开发等课程开始变得很清晰，只有自己独立开发程序，才会觉得这些开发类的课程在实践中具有的重要作用。为了让自己设计的作品能够顺利的完成，我把所学知识全部运用在程序的开发流程中，包括了程序的需求分析环节、程序的编码环节、程序的测试环节等，让程序软件在开发周期内完成制作，并能够保证程序质量达标，力求程序开发流程规范化，程序对应的配套文档标准化。
独立开发程序期间，才会发现有许多知识都是现学现用得来的，毕竟大学期间所学知识比较有限，专业知识掌握得比较浅显，这也给自己制造了许多麻烦，比如程序开发期间遇到的中文乱码问题、程序对应数据库的数据安全问题、程序开发中框架的使用问题等，这些问题都需要随时去翻阅书籍，或通过搜索引擎等方式寻找解决办法，这也耽误了许多程序开发的宝贵时间。后期我也通过对周边同学的请教，以及指导老师的悉心指导，让我找到了程序开发的相关技巧，也积累了一定的知识量，慢慢地纠正了许多不该犯的错误，也推动了我的程序开发进程。
基于 Vue 的工厂车间管理系统现已完成了开发，除了基本功能可以符合用户需求外，在页面设计层面上没有融入更多的设计元素，需要从美学角度进行优化，另外在程序的代码层面，也有许多重合部分，需要进行整理归类，让代码变得更加的简洁。
实践出真知，但是知识也是通过实践变得更加深刻，这次作品制作，让自己的专业知识水平与解决问题的能力得到了提高。也让自己更加明白活到老学到老的真正含义。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
