🆘如有侵权，请联系删除；如有写得不对的地方，请帮忙指出；如您有更好的想法、建议和资源分享，欢迎找我交流！
🥰前言
- 此次综合实训一（
Web课设）临近期末考试，加之本人在课设第一周去了一趟昆明，时间不是很充足，最后决定跟随网上的教学视频做本次的课设。 - 学习链接为：仓库管理系统【该学习视频适合初学者学习，跟着学习一遍可以把基础的一些知识掌握，慢慢跟着做能够完美地复现出来，同时也可以自行更改代码】
一、实验题目
仓库管理系统
二、实验目的
由于Web的易用性、实用性，它很快占据了企业应用的主导地位，目前成为使用最广泛、最有前途、最具魅力的信息传播技术。Web游戏、电子商务、交易及购物、社交网站等层出不穷，可以说未来的社会是基于Web的社会。
通过一学期对高级Web技术这门课的学习，我明白这门课程对于计算机学子的重要性，我们单单学习理论是远远不够的，将其应用到实践中才是最重要的。
本次Web应用程序的开发我采用Vue + SpringBoot的模式编写一个仓库管理系统，在实战中学习，遇到问题、查阅资料、解决问题，也会提高一些自学能力。目前Web技术的开发一般都选择Vue做前端，SSM、Spring boot等技术做后端。
课程设计目的在于加深对理论知识的理解，在这一过程中，我将熟悉实际工作中常用的Web应用服务器，熟悉一种开发工具的Web编程模式，最终运用SSM框架，采用典型的前后端分离模式开发一个小型的管理信息系统。这次课设能够让我对相关知识更加深入的学习和了解，对个人能力同样也是一种挑战和锻炼。
三、总体设计
3.1 实验背景及开发工具
面向对象的开发方法是当今世界最流行的开发方法，它不仅具有更贴近的自然的语义，而且有利于软件的维护和继承。在众多 Web 应用中，Java 语言具有许多的优秀的特性，如简单性、面向对象、分布式、健壮性、可移植性、安全性等，这些优秀的特性得到业界广泛认可，从而使其成为当前最为流行的程序设计语言之一。
MySQL 是一种关系数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择 MySQL 作为网站数据库。
Navicat 是一套快速、可靠并价格相宜的数据库管理工具，专为简化数据库的管理及降低系统管理成本而设。它的设计符合数据库管理员、开发人员及中小企业的需要。Navicat 是以直觉化的图形用户界面而建的，其功能足以符合专业开发人员的所有需求，而且对数据库服务器的新手来说又相当容易学习。有了极完备的图形用户界面 (GUI)，让你可以以安全且简单的方法创建、组织、访问和共享信息。
此外，本课设的工具和环境还包括有JDK8，MySQL8，vue2，IntelliJ IDEA 2021等。
3.2 系统功能的需求分析
仓库管理系统主要功能是记录相关信息，以便管理员对仓库物品相应情况进行增删改查，同时，也方便用户对仓库物品的相关情况进行查询了解。本系统的主要功能有如下三个方面：
（1）超级管理员
① 主页展示功能：超级管理员进入系统后，可以总览菜单栏，点击菜单选项，选择需要的功能。
② 管理员管理功能：超级管理员可以总览所有管理员信息，实现对管理员的新增、删除、修改和删除。
③ 用户管理功能：超级管理员可以总览所有用户信息，实现对管理员的新增、删除、修改和删除。
④ 仓库管理功能：超级管理员可以总览所有仓库信息，实现对仓库的新增、删除、修改和删除。
⑤ 物品分类管理功能：超级管理员可以总览所有物品分类信息，实现对物品分类的新增、删除、修改和删除。
⑥ 物品管理功能：超级管理员可以总览所有物品信息，实现对物品的新增、删除、修改和删除，以及入库和出库。
⑦ 记录管理功能：超级管理员可以总览所有物品操作的记录信息。
（2）管理员
除管理员管理功能外，其他超级管理员有的权限管理员也同样拥有。
（3）用户功能
① 主页展示功能：用户进入系统后，可以总览菜单栏，根据自己需求选择功能。
② 物品管理功能：用户可以查询物品的相关消息。
总体上需要实现：
-
对管理员账号的增加、修改、删除和查询；
-
对用户账号的增加、修改、删除和查询；
-
对仓库信息的增加、修改、删除和查询；
-
对物品分类的增加、修改、删除和查询；
-
对物品信息的增加、修改、删除和查询；
-
对物品信息的入库和出库的记录；
-
实现多角色界面和功能等。
3.3 数据库逻辑结构设计
根据系统的需求，建立信息表，以下简单展示一下货品表：
| 货品表 | |||
|---|---|---|---|
| 字段名 | 数据类型 | 是否可空 | 说明 |
| id | int | 否 | 编号（主键） |
| name | varchar(100) | 否 | 货品名 |
| storage | int(11) | 否 | 仓库 |
goodsType | int(11) | 否 | 分类 |
| count | int(11) | 否 | 数量 |
| remark | varchar(1000) | 否 | 备注 |
SQL语句：
创建货品表：
create table `goods` (
`id` int(11) not null auto_increment comment '主键',
`name` varchar(100) not null comment '货名',
`storage` int(11) not null comment '仓库',
`goodsType` int(11) not null comment '分类',
`count` int(11) default null comment '数量',
`remark` varchar(1000) default null comment '备注',
primary key (`id`)
) engine = InnoDB auto_increment = 1 default charset = utf8;
创建商品分类表：
create table `goodsType`(
`id` int(11) not null auto_increment comment '主键',
`name` varchar(100) not null comment '分类名',
`remark` varchar(1000) default null comment '备注',
primary key(`id`)
) engine = InnoDB auto_increment = 1 default charset = utf8;
其他部分实体信息：
-
用户：id，账号，用户名，密码，年龄，性别，联系电话，角色号。
-
仓库：id，仓库名，备注。
-
商品分类类型：id，商品分类名，备注。
-
商品类型：id，商品名，仓库名，商品类型，数量，备注。
-
操作记录：id，商品名，操作者名，申请人名，数量，操作时间，备注。
系统完整性要求系统中数据的正确性以及相容性，通过建立主键、外键。使用 check 约束或者通过触发器和级联更新。每个实体有且只有一个 ID。不同级别的用户有着不同的权限。
3.4 系统设计的详细步骤
核心步骤简述如下：
-
功能设计：参考指导书等相关资料，进行简单的需求分析，明确功能列表；
-
数据库设计：思考和构建数据表；
-
搭建前端环境：新建一个
Vue项目，然后参考指导书、教材等资料添加依赖，设置参数、配置基础框架等; -
搭建后端环境：使用
IntelliJ IDEA软件新建一个spring项目，参考指导书、教材等资料添加依赖，设置参数、配置基础框架等; -
拟定计划：根据实际情况制定系统开发计划。
四、详细设计
4.1 数据库的创建
首先是建立仓库系统（简称WMS）的数据库表。我的实现方式是直接利用可视化工具Navicat进行建数据库、建表操作，保证数据表的正确建立，避免后续工作引起不必要的麻烦。在Navicat中创建一个名为WMS的数据库，然后建立基本表，如下图1所示。
 |
|---|
| 图1 数据库及数据表的创建 |
4.2 后端框架制定
在部署完后端环境后，则需要制定基本的代码框架，本系统采用的研发架构是MVC，如下图2所示。
 |
|---|
| 图2 数据库及数据表的创建 |
其中controller文件夹主要存放各个实体类的控制器，同时利用@ResquestMapping注释设置数据监听接口；entity文件夹存放实体类（详见4.3实体的创建）；mapper文件夹存放数据库访问对象（即实体类的持久化存在）；service文件夹存放实体对应的业务逻辑操作，即对数据库的操作。
4.3 实体类的创建
在完成“后端框架制定”任务后，即可在后端中创建实体类。对应我们所创建的基本表，我们需要创建两个实体类，以Student类为例：属性设置要与基本表一致，然后建立构造方法和getter、setter方法，部分核心代码如下：
@Data
@EqualsAndHashCode(callSuper = false)
public class Menu implements Serializable {
private static final long serialVersionUID = 1L;
private Integer id;
/**
* 菜单编码
*/
@TableField("menuCode")
private String menucode;
/**
* 菜单名字
*/
@TableField("menuName")
private String menuname;
/**
* 菜单级别
*/
@TableField("menuLevel")
private String menulevel;
/**
* 菜单的父code
*/
@TableField("menuParentCode")
private String menuparentcode;
/**
* 点击触发的函数
*/
@TableField("menuClick")
private String menuclick;
/**
* 权限0表示超级管理员，1表示管理员，2表示普通用户，可以用逗号组合使用
*/
@TableField("menuRight")
private String menuright;
@TableField("menuComponent")
private String menucomponent;
@TableField("menuIcon")
private String menuicon;
}
@Data会自动创建构造方法、getter、setter方法等。同理建立其他实体，此处不再做阐述。
4.4 功能界面详情
- 登录界面模块
为了保障系统的完整性的同时保障系统的安全性，加入登录界面模块。该模块由三部分组成：
① 账号密码的获取；
② 匹配数据库已有的账号和密码；
③ 正确登录则跳转到主界面，否则，提示“校验失败，用户名或者密码错误！”信息。
系统登录界面如图3所示：
 |
|---|
| 图3 系统登录界面 |
- 主界面模块
登录成功后，将进入主界面。默认首页展示登录用户的基本信息。在左侧的菜单栏展示着不同的模块功能。其中，超级管理员的功能：管理员管理、用户管理、仓库管理、物品分类管理、物品管理、记录管理。管理员的功能与超级管理员功能相比，除了没有没有管理员管理外，其余功能一致。普通用户只有物品管理功能。所以，在实验报告中只介绍超级管理员功能和普通用户功能。
 |
|---|
| 图5 超级管理员首页界面 |
 |
|---|
| 图6 普通用户首页界面 |
- 管理员管理模块
管理员管理模块，首先是展示当前在库管理员的所有信息，包括账号、姓名、年龄、性别、角色、电话等，并能通过姓名、性别进行查询，同时，还可以对其进行新增、修改、删除等操作。
针对查询功能，设置的是模糊查询，例如我输入一个”小”字，点击“查询”之后其姓名中含有“小”字的管理员信息都会呈现在界面上，同时当用户再选择“女”时候，再次点击“查询”，则页面上将展示姓名中含有“小”且性别是女的管理员信息。
针对编辑功能，当对当条数据进行编辑时，界面会弹出一个编辑框，数据会展示在输入框内，用户可对其就行修改。
针对新增功能，与编辑功能类似，只是初始时都是空，在进行新增时，要注意输入框要符合条件限制，否则无法插入成功。（点击“新增”选项，会弹出一个子页面，输入账号、名字、密码、年龄、电话，选择好性别，点击确定，即可添加成功。如果账号已经存在，则会出现提示信息“账号已经存在”，需要重新输入账号信息。其中，为了更加规范信息填写，本系统对账号长度、密码长度、年龄范围和电话格式进行了设置。当出现信息不合规范时，会弹出提示信息提醒操作者。同时，如果信息填写不完整，也会出现提示信息。）
针对删除功能，点击“删除”时，会弹出确定框（点击操作栏中的“删除”选项，可以对用户信息进行删除。为了防止用户不小心点击“删除”选项误删信息，在点击该选项时，会弹出提示信息“确定删除吗？”若是确定删除，则点击“确定”选项后删除此条用户信息），防止用户因为误触导致错误操作，当用户点击确定后，才会执行删除操作。
下面展示操作过程中的部分界面图：
 |  |
|---|---|
| 图7 新增功能界面 | 图8 编辑功能界面 |
 |
|---|
| 图9 查询功能界面 |
🔔 注意：
以上功能，针对用户管理模块也是如此，只是操作的对象不是管理员了，而是普通用户，所以下文不再对用户管理模块进行介绍，其主要功能与上一致，展示部分界面图。
 |
|---|
| 图10 用户管理模块界面 |
针对仓库管理模块，其增加、删除、编辑和修改功能的实验也是一样的，此处也不多做阐述，展示部分界面图。
 |
|---|
| 图11 仓库管理模块界面 |
- 物品管理模块
此模块基本的增加、删除、编辑和修改功能与上文说明实现类似，不再做说明。此处我们新增了“入库”和“出库”俩个新功能，同时此界面的操作会直接影响记录管理模块，以“入库”为例：
当我们选择“篮球”这条数据，点击“入库”，此时弹出表单，此处有个地方要注意，我们需要选择一个申请人，点击“申请人”，会跳转到新界面，选择一个用户即可，接着填写数量和备注，点击“确定”完成“入库”操作，正确操作即会提示“操作成功！”。操作成功之后，篮球数量会相对应发生变化，记录管理模块也会新增加一条入库数据。
下面展示部分界面：
 |
|---|
| 图12 申请人选择界面 |
 |  |
|---|---|
| 图13 入库功能界面 | 图14 出库功能界面 |
- 记录管理模块
为了使操作变的透明，设计了一个记录管理模块，当对仓库中的物品进行出入库后，就会在这里记录下来，记录下来的内容包括：物品名，仓库，分类，操作人，申请人，数量，操作时间。其中，操作时间记录的是操作时的时间，在建立数据库时，将数据类型设置为datetime类型，便会自动保存当前时间，并存入数据库中。
下面展示部分界面：
 |
|---|
| 图15 记录管理模块界面 |
- 退出登录模块
点击右上角用户名，会出现“退出登录”选项，点击，可实现退出系统功能。界面如下图16所示：
 |
|---|
| 图16 退出登录界面 |
五、实验结果与分析
5.1 实验结果
本次课程设计，我独立实现了仓库管理系统，通过验证，各项功能运行正常、操作结果正确，可以实现该有的管理员管理、用户管理、仓库管理、物品管理、记录管理等功能。界面设计内容完整，代码结构化和清晰化程序高，本次课设完成度较高。
下面是用插件Statistic实现的代码统计图和部分项目结构图：
 |
|---|
| 图17 后端代码量数据 |
 |
| 图18 前端代码量数据 |
 |  |
|---|---|
| 图19 后端项目结构 | 图20 前端项目结构 |
5.2 项目总结
-
总结
- 本系统采用的技术栈是
Vue+springboot，通过使用成熟的Javaweb开发技术，让我再次感受到了Javaweb前后端分离开发模式的魅力，并且对Javaweb理论课程的知识有了一个更加全面的认知与掌握。 - 本人感到比较满意的一点是自己的项目结构非常清晰，界面虽然不够精致，但是内容丰满，界面做到了干净清晰，能够将核心重点展示。
- 本系统采用的技术栈是
-
待提升
-
界面美观度有待提升，学习其他同学与网络上优秀的开源项目的前端构建；
-
需要进一步结构化代码，减少代码量，做到规范架构开发；
-
根据现实生活情况增加更多的功能，对标真实世界里仓库管理系统的功能；
-
提升自己的思维能力和代码能力，锻炼结构化和模块化思维。
-
六、小结与心得体会
本次课程设计让我对springboot框架的开发更加熟悉，虽然在本学期课程中我们所学的框架为springmvc框架，但在课余时间我去学习了更加便利于开发的springboot框架，并决定在本次课程设计中使用，进行仓库管理系统的开发。同时Vue框架的使用，对我这种审美一般的人来说，非常友好，有时候看着自己设计出来的页面，心里有着一种莫大的成就感。除这两个框架外，还使用了mybatis-plus框架，减少了代码量，是个很好用的工具。
当然，在开发的过程中，肯定不可能是一帆风顺的。在最开始，因为各个框架版本的不适配，总是频繁报错，在花费了一定量的时间后，终于使版本适配了，但也没有一直顺利，总是会有着各种奇奇怪怪的报错，让我抓耳挠腮，但同时，我也明白，我正在进步着，只有报错遇见问题，并去解决问题，才能有更多的收获，坚持就是胜利。
通过这次的课设，我体会到了模块化开发的优点，提高了整体项目的管理能力。在模块化开发中，各个模块相对独立，业务逻辑更加清晰，可以很方便地维护和调试每个模块。除此之外，我还明白了不管是做什么都不是一次就能做到很好的，每一个好的项目一定是经过了无数次的修改和调整。在最开始，我总是想着要一次性设计出一个很完美的系统出来，但后面在和同学的交流中才慢慢知道，好的项目一定是经过了多次的修改的。在后面自己操作的时候，这个不断调试，不断尝试的过程让我感受到打磨一个项目精益求精的不易，但同时也让我进步十分大。
🔔实验报告有待改进，有小bug，比如没有图4【赶时间写的，后期就懒得再改了嘛】
💓致谢
- 感谢
Yunyi Li老师在本次课设中对我的指导、监督和鼓励，同时感谢我的朋友Lily酱、OneWan和Alant对我的指导和帮助，此次课设我学会了很多专业知识，代码能力得到显著进步，望再接再厉！
🏅Word初写于20230623，完结于20230708
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
