基于Vue和SpringBoot的便利店仓库物资管理系统的设计与实现

喜欢ヅ旅行 2023-09-24 15:59 241阅读 0赞

> **作者主页**：[Designer 小郑][Designer]  
> **作者简介**：Java全栈软件工程师一枚，来自浙江宁波，负责开发管理公司OA项目，专注软件前后端开发（Vue、SpringBoot和微信小程序）、系统定制、远程技术指导。CSDN学院、蓝桥云课认证讲师，全栈领域优质创作者，在校期间参加PAT乙级考试获得满分，三年ACM竞赛经验，斩获国奖两项，省奖五项。热爱技术、专注业务、开放合作、乐于分享，期待你我共同成长！  
> **主打方向**：Vue、SpringBoot、微信小程序

> 本文是《基于Vue和SpringBoot的便利店仓库物资管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。

### 摘要 ###

在当今时代，企业只有敏捷的获取生产信息和市场信息，才能置身于国际大舞台。随着企业经营规模的不断扩大，产品仓库信息的急剧增加，有关仓库的各种信息也成倍增长。面对庞大的信息量，如何有效地管理库存产品，对这些企业来说是非常重要的，库存管理的重点是销售信息能否及时反馈，从而确保企业运行效益。而库存管理又涉及入库、出库的产品、经办人员及客户等方方面面的因素，如何管理这些信息数据，是一项复杂的系统工程，充分考验着库存管理员的工作能力，工作量的繁重是可想而知的，所以这就需要由库存管理系统来提高库存管理工作的效率，这对信息的规范管理、科学统计和快速查询，减少管理方面的工作量，同时对于调动广大员工的工作积极性，提高企业的生产效率，都具有十分重要的现实意义。

因此，有必要开发一套完整的仓库信息管理系统来提高管理工作的效率。通过这样的系统，可以做到信息的规范管理、科学统计和快速查询，从而减少管理方面的工作量。选择合理的仓库管理方法，不仅会促进销售，改善生产秩序，做到均衡生产，而且会降低库存的占用资金，最终使企业获得更好的经济效益。

木系统可以方便快捷地实现仓库管理中的物资管理、出库入库、库存管理等操作，使企业的仓库管理井井有条，为企业的健康发展创造良好的条件。本文介绍毕业设计的课题背景与意义、国内外同类管理软件的研究现状与发展趋势、研究的日的、研究的范围、相关的研究，研究开发的过程，以及设计思路和实现细节等。

**关键词**：仓库；定位；管理；唯一标识

--------------------

#### 便利店仓库物资管理系统的设计与实现-目录 ####

*   *  摘要
     *  引言
     *  1 绪论
     *   *  1.1 研究背景及意义
         *   *  1.1.1 研究背景
             *  1.1.2 研究意义
         *  1.2 国内外研究现状
         *  1.3 本课题研究内容
     *  2 相关技术介绍
     *   *  2.1 系统技术栈的说明和介绍
         *   *  2.1.1 Spring
             *  2.1.2 SpringBoot
             *  2.1.3 SpringMVC
             *  2.1.4 Vue
             *  2.1.5 MySQL数据库
             *  2.1.6 Tomcat
         *  2.2 系统开发环境需要
         *  2.3 本章小结
     *  3 系统需求分析
     *   *  3.1 系统需求分析概述
         *  3.2 系统功能需求的分析
         *   *  3.2.1 系统登陆模块
             *  3.2.2 便利店管理员模块
             *  3.2.3 菜单权限模块
             *  3.2.4 商品管理模块
             *  3.2.5 商品进货模块
             *  3.2.6 商品出库模块
         *  3.3 系统非功能需求的分析
         *   *  3.3.1 可靠性
             *  3.3.2 易用性
             *  3.3.3 维护性
         *  3.4 系统可行性分析
         *   *  3.4.1 对现有系统的分析
             *  3.4.2 技术的可行性分析
             *  3.4.3 社会因素的分析
         *  3.5 需求分析小结
     *  4 系统整体结构设计
     *   *  4.1 系统设计的基本思想
         *  4.2 系统总体架构设计
         *  4.3 系统的网络拓扑结构的部署
         *  4.4系统详细设计
         *   *  4.4.1 系统登陆模块的功能设计
             *  4.4.2 便利店管理员模块的功能设计
             *  4.4.3 菜单权限模块的功能设计
             *  4.4.4 商品管理模块的功能设计
             *  4.4.5 商品进货模块的功能设计
             *  4.4.6 商品出库模块的功能设计
         *  4.6 本章小结
     *  5 系统实现
     *   *  5.1 客户端设计与实现
         *   *  5.1.1 登录模块
             *  5.1.2 便利店管理员模块
             *  5.1.3 菜单权限模块
             *  5.1.4 商品管理模块
             *  5.1.5 商品进货模块
             *  5.1.6 商品出库模块
         *  5.2 系统安全控制实现
     *  6 系统测试
     *   *  6.1 集成测试
         *  6.2 系统测试
         *  6.3 测试结论
     *  结论
     *  参考文献
     *  致谢

### 引言 ###

随着我国经济的不断繁荣发展以及加入WTO后市场环境的变化，对企业的生产经营也提出了更高的要求，**企业必须综合利用各种先进生产技术，在网络与信息技术的支持下，改进现在的生产经营模式和组织结构，才能在市场竞争中赢得更多的份额**。随着企业规模的扩大，仓库管理系统将发挥越来越重要的作用。高效方便的仓库管理系统，可以为生产经营提供强大的后盾和有力的支持。仓库管理系统主要提供一个仓库管理业务及其作业管理的信息存储和检索系统。通过入库管理、出库管理、借出还入、仓库人员管理等功能模块来实现仓库的综合管理。

企业的物资供应管理往往是很复杂的,烦琐的。由于所掌握的物资种类众多，订货，管理，发放的渠道各有差异，各个企业之间的管理体制不尽相同，各类统计计划报表繁多，因此物资管理必须实现计算机化，而且必须根据企业的具体情况制定相应的方案。

**仓库管理是企业日常经营管理中十分重要的一个组成部分**，对于商业、服务等企业除了日常的销售出库、采购入库外还包括盘点、调拨、借入借出等业务;对于工业、加工、施工等生产型企业，仓库管理的重要性也是不言而喻的。

仓库管理系统帮助企业的仓库管理人员对仓库物品的入库、出库、移动和盘点等操作进行全面的控制和管理，达到提高仓库控制精度，降低仓库量，杜绝物料积压与短缺,提高客户服务水平，保证生产经营活动顺利进行的目的。

所以一个完整的企业物资供应管理系统应该**包括系统设置、基础资料、仓库管理、数据查询、数据维护等模块**，其中仓库管理是整个物资仓库管理系统的核心。

### 1 绪论 ###

#### 1.1 研究背景及意义 ####

##### 1.1.1 研究背景 #####

信息作为生产力最活跃的因素，很早就在人类经济生活中发挥着不可替代的作用，把信息纳入企业经营管理系统中并高效处理和应用是在计算机发明以后的50年代末。

目前人们所提到的管理信息系统,通常是指以计算机为工具,对管理信息进行收集、存储、检索、加工和传递，使其应用于组织机构及企业管理领域的“人机系统”，该系统是70年代初“后工业经济”时代的产物，便利店仓库物资管理系统在其发展的初期，是单一的人机系统，系统功能简单，效率低，对管理的作用有限。

进入20世纪80年代末，**随着计算机网络和通讯技术的大力发展，便利店仓库物资管理系统进入网络化的发展时期**。世界发达国家已建立了完善的先进的管理信息系统体系，在社会经济领域中发挥着巨大的作用。

我国管理信息系统的大发展是在80年代末90年代初，国家建立起了“金卡”，“金关”，“金桥”工程，多数企事业单位建立了局域网和广域网管理信息系统，随着世界经济和我国经济逐步向知识经济迈进，无论是基于工业经济的管理信息系统，还是面向少数专家和管理人员的专家系统（ES）或决策支持系统(DSS)，其处理对象和服务对象，自身的系统结构，处理能力，都有进一步的发展。

##### 1.1.2 研究意义 #####

**仓库管理系统是现代化生产发接不可缺少的一部分，是便利店产、供、销一体化的重要环节**。随着生产的规模不断扩去，库存量的逐年增加，对于产品的各种品种的管理也日益繁多面对太量的数字信息和数字账册，以及庞大的产品供应程序，仅靠人工的管理方法，已经被现代化的管理方式所淘汰。

随着计算机技术的不断发展，计算机科学日渐成熟，计算机作为知识经济时代的产物，已被广泛应用于社会的各行各业和领域。随着我国便利店改革的深入和社会主义市场经济的日趋繁荣，导致各便利店的竞争日益激烈，迫使便利店采用先进的计算机硬件设备以及高质量的辅助软件来管理便利店的各项运作以提高本便利店的劳动生产率以及人员效率。仓库管理系统软件作为一种管理软件正在各企事业单位中得到越来越广泛的应用。正是由于计算机在便利店管理中应用的普及,使得利用讨算机实现便利店仓库信息的管理势在必行。其强大的功能已为人们深刻认识它尽进入人类社会的备个领域并发挥着越来越重要的作用。**作为计算机应用的一部分源使用计算机对库存信息进行管理，具有手工管理所无法比拟的优点，比如:检索迅速、查找方便、可靠性大、存储量大、保密性好、寿命长、成本低等**。这些优点能够极大地提高便利店的管理效率。

#### 1.2 国内外研究现状 ####

现在国内外对此类系统的开发与研究也是很有实用性的，基本能满足各便利店的自身特点来进行库存方面的管理，同时，该类系统又都在不断地深入与发展，来适用更多的便利店，一般都能运用于各个便利店的库存管理，但是都没有针对大众的广泛应用，只能运用某个便利店或单位，这一点还有待于今后的进一步开发与实践。

今后此类软件将会向条码库存管理系统发展，现阶段，伴随物流及管理信息化、网络化的发展，应用条码技术进行库存管理、实现库存作业自动化，将是一一个必然的发展趋势，也是需要迫切解决的一个现实问题。随着信息化技术的不断提高和应用的日渐普及，更多的商品拥有自己的条码，而且，使用条码化工作代替传统作业模式，减少了手工输入，这样不但提高了作业效率，还能确保资料正确，并减少因人为失误所造成的损失。

**（1）技术应用于库存管理是实现库存管理自动化的有效途径**  
库存品种多，数量大。因此，要实现收发作业的快速、准确、高效，仓储管理自动化势在必行。而实现管理自动化的“瓶颈”则是产品信息的采集、输入。传统手工作业方式，在信息采集量加大的情形下，物资信息不能及时的反馈，给收发作业造成一-定的困难。利用条码技术，在入库及其包装上加贴条码，配之以库存信息管理系统进行作业，不仅可提高效率，降低作业强度，也将大大提高产品收发作业准确率(如键盘输入仅为百分之一)，进而实现库存管理的全面自动化。

**（2）技术应用于库存管理对提高库存作业效率有重要作用**  
将条码技术和库存管理信息系统结合起来，用于产品收、发、保管等全过程控制管理，不仅可改变信息采集的传统手工作业方式，降低作业强度，还可避免由此造成的各种差错，提高作业效率和科学管理水平。比较发现，信息输入时，条码输入速度是键盘输入的5倍。入库时，通常保管员根据产品上的条码所反映出的册序号、出厂期、生产厂家、单价、封存（保管）期等信息，进行实物点验，同时将条码信息录入到管理信息系统;出库时，保管员根据发付单内容，持条码扫描装置进行器材拣选，并完成信息录入;清库盘点时，保管员可持扫描装备进行数质量等内容核对，并将采集的信息录入管理系统中进行自动盘点，生成清库对帐单等完成清库盘点作业。

**（3）技术应用于库存管理是完善产品保障信息网络的重要手段。**  
储存产品信息是产品保障信息网络的重要组成部分，是做好产品供应保障工作的基础。产品保障信息网是实现物资储运全过程可视化的前提。目前，有些库存内部局域网已经建成并投入使用，并与业务主管部门实现了信息沟通，库存保障信息网在日常保障工作中实现了信息沟通，库存保障信息网在日常产品保障工作中的作用日趋明显。条码技术在储存管理中的应用，可进一步完善系统各库存之间及各库存与作业主管部门之间的信息共享和交换功能，最终达到对产品的全程跟踪管理，充分发挥条码技术在整个流程中的作用。

同时，在软件系统的研发过程中，将会融入一种 EPR的便利店管理思想。大量的研究与实践已经充分表明，ERP作为一种现代便利店管理的思想和方法，将其大力地推广应用就是有效的促使我国便利店管理朝着更加科学化、合理化和规范化方向发展的一种具体方法和途径。

另外，库存管理的信息化和可视化，每个便利店将会拥有两个库存，一个是装满货物的库存，还有一个就是管理系统里的数据库，对上万种货物分别编码，使其成为计算机可识别的语言，形象地说，**货架上的号码就是货物的地址，从而避免了货物的分拣和提取时翻箱倒柜式的查找**。

#### 1.3 本课题研究内容 ####

论文以便利店仓库物资管理系统的设计与实现为主题，开发一套便利店仓库物资管理系统。  
本文所做的工作内容如下：

（1）对当前国内外便利店仓库物资管理系统研究背景进行研究，对目前有关此类便利店仓库系统进行分析，然后通过分析得出研究本系统的现实意义。

（2）对系统所需要的相关技术进行阐述，对软件编程所需要的物理条件进行研究。

（3）分析本系统需要实现的功能模块，包括功能直接依赖的需求，和功能的安全性、可交互性等非完全依赖的需求。

（4）阐述系统的整体结构设计，主要从总体架构、功能设计和数据库层面入手。

（5）系统功能和界面功能展示。

（6）最后对该系统的设计与实现继续全面的总结，并提出该系统目前所存在的一些不足，并对该系统提出未来的展望。

### 2 相关技术介绍 ###

#### 2.1 系统技术栈的说明和介绍 ####

**该系统通过JAVA技术平台进行研发和创新，采用的是MVC模式**。其中使用Spring、SpringBoot等开源框架进行后端开发，使用Vue框架构建前端，使用MySQL数据库存储数据，使用Tomcat作为服务器。下文将详细介绍使用的技术。

##### 2.1.1 Spring #####

Spring是一种十分有用的开源框架，其框架如图2-1所示，其主要优点包括：

1.  **简化开发**。通过容器的控制，能够大大减少程序之间的耦合。
2.  **测试程序方便**。在进行测试时，我们可以用与容器无关的方式完成测试工作。
3.  **支持AOP编程**。Spring中支持的AOP面向切面编程能够让我们的编程变得更加方便。
4.  **声明式事务支持**。Spring能够让我们用声明式的方式对事务进行管理和声明，提高了开发效率。
5.  **方便集成各种优秀框架**，Spring提供了对各种优秀框架的直接支持。

![在这里插入图片描述][bb62eada6fdd449e808560ff77d54b25.png_pic_center]

##### 2.1.2 SpringBoot #####

如果过去使用Spring MVC + Spring + Mybatis框架进行开发，则需要构建和集成三个主要框架，Web.xml配置，Spring配置，Mybatis配置，有了它们的集成就可以很好地工作。而 Spring引导框架彻底改变了该开发过程，由于xml的配置过程的复杂性，所以采用了许多默认配置。提供了一个starter POM来进行简化配置。根据Maven项目中pom.xml文件的XML配置项，Spring会自动根据XML的配置整合Spring框架，还有SpringMVC等其他技术框架。

##### 2.1.3 SpringMVC #####

Spring MVC是在Spring之上的一种轻量级Web框架。在日常开发中，由于使用了MVC架构模式的思想来解耦Web层并管理应用程序所需的生命周期，能够让我们的开发更加地方便。SpringMVC提供了一个用于视图管理的主开关DispatcherServlet，以及请求处理映射器（Handler Mapping），处理适配器（Handler Adapter）和视图解析器（View Resolver）。动作处理器Controller接口（包括ModelAndView和处理请求响应对象请求和响应），配置灵活，文件上传支持，简单的数据转换以及其他强大的功能。

![在这里插入图片描述][6ca91d12bd4647c49cdb749d30b31e2d.png_pic_center]  
SpringMVC结构图如图2-2所示，客户端通过URL发送请求,核心控制器收到请求后，通过请求查询传递给处理器映射器，处理器映射器找到处理的应用程序返回给核心控制器，然后核心控制器找到需要进行处理的处理器适配器并调用接口，最后将结果返回给核心控制器，最后将获取的结果传递给视图解析器解析，最后发送给客户端。

##### 2.1.4 Vue #####

Vue是构建构建用户界面的框架。Vue很轻巧，也有许多独立的功能或库，所以，当我们继续具体开发的时候，我们可以根据我们的具体情况来选用一些不同的功能或库。响应式数据绑定和组合视图组件是Vue的两大核心。

##### 2.1.5 MySQL数据库 #####

该系统将MySQL作为数据库，MySQL是一个高效率、高并发、国内热门的关系型数据库之一。MySQL内有三大重要组成部分，第一层是连接授权服务，第二层是数据查询服务，第三层是保存数据的引擎层。

##### 2.1.6 Tomcat #####

Tomcat 服务器是一个便捷的开源Web服务器，连接器Connector和容器Container是Tomcat的核心。Tomcat经常被用在中小便利店开发以及并发量小的开发中，并且是开发和调试Servlet、JSP 程序的首选。基于此，便利店仓库物资管理系统使用Tomcat作为服务器。

#### 2.2 系统开发环境需要 ####

**开发环境：**  
Windows10作为操作系统，Idea作为后端开发工具，VsCode作为前端开发工具。

**部署环境：**  
Nginx为前端部署服务器，Maven为后端部署工具，MySQL用于数据库存储。

**配置要求：**  
服务器2核4G，硬盘40G及以上。

#### 2.3 本章小结 ####

该文详细阐述了便利店仓库物资管理系统的技术栈、相关理论知识，介绍了Spring、SpringBoot等开源框架、MySql 数据库以及Tomcat 服务器。

--------------------

### 3 系统需求分析 ###

#### 3.1 系统需求分析概述 ####

目前，便利店仓库物资管理系统已基本实现便利店服务商的内联，一些功能也在不断地完善，同时，信息系统中数据的及时性和准确性在仓储至关重要。**便利店仓库物资信息管理系统是为了用户管理仓库**。用户在仓库中入库，对方也就会同步收到入库信息。接着我将从便利店仓库物资信息管理系统的功能需求上进行阐述。

#### 3.2 系统功能需求的分析 ####

通过对便利店实际需求的研究，我将便利店仓库物资信息管理系统的功能模块分为系统登陆模块、便利店管理员模块、菜单权限模块、商品管理模块、商品进货模块、商品出库模块，以下将分别进行阐述。

##### 3.2.1 系统登陆模块 #####

登陆注册模块用于便利店仓库物资信息管理系统的登陆，用户输入登陆账号、密码和图形验证码即可完成登陆，登陆界面要当简洁美观，无需对用户进行培训即可投入使用。

##### 3.2.2 便利店管理员模块 #####

便利店管理模块用于维护便利店工作人员的档案，包括对便利店员工的增加、删除、修改、编辑、导出操作。管理员的字段应包括登陆账号、登陆密码、姓名、性别、手机号、身份证号、家庭地址、备注信息等。

##### 3.2.3 菜单权限模块 #####

菜单权限模块用于管理每一个登陆角色拥有哪些菜单权限，如便利店管理员需要拥有全部菜单权限，而仓库管理员只需拥有进货菜单即可，无需看到用户管理模块。这个基于角色的访问控制，需要在菜单权限模块中设计和实现。

##### 3.2.4 商品管理模块 #####

商品管理模块用于管理便利店中全部商品类型，如方便面、火腿肠等等。这些商品类型需要为进货模块和出库模块提供基础数据支持，商品档案的字段应当包括商品ID、商品名称、商品类型、商品供应商、型号、商品单价、现有数量、总价等字段，在商品管理模块中，管理员可以对商品档案进行增加、删除、修改、更新操作。

##### 3.2.5 商品进货模块 #####

在商品档案的建立之后，仓库管理员可以对商品进行进货登记，增加商品的库存。仓库员需要先选择商品类型，然后输入进货发票号和入库数量，如有需要还可以输入备注信息，完成进货登记。进货模块的字段需要包括商品ID、商品名称、发票单号、商品型号、单价、入库数量、总价、备注信息。

##### 3.2.6 商品出库模块 #####

商品入库之后，如果投入到便利店中，需要进行出库操作，出库也是由出库管理员完成。出库员先选择商品类型，此时可以看到商品剩余的库存量，接着从用户档案中选择出库领用人，最后输入出库数量，完成商品出库操作。出库单需要包括商品ID、商品名称、商品型号、商品单价、出库数量、总价、领用人、备注信息。

#### 3.3 系统非功能需求的分析 ####

##### 3.3.1 可靠性 #####

保证系统的稳定可靠，使用系统的过程中发生错误的几率尽可能地较小，并且要防止进行更新升级造成系统地不稳定。

##### 3.3.2 易用性 #####

使用系统的前台人员尤其是系统用户、系统管理员的操作人员，关于计算机知识的掌握程度参差不齐。对系统操作方式的设计一定要易于学习和接受并应充分考虑到操作人员在操作过程中每个细节可能出现的误操作在开发过程中对这些误操作加以预防或提示。

##### 3.3.3 维护性 #####

系统每天至少保持24小时的可用时间，能够对日常的使用的数据进行统计分析，以便于后期维护。

#### 3.4 系统可行性分析 ####

系统开发的可行性的评估，主要是从三个方面进行的，分别是对现有系统的分析、对技术的可行性分析和社会因素的分析。

##### 3.4.1 对现有系统的分析 #####

便利店仓库物资信息管理系统的设计与实现具有重要意义：用户管理商品更加方便快捷，只需注册账号进行登录，便可以在自己的电脑上进行出入库商品操作，可以根据需要修改自己的个人信息，用户也可以随时根据需要进行出入库，发送过程方便快捷；针对这一问题，便利店仓库物资信息管理系统有利于减少用户在出入库的操作时间，减轻出入库等待时间的占比，在一定程度上提高了用户的便利店工作效率。

##### 3.4.2 技术的可行性分析 #####

该系统分析了设计初期各种技术体系结构的优缺点，并最终采用了广泛而高安全性J2EE技术。J2EE技术的重点是系统的外部可拓展性以及开发早期的标准化部署。因此，J2EE技术可以完全支持便利店仓库物资管理系统的研究和开发。面向对象的思想将以上所说作为研究对象，来研究、分析、探索这些事物之间的关系。一般情况下，问题域里的所有内容都可以一个一个地转换为软件系统中的对象。面向对象技术使系统更易于开发人员理解和使用，这使系统的用户可以了解研发的原理和过程。MySQL是关系数据库，并且MySQL体积小，速度快，并且是开源代码，因此它拥有广泛的应用。综上，开发技术可行，不存在工程难题。

##### 3.4.3 社会因素的分析 #####

目前，中国的仓储物流水平正在稳步提升中， “六服务”正在深入推进， “7+1”信息新攻坚战正在政府组织下有力发展。  
计算机和网络技术在ERP领域的应用，能够有效的解决用户仓库货物清点难、货物杂乱多等问题，可以节省时间、合理分配资源等，所以便利店仓库物资管理系统是具有重要意义的。

#### 3.5 需求分析小结 ####

本章主要分析了开发此系统的可行性，分别从现有系统、相关技术方面以及社会因素方面对开发便利店仓库物资管理系统进行分析，现有系统的不完善，运用技术方面的可行，社会不断地发展，说明了开发此系统的必要性。

--------------------

### 4 系统整体结构设计 ###

#### 4.1 系统设计的基本思想 ####

MVC模式是软件领域常用的编程思想，在软件开发中，View（视图）、控制器（Controller）、模型（Model）是MVC的三层架构，最终实现灵活流动性的程序设计。这种MVC体系结构能让我们的程序更加容易拓展，能够更加直观体现出系统结构。

#### 4.2 系统总体架构设计 ####

通过对便利店实际需求的需求分析，我将便利店仓库物资信息管理系统的架构分为六大模块，分别是系统登陆模块、便利店管理员模块、菜单权限模块、商品管理模块、商品进货模块、商品出库模块如图4-1所示。

![在这里插入图片描述][d6641d079f114071a56602edb3b8d83a.png_pic_center]

#### 4.3 系统的网络拓扑结构的部署 ####

**便利店仓库物资管理系统的架构用的是企业级别的信息化结构平台**。部署广域网用于实现顾客下单，可以实现系统用户的登陆，系统管理人员对于账号的审核和修改以及其他一些相关功能的操作。部署局域网和服务器能够加强相关人员的信息安全。图4-2是本系统的网络结构示意图。

![在这里插入图片描述][012fc42e0dc54b8583415baf1f61902a.png_pic_center]

#### 4.4系统详细设计 ####

##### 4.4.1 系统登陆模块的功能设计 #####

登陆注册模块用于便利店仓库物资信息管理系统的登陆，用户输入登陆账号、密码和图形验证码即可完成登陆，登陆模块的架构如图4-3所示。

![在这里插入图片描述][d3c1a8366980426883e743e6c1f7eb97.png_pic_center]

##### 4.4.2 便利店管理员模块的功能设计 #####

便利店管理模块用于维护便利店工作人员的档案，包括对便利店员工的增加、删除、修改、编辑、导出操作。管理员的字段应包括登陆账号、登陆密码、姓名、性别、手机号、身份证号、家庭地址、备注信息等，如图4-4所示。

![在这里插入图片描述][b95a4f910cc04cb18bcb0555992b432f.png_pic_center]

##### 4.4.3 菜单权限模块的功能设计 #####

菜单权限模块用于管理每一个登陆角色拥有哪些菜单权限，如便利店管理员需要拥有全部菜单权限，而仓库管理员只需拥有进货菜单即可，无需看到用户管理模块。这个基于角色的访问控制，需要在菜单权限模块中设计和实现，如图4-5所示。  
![在这里插入图片描述][b19629bcce5c4353a7e3839816d75e83.png_pic_center]

##### 4.4.4 商品管理模块的功能设计 #####

商品管理模块用于管理便利店中全部商品类型，如方便面、火腿肠等等。这些商品类型需要为进货模块和出库模块提供基础数据支持，商品档案的字段应当包括商品ID、商品名称、商品类型、商品供应商、型号、商品单价、现有数量、总价等字段，在商品管理模块中，管理员可以对商品档案进行增加、删除、修改、更新操作，如图4-6所示。

![在这里插入图片描述][9230e491dc4347ecad8d0ea2174457fe.png_pic_center]

##### 4.4.5 商品进货模块的功能设计 #####

在商品档案的建立之后，仓库管理员可以对商品进行进货登记，增加商品的库存。仓库员需要先选择商品类型，然后输入进货发票号和入库数量，如有需要还可以输入备注信息，完成进货登记。进货模块的字段需要包括商品ID、商品名称、发票单号、商品型号、单价、入库数量、总价、备注信息，如图4-7所示。

![在这里插入图片描述][cf34a7d350454ac19c253ae7863eae75.png_pic_center]

##### 4.4.6 商品出库模块的功能设计 #####

商品入库之后，如果投入到便利店中，需要进行出库操作，出库也是由出库管理员完成。出库员先选择商品类型，此时可以看到商品剩余的库存量，接着从用户档案中选择出库领用人，最后输入出库数量，完成商品出库操作。出库单需要包括商品ID、商品名称、商品型号、商品单价、出库数量、总价、领用人、备注信息，如图4-8所示。  
![在这里插入图片描述][82c5eadba6df4bc18d13ae29005e5630.png_pic_center]

#### 4.6 本章小结 ####

本章节是对便利店仓库物资管理系统的设计部分。该章节介绍了系统设计的基本思想以及系统的总体设计，还有各个模块的设计，比如系统的六个功能模块，并对系统进行了详细设计以及数据库设计。

--------------------

### 5 系统实现 ###

根据对系统分析与设计，本章对系统中相关部分的实现情况做了详细的介绍。

#### 5.1 客户端设计与实现 ####

##### 5.1.1 登录模块 #####

用户首先进入的是便利店仓库物资信息管理系统的首页，输入自己的账号和密码进入系统。

![在这里插入图片描述][e1d9dbcd97254af08f13337e0c6b127f.png_pic_center]

当用户成功登陆后，进入到系统首页，如图5-2所示。

![在这里插入图片描述][6ab86952021e49a9b3ea671a26f324f5.png_pic_center]  
其中获取验证码的核心代码如下：

getCaptchaImg() {
        
        this.loadingCaptcha = true;
        initCaptcha().then(res => {
        
            this.loadingCaptcha = false;
            if (res.success) {
        
                this.captchaId = res.result;
                this.captchaImg = drawCodeImage + this.captchaId;
            }
        });

其中进行系统登陆的核心代码如下：

login({
        
        username: this.form.username,
        password: this.form.password,
        code: this.form.imgCode,
        captchaId: this.captchaId,
        saveLogin: this.saveLogin
    }).then(res => {
        
        if (res.success) {
        
            this.afterLogin(res);
        } else {
        
            this.loading = false;
            this.getCaptchaImg();
        }
    });

##### 5.1.2 便利店管理员模块 #####

进入系统后，便利店管理员可以查看用户管理模块，用户模块用于管理便利店的工作人员，如图5-3所示。  
![在这里插入图片描述][c6e84555f4be42e4b6cfca6b07d31f1f.png_pic_center]  
其中查询用户的核心代码如下：

for(User u: userData.getRecords()) {
        
        List<Role> list = iUserRoleService.findByUserId(u.getId());
        List<RoleDTO> roleDTOList = list.stream().map(e->{
        
            return new RoleDTO().setId(e.getId()).setName(e.getName()).setDescription(e.getDescription());
        }).collect(Collectors.toList());
        u.setRoles(roleDTOList);
        entityManager.detach(u);
        u.setPassword(null);
    }

##### 5.1.3 菜单权限模块 #####

菜单权限模块用于管理每一个登陆角色拥有哪些菜单权限，如便利店管理员需要拥有全部菜单权限，而仓库管理员只需拥有进货菜单即可，无需看到用户管理模块。这个基于角色的访问控制，需要在菜单权限模块中设计和实现，操作界面如图5-4所示。

![在这里插入图片描述][93885f6035774af1bb53fc4bce90d7ec.png_pic_center]  
其中查询角色的核心代码如下：

@RequestMapping(value = "/getAllByPage", method = RequestMethod.GET)
    @ApiOperation(value = "分页查询角色")
    public Result<IPage<Role>> getRoleByPage(PageVo page) {
        
        IPage<Role> roleList = iRoleService.page(PageUtil.initMpPage(page));
        for(Role role : roleList.getRecords()){
        
            QueryWrapper<RolePermission> rpQw = new QueryWrapper<>();
            rpQw.eq("role_id",role.getId());
            role.setPermissions(iRolePermissionService.list(rpQw));
        }
        return new ResultUtil<IPage<Role>>().setData(roleList);
    }

##### 5.1.4 商品管理模块 #####

商品管理模块用于管理便利店中全部商品类型，如方便面、火腿肠等等。这些商品类型需要为进货模块和出库模块提供基础数据支持，商品档案的字段应当包括商品ID、商品名称、商品类型、商品供应商、型号、商品单价、现有数量、总价等字段，在商品管理模块中，管理员可以对商品档案进行增加、删除、修改、更新操作，如图5-5所示，当库存量低于10时，系统会自动标黄预警。

![在这里插入图片描述][e3b176bbc5f34cc9b8219c44c6ef0f2e.png_pic_center]  
其中查询商品的核心代码如下：

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
    @ApiOperation(value = "查询商品")
    public Result<IPage<Commodity>> getByPage(@ModelAttribute Commodity commodity ,@ModelAttribute PageVo page){
        
        QueryWrapper<Commodity> qw = new QueryWrapper<>();
        if(!ZwzNullUtils.isNull(commodity.getNature())) {
        
            qw.eq("nature",commodity.getNature());
        }
        if(!ZwzNullUtils.isNull(commodity.getAssetName())) {
        
            qw.like("asset_name",commodity.getAssetName());
        }
        IPage<Commodity> data = iCommodityService.page(PageUtil.initMpPage(page),qw);
        for (Commodity co : data.getRecords()) {
        
            if(!ZwzNullUtils.isNull(co.getSupplierId())) {
        
                Supplier supplier = iSupplierService.getById(co.getSupplierId());
                if(supplier != null) {
        
                    co.setSupplierName(supplier.getName());
                }
            }
        }
        return new ResultUtil<IPage<Commodity>>().setData(data);
    }

##### 5.1.5 商品进货模块 #####

在商品档案的建立之后，仓库管理员可以对商品进行进货登记，增加商品的库存。仓库员需要先选择商品类型，然后输入进货发票号和入库数量，如有需要还可以输入备注信息，完成进货登记。进货模块的字段需要包括商品ID、商品名称、发票单号、商品型号、单价、入库数量、总价、备注信息，如图5-6所示。

![在这里插入图片描述][2e95b304c2c74a2f8b1a1bbec471a7a6.png_pic_center]

其中商品进货的核心代码如下：

@RequestMapping(value = "/insert", method = RequestMethod.POST)
    @ApiOperation(value = "新增商品入库单")
    public Result<CommodityIn> insert(CommodityIn commodityIn){
        
        CommodityIn oldWarehousing = iCommodityInService.getById(commodityIn.getId());
        double oldNumber = 0.0;
        if(oldWarehousing != null){
        
            oldNumber = oldWarehousing.getNumber() == null ? 0.0 : Double.parseDouble(oldWarehousing.getNumber());
        }
        // 入库,更新库存
        Commodity assetsType = iCommodityService.getById(commodityIn.getAssetId());
        if(assetsType != null){
        
            // number = 现在仓库总数量 + 该入库单现增加数量 - 该入库单原有增加数量
            double number = Double.parseDouble(assetsType.getNumber()) + Double.parseDouble(commodityIn.getNumber()) - oldNumber;
            assetsType.setNumber(number + "");
            assetsType.setTotalPrice((Double.parseDouble(assetsType.getUnitPrice()) * number) + "");
            // existNumber = 现在仓库存在数量 + 该入库单现增加数量 - 该入库单原有增加数量
            double existNumber = Double.parseDouble(assetsType.getExistingNumber()) + Double.parseDouble(commodityIn.getNumber()) - oldNumber;
            if(existNumber < 0)  {
        
                return ResultUtil.error("入库数量大于已出库数量!");
            }
            assetsType.setExistingNumber(existNumber + "");
            iCommodityService.saveOrUpdate(assetsType);
        }
        iCommodityInService.saveOrUpdate(commodityIn);
        return new ResultUtil<CommodityIn>().setData(commodityIn);
    }

##### 5.1.6 商品出库模块 #####

商品入库之后，如果投入到便利店中，需要进行出库操作，出库也是由出库管理员完成。出库员先选择商品类型，此时可以看到商品剩余的库存量，接着从用户档案中选择出库领用人，最后输入出库数量，完成商品出库操作。出库单需要包括商品ID、商品名称、商品型号、商品单价、出库数量、总价、领用人、备注信息，如图5-7所示。

![在这里插入图片描述][bc737d6c54f743e9abe5a986b1a981ec.png_pic_center]

仓库管理员可以选择商品类型和领用人，完成出库操作，如图5-8所示。

![在这里插入图片描述][ab558a03a62e4810a4ad817658e9099d.png_pic_center]  
其中商品出库的核心代码如下。

@RequestMapping(value = "/insert", method = RequestMethod.POST)
    @ApiOperation(value = "新增商品出库单")
    public Result<CommodityOut> insert(CommodityOut commodityOut){
        
        CommodityOut oldWarehouseOut = iCommodityOutService.getById(commodityOut.getId());
        double oldNumber = 0.0;
        if(oldWarehouseOut != null){
        
            oldNumber = Double.parseDouble(oldWarehouseOut.getNumber());
        }
        // outNumber 要出库的数量
        double outNumber = Double.parseDouble(commodityOut.getNumber());
        Commodity oldAssetsType = iCommodityService.getById(commodityOut.getAssetId());
        if(oldAssetsType != null){
        
            // newNumber 出库后还有的数量 = 仓库原本还有的数量 - 出库单的出库数量 + 原有出库单的出库数量
            Double newNumber = Double.parseDouble(oldAssetsType.getExistingNumber()) - outNumber + oldNumber;
            if(newNumber >= 0){
        
                oldAssetsType.setExistingNumber(newNumber + "");
                iCommodityService.saveOrUpdate(oldAssetsType);
            }else{
        
                return ResultUtil.error("手慢啦!库存不足!");
            }
        }
        iCommodityOutService.saveOrUpdate(commodityOut);
        return new ResultUtil<CommodityOut>().setData(commodityOut);
    }

#### 5.2 系统安全控制实现 ####

未登录的用户只能访问登录页面，即使输入其他页面的网址也会跳转回登录页面。

图5-9描述的是过滤器过滤流程用户登录成功以后，系统会在用户对应的Session中添加用户名和用户密码的加密值。所以当用户请求其他的页面以及操作时，过滤器首先检测Session中是否存在用户名和用户密码信息。若不存在，表明用户还没有登录，返回给用户登录界面。如果存在，则将密码解密，验证用户是否是合法用户。

![在这里插入图片描述][c136b57b230246478b66861584182946.png_pic_center]  
在本系统中，所有功能模块都采用了登陆控制。  
关键代码如下：

<%    
    User u = (User)session.getAttribute(“user”);
    If(u == null || “”.equals(u)) {
        
    Out.print(“<script>alert(‘请登陆’”; window.open(‘”+path+”/login.jsp”;<<script>’));
    }
    %>

### 6 系统测试 ###

**由于软件开发复杂性的原因，软件开发过程中不可避免的会产生各种错误**。为了在软件开发的顺利完成以及在软件投入实际运营之前，尽可能多地发现软件当中的错误，需要尽可能全面地对软件进行测试。目前软件测试仍然是保证软件质量的关键步骤，它是对软件需求分析、设计以及编码的最后的检查。

对应于软件开发的各个过程，软件测试也分为几种不同的层次。每一个层次都是下一层次的继续。

(1) 单元测试，单元测试对应于详细设计部分，从软件的详细设计中导出。软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。

(2) 集成测试，集成测试对应于系统的概要设计，主要用来的是各个模块之间的接口的正确性。

(3) 系统测试，系统测试的目的是通过测试发现是否需求分析中的功能相符。

#### 6.1 集成测试 ####

**集成测试，也叫组装测试或联合测试**。它是在单元测试的基础上，将所有模块按照设计要求组装成为子系统或系统，进行的测试。集成测试应该考虑以下问题有：数据在模块接口之间穿越时是否会丢失；各个子功能组合起来，能否达到预计要求的父功能；模块之间是否会有不良的影响；单个模块中的误差是否会在其他模块中进行放大。合理地组织集成测试，直接影响到模块测试用例的形式、所用测试工具的类型、模块编号和测试的次序、生成测试用例和调试的费用。通常，有两种不同的组装方式：一次性组装方式和增量式组装方式。

本系统中采用Spring框架的IOC功能，对相关的模块进行增量式的组装，进行集成测试。首先利用能够实现简单功能的替代类对主流程进行测试，然后用已经开发和测试完成的每一个实际类将替代类替换掉。看看新开发的类是否能够达到预期的目的，有没有什么冲突。对于客户端的Vue页面的测试，采用Firefox浏览器所带的调试器完成。

解决方法：在相关类中设置一个消息队列进行消息的缓冲，并且将类设置为线程类，这样即使在繁忙时也不会影响到其他操作。

#### 6.2 系统测试 ####

**系统测试是将已经确认的软件、计算机硬件、外设、网络等其他元素结合在一起，进行信息系统的各种组装测试和确认测试**，其目的是通过与系统的需求相比较，发现所开发的系统与用户需求不符或矛盾的地方。

系统测试的过程中，由于使用实际车辆进行测试的费用很大，所以利用模拟软件根据通信协议与系统进行通信。这种情况还可以测试大通信量情况下的系统的稳定性。客户端在IE和Firefox下进行分别测试。其测试内容如表6.1所示。

输入服务器的URL地址，自动返回了登录界面。根据测试，利用不同公司账号登录系统，Web客户端只显示和处理被授权管理的资源。图6.1所示为用户进入页面以后的截图。页面的左边显示的是当前能看到的系统资源，其中有背景图、车辆的图像、站点图像等。页面右边利用JavaScript生成了几个内置窗口来显示系统信息，当前显示的是一个站点信息。页面右下角有操作的按钮，这里没有显示出来。

![在这里插入图片描述][faeeb4bdfc444b02a86911db89e9bc4b.png_pic_center]

#### 6.3 测试结论 ####

我**采用了黑盒测试和白盒测试的方法**，对便利店仓库物资信息管理系统的各大功能模块进行了测试，其中查看货物列表当数据量超过1万时加载时间大于3秒，影响了用户的正常使用，还需要进一步完善搜索算法，其他模块的功能能够正常实现，总之便利店仓库物资信息系统符合上线要求。

### 结论 ###

通过设计，我对管理信息系统（MIS）的概念有了一定的了解。管理信息作为一门新兴的、具有独特风格的边缘科学，随着计算机用信息科学的飞速发展，已经渗透并应用于各个领域。本次设计中，我设计的是人力资源管理系统。虽然设计得不是很完善，但是通过设计，我们对管理信息系统的历史、一般模式、系统分析与系统设计、开发工具用其功能等有一个较为全面深刻的认识。

在该项目的开发过程中遇到不少困难，如：数据库的设计中，如何处理多对多的关系和如何设计主键，是两个有着较大难度、需要重点考虑的问题。发现的问题非常多，就不一一描述了。

**本次设计加强了我的实践精神,增强了我的自主学习能力**。本系统设计对于我来说较为复杂，因此我进行了很多次的测试和修改，在编写系统的过程中，我虚心的请教了的老师和相关专业的师兄；通过和他们的交流，我获益良多；而且这样不仅加快了设计进程，也使我们长进了不少。这使我们明白，经验在完成任务的过程中有多么重要。

由于时间有限，加之管理信息系统对我们来说是一个全新的课题，因此本设计也有不足之处。

### 参考文献 ###

\[1\]齐治昌，谭庆平，宁洪．软件工程\[M\]．北京:高等教育出版社，2021，04.  
\[2\]王德永，张佰慧―数据库原理与应用----SQL Server版（项目式）\[M\]人民邮电版社 2021.5  
\[3\]李武，刘清梅.基于B/S模式的大学生就业指导信息系统设计\[M\].2020  
\[4\]常中华.基于WEB的SQL 数据库管理系统的设计\[M\].2020  
\[5\]屈辉立，陈可明，石武信． JSP网站编程教程\[M\]．北京希望电子出版社，2021  
\[6\]柏亚军等．JSP编程基础及应用实例集锦\[M\]．人民邮电出版社，2021  
\[7\]邵雨舟.便利店仓库系统的设计与实现\[J\].电脑知识与技术,2019,15(21):87-89.DOI:10.14004/j.cnki.ckt.2019.2336.  
\[8\]熊瑛.便利店仓库系统的设计与实现\[J\].信息与电脑(理论版),2021,33(17):116-119.  
\[9\]陈锟. 河南省便利店仓库系统设计与开发\[D\].大连理工大学,2021.  
\[10\]魏燕. 便利店仓库调查系统的研究\[D\].浙江工业大学,2021.  
\[11\]傅伟,王浩,蒋道霞,庄小将.基于B/S的便利店仓库系统的设计与实现\[J\].兰州石化职业技术学院学报,2021,14(02):32-34.  
\[12\]杨佳怿.便利店仓库系统研究\[J\].河南科技,2021(10):4-6.  
\[13\]李文纯,刘天法.便利店仓库系统的设计与应用\[J\].教育信息化,2021(13):40-41.  
\[14\]郭剑毅,申立中,马桂芳,温琪,张世华,车文刚.基于C/S与B/S的超市管理信息系统的设计与实现\[J\].计算机工程与应用,2021(01):212-214.  
\[15\]卢致伟. 基于Web的便利店仓库管理系统设计与实现\[D\].厦门大学,2021.  
\[16\]赵瑛.美国便利店仓库现状及其启示\[J\].中国冶金教育,2020(01):35-37.DOI:10.16312/j.cnki.cn11-3775/g4.2020.01.011.

### 致谢 ###

在此论文完成之际，我的心里感到特别高兴和激动，在这里，我打心里向我的导师和同学们表示衷心的感谢！因为有了老师的谆谆教导，才让我学到了很多知识和做人的道理，同时在重新温故了以前课堂所学的知识。在做毕业设计的过程中，遇到难解的问题，老师都会及时和我解释，那么仔细和认真，让后收益很多，我打心里感谢我的导师。

在相关的实际问题的讨论中，我的导师总是孜孜不倦的引导着我，帮助着我。每周一次的进度检查和问题讨论，促使我在正确的道路上大步前进，不仅工作的按时保质保量的完成得到了保证，我本人的研究能力，工作的态度也得到了充分的锻炼和提高。这些宝贵的品质影响着我，毫无疑问，它们对我以后的工作，学习，生活都会起到深远而长久的良好影响。也能为人生打下一个夯实地基础！在此致以教授我的导师深切感激和真挚感谢！

另外也感谢我的父母，朋友和同学们的帮助。在做设计感觉受挫，枯燥与迷茫时，是他们在悉心的为我释放压力，鼓励我不要气馁，勇敢面对。每周一次和父母的通话，与朋友和同学的长谈后都使我精神放松，斗志倍增，以饱满的热情重新投入到工作中去，感谢他们，正是他们的不懈支持和充分理解才能使我顺利完成毕业设计。

--------------------

> **引用说明：**  
> 引用以上内容的用户，必须同意以下内容，否则请勿引用！
> 
> 1.  出于自愿而使用本文，了解引用本文的风险，且同意自己承担引用本文的风险。
> 2.  利用本文内容构建的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关，作者对此不承担任何责任。
> 3.  在任何情况下，对于因引用本文而导致的任何难以合理预估的损失（包括但不仅限于商业利润损失、业务中断与业务信息丢失），作者概不承担任何责任。
> 4.  必须了解使用本文内容的风险，作者不对其提供二次维护服务，也不提供任何有关资料。

![在这里插入图片描述][3a01dc60e62c415b812015851343f1c0.png_pic_center]

[Designer]: https://blog.csdn.net/qq_41464123
[bb62eada6fdd449e808560ff77d54b25.png_pic_center]: https://img-blog.csdnimg.cn/bb62eada6fdd449e808560ff77d54b25.png#pic_center
[6ca91d12bd4647c49cdb749d30b31e2d.png_pic_center]: https://img-blog.csdnimg.cn/6ca91d12bd4647c49cdb749d30b31e2d.png#pic_center
[d6641d079f114071a56602edb3b8d83a.png_pic_center]: https://img-blog.csdnimg.cn/d6641d079f114071a56602edb3b8d83a.png#pic_center
[012fc42e0dc54b8583415baf1f61902a.png_pic_center]: https://img-blog.csdnimg.cn/012fc42e0dc54b8583415baf1f61902a.png#pic_center
[d3c1a8366980426883e743e6c1f7eb97.png_pic_center]: https://img-blog.csdnimg.cn/d3c1a8366980426883e743e6c1f7eb97.png#pic_center
[b95a4f910cc04cb18bcb0555992b432f.png_pic_center]: https://img-blog.csdnimg.cn/b95a4f910cc04cb18bcb0555992b432f.png#pic_center
[b19629bcce5c4353a7e3839816d75e83.png_pic_center]: https://img-blog.csdnimg.cn/b19629bcce5c4353a7e3839816d75e83.png#pic_center
[9230e491dc4347ecad8d0ea2174457fe.png_pic_center]: https://img-blog.csdnimg.cn/9230e491dc4347ecad8d0ea2174457fe.png#pic_center
[cf34a7d350454ac19c253ae7863eae75.png_pic_center]: https://img-blog.csdnimg.cn/cf34a7d350454ac19c253ae7863eae75.png#pic_center
[82c5eadba6df4bc18d13ae29005e5630.png_pic_center]: https://img-blog.csdnimg.cn/82c5eadba6df4bc18d13ae29005e5630.png#pic_center
[e1d9dbcd97254af08f13337e0c6b127f.png_pic_center]: https://img-blog.csdnimg.cn/e1d9dbcd97254af08f13337e0c6b127f.png#pic_center
[6ab86952021e49a9b3ea671a26f324f5.png_pic_center]: https://img-blog.csdnimg.cn/6ab86952021e49a9b3ea671a26f324f5.png#pic_center
[c6e84555f4be42e4b6cfca6b07d31f1f.png_pic_center]: https://img-blog.csdnimg.cn/c6e84555f4be42e4b6cfca6b07d31f1f.png#pic_center
[93885f6035774af1bb53fc4bce90d7ec.png_pic_center]: https://img-blog.csdnimg.cn/93885f6035774af1bb53fc4bce90d7ec.png#pic_center
[e3b176bbc5f34cc9b8219c44c6ef0f2e.png_pic_center]: https://img-blog.csdnimg.cn/e3b176bbc5f34cc9b8219c44c6ef0f2e.png#pic_center
[2e95b304c2c74a2f8b1a1bbec471a7a6.png_pic_center]: https://img-blog.csdnimg.cn/2e95b304c2c74a2f8b1a1bbec471a7a6.png#pic_center
[bc737d6c54f743e9abe5a986b1a981ec.png_pic_center]: https://img-blog.csdnimg.cn/bc737d6c54f743e9abe5a986b1a981ec.png#pic_center
[ab558a03a62e4810a4ad817658e9099d.png_pic_center]: https://img-blog.csdnimg.cn/ab558a03a62e4810a4ad817658e9099d.png#pic_center
[c136b57b230246478b66861584182946.png_pic_center]: https://img-blog.csdnimg.cn/c136b57b230246478b66861584182946.png#pic_center
[faeeb4bdfc444b02a86911db89e9bc4b.png_pic_center]: https://img-blog.csdnimg.cn/faeeb4bdfc444b02a86911db89e9bc4b.png#pic_center
[3a01dc60e62c415b812015851343f1c0.png_pic_center]: https://img-blog.csdnimg.cn/3a01dc60e62c415b812015851343f1c0.png#pic_center