@TOC
ssm787基于BS的超市商品管理系统的设计与实现+vue
研究背景与现状
时代的进步使人们的生活实现了部分自动化，由最初的全手动办公已转向手动+自动相结合的方式。比如各种办公系统、智能电子电器的出现，都为人们生活的享受提供帮助。采用新型的自动化方式可以减少手动的办公时间，增加正确率从而增加人们的幸福指数。时代进步中计算机技术的发展尤为突出，渗透进生活的方方面面，各种App、 网站、管理系统、小程序迅速占领市场。
对于超市商品管理的现实问题，大多数超市采用人工加办公辅助软件的方式进行管理，这类方式对于信息的发布和流程、后续的资料整理工作都是非常大的帮助。但一般都还是针对管理人员使用，如果员工想要操作需要一步一步进行批准，非常复杂。现实超市商品管理工作中缺少一种更为优质、简单的方法途径。
1.2课题实现目的和研究意义
时代的发展也为人们提出了更高的要求，只有不断的学习和发展才可以前进。目前我们正在科技和网络发展的关键点，网络已实现普及。然而还是有大量的企业、机构采用传统的办公方式进行处理事务，当然传统的方式对于小规模的企业、机构来说更为适合，但想要发展就需要以发展的目光来看待问题。如果可以采用更科学、省力的方式进行办公将会带来变革。
超市的商品日常管理关系着超市的业绩和销售、亏损。超市对商品的进销存要严格把关，更要考虑到商品的质量、到期情况。以往都是由员工人工统计库存情况，超市审核力度不好把控，监督不了商品的实际情况。如果采用共享的平台，把商品管理的相关负责人员都结合到一起，起到共同监管的目的就可以解决这类问题。商品的所有信息都可以由管理员直接管理，员工的操作过程也可由相关管理员负责把控，把员工的管理工作实现流程化、清晰化，减少暗箱操作，提供更为透明的工作流程，实现超市商品管理的真正价值。
1.3课题研究内容
本系统从超市商品管理的工作出发，包括管理员和采购员工、销售员工三种权限。管理员的功能为个人中心、管理员管理、商品管理、销售员工管理、采购员工管理、商品销售管理、采购进退货管理、供应商管理等，实现系统里信息的全面管控，采购员工的功能为个人资料管理和商品管理、采购进货管理、采购退货管理、供应商信息管理。销售员工负责商品信息和商品销售的管理，三种权限的用户功能相辅相成，不可缺少，共同帮助超市的商品日常运营管理。本系统实现“放手”、“透明化”管理，使商品的管理更加简单、轻松。
1.4论文结构安排
本篇论文的结构分为摘要、目录、正文部分、总结、致谢和参考文献。正文部分为核心。正文部分分为：
第1章绪论，从课题的开发背景、现状、目的意义等进行本课题的介绍；
第2章系统分析，从系统的开发技术、环境、可行性、操作流程等进行系统的详细分析；
第3章系统设计，从系统的功能图、数据库设计、ER图、数据库表进行系统的设计；
第4章系统实现，主要介绍系统的实现界面和实现内容；
第5章系统测试，讲解主要功能的测试过程以及测试结果。
第2章 系统分析
2.1系统开发中使用相关技术介绍
2.1.1Java介绍
Java语言是从C++进行衍生出来的一种新型编程语言，他保留了c++语言中很多核心技术，继承了他的面向对象的优点，而且舍弃了很多缺点，比如在Java语言中去掉了指针，这样可以减少很多错误，还去掉了运算符，这样提高了运行处理效率。还增加了很多优点，添加了垃圾回收功能，提高了代码的使用率，总体来说，Java语言是一个分布式的、高性能的、多线程的开发语言。Java从开发之初就是打算作为一个开放性的语言技术，这就要求需要有很高的兼容性，首先就需要同样的代码程序可以在不同的计算机上运行，还要支持不同的网络，同时还要注重安全性，方便用户使用。Java语言最突出的特点就是面向对象，可以把一个对象当成很多代码状态的物体，然后进行自定义类型进行关联操作，这样进行集合起来的代码就叫对象，面向对象的方法可以使设计根据的简单，方便管理，还可以减少失败。C++最大的一个缺点就是没有垃圾回收机制，通常在编程的过程中，初始化对象时候系统会自动分配一个内存地址，如果不需要这个对象的时候，系统不能进行自动删除和回收，这样造成了很大的内存浪费，导致系统卡顿，会让系统非常的不稳定，严重的话甚至会系统崩溃，而Java语言就是在这个基础上设置了垃圾回收机制，当一个使用过的对象没有引用的时候，系统可以自动删除，回收内存，这样就可以很好的避免了内存泄漏，保障了程序的安全，同时提高了运行效率。
2.1.2Mysql数据库介绍
Mysql数据库是目前比较流行的一种开源数据库，可以支持多种编译器进行在线测试，从而保证了代码的可移植性，而且支持多种操作系统有很好的跨平台性，为编程语言提供所需要的API,可以多线程同时运行，这样有效的减少了内存占用率，提高了使用效率。运行的过程中还能自动优化sql查询算法，这样使数据查询速度达到了显著的提高，而且Mysql数据库还可以作为一个独立的程序在客户端中单独使用，也可以嵌入到其他程序中搭配一起使用。Mysql数据库效率非常的高，可以处理上千万条数据，可以同时支持多种不同的数据引擎，而且是开源的软件，不需要支付任何费用，而且可以进行定制，使用GPL协议进行代码修改，开发属于自己的Mysql系统。综上所述，Mysql数据库是一个非常受欢迎的一个数据库，体积小，速度快，最重要的还是免费，非常适合中小型项目的开发使用。
2.1.3B/s架构介绍
B/s架构是随着网络快速发展而开发出来的一种网络框架，跟传统的cs框架最大的区别就是，直接把代码部署到网络服务器中，这样方便了系统的后期开发和维护，然后用户可以直接通过浏览器进行代码的访问，不需要额外安装任何的软件客户端，简化了用户的使用。B/s结构是指Browser／Server结构，意思就是只需要安装一个服务器就行了， 客户端方面主要就是采用浏览器进行访问，主要是对传统的c/s架构的一种改进，采用www浏览器技术和其他Script语言技术，把系统实现需要的代码全部部署到了服务器上面，是一种新型的架构技术，可以直接借助浏览器进行数据访问和数据交互。最大的优点就是，不需要安装客户端，不受环境影响，可以实时实地的进行访问，其次就是维护非常的方便。当然了有优点也有不可避免的缺点，首先是在访问速度方面，比较受网络的影响，不像C/s架构一样，处理速度非常的快，直接在本机就可以完成数据交互，而B/s需要借助网络才能进行服务器访问，必须保证有顺畅的网络，才能有好的使用体验，其次就是安全性，因为所有数据存储在网络服务器中，比较容易受到攻击，从而造成数据泄漏，这是目前B/s架构存在的最大的弊端。所以说B/s架构适合一些电子商务类的网站，适合比较有用户共享交互的，开放性的网站的设计与开发。所以我开发本系统采用B/s架构是非常适合的，可以达到多人同时登录系统，可以实现信息交互，而且方便随时随地的进行数据访问，而且我对B/s架构开发比较熟悉，所以本系统就采用B/s架构来进行开发设计。
2.2系统可行性分析
系统的可行性关系着系统开发的成功和市场，没有经过详细可行性分析的系统开发过程会非常艰难。系统可行性从系统的经济方面、操作方面和技术方面进行分析。
2.2.1经济可行性分析
系统开发所需要的经济主要在系统的成本问题、运行问题和维护问题上。本系统在开发中不需要经济的支撑，所需要的开发软件和设备都是在已有条件上。本系统在运行里所需要的环境也都为免费就可以下载的。本系统在后期的维护上也只需要技术支持就可以完成。所以本系统在经济可行性上可以通过。
2.2.2操作可行性分析
本系统在开发中充分调查了所使用用户的操作习惯和风格，所有的操作流程也都为简单的流程，在操作中也设置了提醒。用户在使用本系统时只要按照提示就可以完成，非常简单。所以本系统在操作可行性上可以通过。
2.2.3技术可行性分析
本系统所需要的技术支持为Java语言，Mysql数据库，Vue技术和B/s框架等。所使用的技术都为开源成熟的技术，也是目前流行的技术之一。使用这些技术开发的系统可以保证系统的前詹性和稳定性、安全性。所以本系统在技术可性性上可以通过。
2.3系统需求分析
目前计算机、网络技术已进入到各行各业。超市做为社会的重要组成部分更应该身体力行，超市商品管理里的所有工作都是围绕商品而展开，每件商品的档案信息都非常多，如果采用传统的管理方式非常容易造成混乱，而且对于商品的信息查询非常不便。对于商品的日期、质量、数据都需要额外的严谨，如果还是采用传统的商品管理方式对员工、商品都做不到百分百的监管，员工的操作也实现不了透明。所以非常需要新的管理方式出现。
2.4系统性能分析
系统在设计时也需要注意系统的性能，一般系统的性能方面包括系统的稳定性、安全性、界面设计方面、操作方面、协调等方面。
- 本系统在界面设计方面尊重所有的使用权限，多方面参考不同使用权限的使用习惯以及风格，综合不同的情况整理出符合大众要求的系统界面。做到自己的最大能力；
- 在系统的稳定性、安全性方面采用必要的登录验证，不同权限采用不同的账号和密码。为了使系统更为稳定采用成熟的开发环境和技术，在代码编写时尽可能的减少冗余，保证系统的运行效率；
- 在系统的操作流程方面，尽可能的采用简单的流程来实现用户要求的反馈，当用户提出需求时，可以用最少的步骤进行提问操作；
- 本系统采用数据库和功能界面分开设计，这样可以保证当系统的功能运行出错时不会影响系统里的数据，也就保证了数据的安全。
2.5系统功能分析
系统的功能分析决定了系统的功能设计，完整详细的系统功能分析可以使系统的开发事半功倍。本系统的功能围绕管理员、销售员工、采购员工三种权限设计。根据不同权限的不同需求设计出更符合用户要求的功能。本系统中管理员可以管理所有内容，包括使用权限、商品信息、采购进退货信息、商品销售信息等。本基于B/S的超市商品管理系统管理员的用例图如下图2-1所示：
图2-1管理员用例图
采购员工可以管理个人资料、商品信息、采购进货、采购退货、供应商，采购员工用例图如下图2-2所示：
图2-2采购员工用例图
销售员工可以管理商品信息和商品销售信息、个人中心。销售员工用例图如下图2-3所示：
图2-3销售员工用例图
2.6系统操作流程分析
信息从如何产生到反馈结果的过程可以称为信息的流程。分析好系统的操作流程才可以使系统正确运行不会出现Bug。本系统的流程为管理员先进行登录，登录后管理员工的账号、密码等信息。不同员工使用管理员设置的账号密码进行登录，然后进行个人资料的修改、商品管理、销售、采购等操作。当员工操作后，管理员可以在管理员界面立即收到操作后的信息，并且可以进行修改。本基于B/S的超市商品管理系统的操作流程如下图2-4所示：
图2-4基于B/S的超市商品管理系统操作流程图
第3章 系统设计
3.1系统功能结构设计
系统的功能结构是采用树形图来绘制功能设计。根据分析所得，本系统的功能设计为管理员和销售员工、采购员工三部分。管理员为高级角色，可以管理系统里的所有信息，包括员工信息。本基于B/S的超市商品管理系统的功能结构设计图如下图3-1所示：
图3-1基于B/S的超市商品管理系统功能结构图
3.2数据库设计
数据库为数据的仓库，决定了数据的保存和修改、删除、调用等。数据库的稳定决定了系统里数据的安全。本系统采用Mysql数据库，在建立数据库时采用Root用户名。数据库的建立过程为先进行数据的ER图设计然后进行数据库表的实现。
3.2.1数据ER图设计
数据ER图中记录了关系、实体、属性。实体与实体的关系决定了数据在调用时的正确与否，实体的属性决定了该实体的内容。数据ER图的设计同样重要，也是数据库建立的基础。
通过系统中的功能数据分析，本系统的实体主要有员工、管理员、商品信息、销售信息、采购信息等。
- 管理员的ER图中的属性有账号、密码、权限。管理员ER图如下图3-2所示：
图3-2管理员ER图
- 员工的ER图里的属性有账号、姓名、编号等，员工的ER图如下图3-3所示：
图3-3员工ER图
- 商品信息的ER图里的属性有名称、类别、图片、价格、数量等，商品的ER图如下图3-4所示：
图3-4商品信息ER图
(4)采购的ER图里的属性有名称、编号、供应商、负责人等，采购ER图如下图3-5所示：
图3-5采购ER图
（5）销售信息ER图里的属性有编号、名称、价格、操作员、库存、数量等，销售信息ER图如下图3-6所示：
图3-6销售信息ER图
3.2.2数据库表设计
数据库表是把ER图进行详细化、实体化。不同的表名下保存着相对应的表信息数据。在数据库表里记录着数据的主键、外键、数据类型、长度等。本基于B/S的超市商品管理系统所创建的数据库表有管理员信息表、员工信息表、商品信息表、库存信息表、进货入库信息表等。本基于B/S的超市商品管理系统的数据库表如下表3-1—3-11所示：
表3-1 caigoujinhuo
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | int | 11 | 是 | 是 | 否 | auto_increment | |||
| 2 | shangpin_id | int | 11 | 是 | ||||||
| 3 | gongyingshang_id | int | 11 | 是 | ||||||
| 4 | caigouyuangong_id | int | 11 | 是 | ||||||
| 5 | caigoujinhuo_uuid_number | varchar | 200 | 是 | ||||||
| 6 | caigoujinhuo_number | int | 11 | 是 | ||||||
| 7 | caigoujinhuo_content | text | 是 | |||||||
| 8 | insert_time | timestamp | 是 | |||||||
| 9 | create_time | timestamp | 是 | |||||||
表3-2 caigoutuihuo
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | int | 11 | 是 | 是 | 否 | auto_increment | |||
| 2 | shangpin_id | int | 11 | 是 | ||||||
| 3 | caigouyuangong_id | int | 11 | 是 | ||||||
| 4 | caigoutuihuo_uuid_number | varchar | 200 | 是 | ||||||
| 5 | caigoutuihuo_number | int | 11 | 是 | ||||||
| 6 | caigoutuihuo_content | text | 是 | |||||||
| 7 | insert_time | timestamp | 是 | |||||||
| 8 | create_time | timestamp | 是 | |||||||
表3-3 caigouyuangong
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | int | 11 | 是 | 是 | 否 | auto_increment | |||
| 2 | username | varchar | 200 | 是 | ||||||
| 3 | password | varchar | 200 | 是 | ||||||
| 4 | caigouyuangong_uuid_number | varchar | 200 | 是 | ||||||
| 5 | caigouyuangong_name | varchar | 200 | 是 | ||||||
| 6 | caigouyuangong_phone | varchar | 200 | 是 | ||||||
| 7 | caigouyuangong_id_number | varchar | 200 | 是 | ||||||
| 8 | caigouyuangong_photo | varchar | 200 | 是 | ||||||
| 9 | sex_types | int | 11 | 是 | ||||||
| 10 | caigouyuangong_email | varchar | 200 | 是 | ||||||
| 11 | create_time | timestamp | 是 | |||||||
表3-4 config
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | bigint | 20 | 是 | 是 | 否 | auto_increment | |||
| 2 | name | varchar | 100 | 否 | ||||||
| 3 | value | varchar | 100 | 是 | ||||||
表3-5 dictionary
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | bigint | 20 | 是 | 是 | 否 | auto_increment | |||
| 2 | dic_code | varchar | 200 | 是 | ||||||
| 3 | dic_name | varchar | 200 | 是 | ||||||
| 4 | code_index | int | 11 | 是 | ||||||
| 5 | index_name | varchar | 200 | 是 | ||||||
| 6 | super_id | int | 11 | 是 | ||||||
| 7 | beizhu | varchar | 200 | 是 | ||||||
| 8 | create_time | timestamp | 是 | |||||||
表3-6 gongyingshang
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | int | 11 | 是 | 是 | 否 | auto_increment | |||
| 2 | gongyingshang_name | varchar | 200 | 是 | ||||||
| 3 | gongyingshang_types | int | 11 | 是 | ||||||
| 4 | gongyingshang_xinyongdengji_types | int | 11 | 是 | ||||||
| 5 | gongyingshang_content | text | 是 | |||||||
| 6 | create_time | timestamp | 是 | |||||||
表3-7 shangpin
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | int | 11 | 是 | 是 | 否 | auto_increment | |||
| 2 | shangpin_uuid_number | varchar | 200 | 是 | ||||||
| 3 | shangpin_name | varchar | 200 | 是 | ||||||
| 4 | shangpin_photo | varchar | 200 | 是 | ||||||
| 5 | shangpin_types | int | 11 | 是 | ||||||
| 6 | shangpin_kucun_number | int | 11 | 是 | ||||||
| 7 | shangpin_danwei | varchar | 200 | 是 | ||||||
| 8 | shangpin_jinjia_money | decimal | 10 | 2 | 是 | |||||
| 9 | shangpin_shoujia_money | decimal | 10 | 2 | 是 | |||||
| 10 | shangpin_content | text | 是 | |||||||
| 11 | insert_time | timestamp | 是 | |||||||
| 12 | create_time | timestamp | 是 | |||||||
表3-8 token
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | bigint | 20 | 是 | 是 | 否 | auto_increment | |||
| 2 | userid | bigint | 20 | 否 | ||||||
| 3 | username | varchar | 100 | 否 | ||||||
| 4 | tablename | varchar | 100 | 是 | ||||||
| 5 | role | varchar | 100 | 是 | ||||||
| 6 | token | varchar | 200 | 否 | ||||||
| 7 | addtime | timestamp | 否 | CURRENT_TIMESTAMP | ||||||
| 8 | expiratedtime | timestamp | 否 | CURRENT_TIMESTAMP | ||||||
表3-9 users
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | bigint | 20 | 是 | 是 | 否 | auto_increment | |||
| 2 | username | varchar | 100 | 否 | ||||||
| 3 | password | varchar | 100 | 否 | ||||||
| 4 | role | varchar | 100 | 是 | 管理员 | |||||
| 5 | addtime | timestamp | 否 | CURRENT_TIMESTAMP | ||||||
表3-10 xiaoshou
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | int | 11 | 是 | 是 | 否 | auto_increment | |||
| 2 | shangpin_id | int | 11 | 是 | ||||||
| 3 | xiaoshouyuangong_id | int | 11 | 是 | ||||||
| 4 | xiaoshou_uuid_number | varchar | 200 | 是 | ||||||
| 5 | xiaoshou_kucun_number | int | 11 | 是 | ||||||
| 6 | xiaoshou_zongchengben_money | decimal | 10 | 2 | 是 | |||||
| 7 | xiaoshou_zongshoujia_money | decimal | 10 | 2 | 是 | |||||
| 8 | xiaoshou_zonglirun_money | decimal | 10 | 2 | 是 | |||||
| 9 | xiaoshou_content | text | 是 | |||||||
| 10 | insert_time | timestamp | 是 | |||||||
| 11 | create_time | timestamp | 是 | |||||||
表3-11 xiaoshouyuangong
| 序号 | 列名 | 数据类型 | 长度 | 小数位 | 标识 | 主键 | 外键 | 允许空 | 默认值 | 说明 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | id | int | 11 | 是 | 是 | 否 | auto_increment | |||
| 2 | username | varchar | 200 | 是 | ||||||
| 3 | password | varchar | 200 | 是 | ||||||
| 4 | xiaoshouyuangong_uuid_number | varchar | 200 | 是 | ||||||
| 5 | xiaoshouyuangong_name | varchar | 200 | 是 | ||||||
| 6 | xiaoshouyuangong_phone | varchar | 200 | 是 | ||||||
| 7 | xiaoshouyuangong_id_number | varchar | 200 | 是 | ||||||
| 8 | xiaoshouyuangong_photo | varchar | 200 | 是 | ||||||
| 9 | sex_types | int | 11 | 是 | ||||||
| 10 | xiaoshouyuangong_email | varchar | 200 | 是 | ||||||
| 11 | create_time | timestamp | 是 | |||||||
第4章 系统详细实现
4.1用户登录功能的详细实现
用户登录界面起到验证身份的作用，本界面采用图片背景进行设计。在用户登录界面里设置了程序的名称和用户、密码、权限的文本框。在文本框下是登录按钮。用户在信息输入完成后可以使用这个按钮进行相对应的操作。用户登录功能的实现界面如下图4-1所示：
图4-1用户登录实现界面
4.2管理员权限的功能实现
4.2.1个人中心管理功能的详细实现
个人中心管理功能的作用为修改密码和添加、删除管理员用户。本功能可以实现新增管理员和减少管理员。个人中心管理功能的实现界面如下图4-2所示：
图4-2个人中心管理功能的界面实现
4.2.2员工信息管理功能的详细实现
管理员负责员工信息的录入和管理。员工信息包括销售员工和采购员工，员工的账号和密码则是由本功能进行添加。管理员查询员工信息的功能实现如下图4-3所示：
图4-3管理员查询员工信息的实现界面
4.2.3商品信息管理功能的详细实现
管理员可以对商品的信息进行管理、审核。管理员查询商品信息的实现界面如下图4-4所示：
图4-4管理员查询商品信息的实现界面
4.2.4供应商管理功能的详细界面实现
管理员可以对供应商信息进行管理和添加。管理员查询供应商信息的实现界面如下图4-5所示：
图4-5管理员查询供应商功能的运行界面
4.2.5商品销售管理功能的详细实现
管理员可以添加和管理商品的销售信息，查询商品销售功能的界面实现如下图4-6所示：
图4-6管理员查询商品销售功能的运行界面
4.2.6商品销售统计功能的详细实现
管理员可以对销售数据进行统计，功能的实现界面如下图4-7所示：
图4-7管理员商品销售统计功能的运行界面
4.2.7采购进退货管理功能的实现界面
管理员可以查看和管理采购的进货信息、退货信息，实现界面如下图4-8所示：
图4-8管理员查询采购进退货功能的实现界面
4.2.8基础数据管理功能的实现界面
基础数据包括商品类型和供应商类型，管理员可以设置不同的类型。实现界面如下图4-9所示：
图4-9基础数据管理功能的实现界面
4.3采购员工权限的功能详细实现
4.3.1采购进货管理功能的详细实现
采购员工功能里可以添加采购进货信息。采购员工添加采购进货功能的实现界面如下图4-10所示：
图4-10采购员工添加采购进货功能的运行界面
4.3.2采购退货管理功能的详细实现
采购员工在退货功能里可以添加退货信息和统计退货信息。采购员工添加采购退货功能的实现界面如下图4-11所示：
图4-11添加采购退货功能的运行界面
4.3.3商品管理功能的详细实现
采购员工在商品管理里可以查看到商品的库存，实现界面如下图4-12所示：
图4-12查询商品信息功能的运行界面
4.3.4供应商管理功能的详细实现
采购员工可以查询供应商，供应商查询实现界面如下图4-13所示：
图4-13供应商查询功能的运行界面
4.4销售员工的功能实现
销售员工主要负责商品的销售登记，实现界面如下图4-14所示：
图4-14销售员工的功能实现界面
第5章 系统测试
系统测试的方
CommonServiceImpl.java
package com.service.impl;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.dao.CommonDao;
import com.service.CommonService;
/**
* 系统用户
* @author
* @date
*/
@Service("commonService")
public class CommonServiceImpl implements CommonService {
@Autowired
private CommonDao commonDao;
@Override
public List<String> getOption(Map<String, Object> params) {
return commonDao.getOption(params);
}
@Override
public Map<String, Object> getFollowByOption(Map<String, Object> params) {
return commonDao.getFollowByOption(params);
}
/**
tableName 查询表
condition1 条件1
condition1Value 条件1值
condition2 条件2
condition2Value 条件2值
average 计算平均评分
* */
public Map<String, Object> queryScore(Map<String, Object> params){
return commonDao.queryScore(params);
}
@Override
public void sh(Map<String, Object> params) {
commonDao.sh(params);
}
@Override
public int remindCount(Map<String, Object> params) {
return commonDao.remindCount(params);
}
@Override
public Map<String, Object> selectCal(Map<String, Object> params) {
return commonDao.selectCal(params);
}
@Override
public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
return commonDao.selectGroup(params);
}
@Override
public List<Map<String, Object>> selectValue(Map<String, Object> params) {
return commonDao.selectValue(params);
}
@Override
public List<Map<String, Object>> chartBoth(Map<String, Object> params) {
return commonDao.chartBoth(params);
}
@Override
public List<Map<String, Object>> chartOne(Map<String, Object> params) {
return commonDao.chartOne(params);
}
/**
* 新的级联字典表的 分组求和统计
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectGroupSum(Map<String, Object> params) {
return commonDao.newSelectGroupSum(params);
}
/**
* 新的级联字典表的 分组条数统计
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectGroupCount(Map<String, Object> params) {
return commonDao.newSelectGroupCount(params);
}
/**
* 当前表的日期分组求和
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectDateGroupSum(Map<String, Object> params) {
return commonDao.newSelectDateGroupSum(params);
}
/**
* 查询字典表的分组统计总条数
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectDateGroupCount(Map<String, Object> params) {
return commonDao.newSelectDateGroupCount(params);
}
@Override
public int plusCloumNumber(Map<String, Object> params) {
return commonDao.plusCloumNumber(params);
}
@Override
public int reduceCloumNumber(Map<String, Object> params) {
return commonDao.reduceCloumNumber(params);
}
@Override
public int updateCloumValue(Map<String, Object> params) {
return commonDao.updateCloumValue(params);
}
/**
* 饼状图
* -- 饼状图 查询当前表
-- 查询字典表【月】
-- 统计 -- 查询某个月的每个类型的订单销售数量
-- 求和 -- 查询某个月的每个类型的订单销售额
-- 查询某个字符串【月】
-- 统计 -- 查询某个月的每个员工的订单销售数量
-- 求和 -- 查询某个月的每个员工的订单销售额
-- 查询时间【年】
-- 统计 -- 查询每个月的订单销售数量
-- 求和 -- 查询每个月的订单销售额
-- 饼状图 查询级联表
-- 查询字典表
-- 统计 -- 查询某个月的每个类型的订单销售数量
-- 求和 -- 查询某个月的每个类型的订单销售额
-- 查询某个字符串
-- 统计 -- 查询某个月的每个员工的订单销售数量
-- 求和 -- 查询某个月的每个员工的订单销售额
-- 查询时间
-- 统计 -- 统计每个月的订单销售数量
-- 求和 -- 查询每个月的订单销售额
*/
/**
* 柱状图
-- 柱状图 查询当前表
-- 某个【年，月】
-- 当前表 2 级联表 1
-- 统计
-- 【日期，字符串，下拉框】
-- 求和
-- 【日期，字符串，下拉框】
-- 柱状图 查询级联表
-- 某个【年，月】
-- 统计
-- 【日期，字符串，下拉框】
-- 求和
-- 【日期，字符串，下拉框】
*/
/**
* 柱状图求和
* @param params
* @return
*/
public List<Map<String, Object>> barSum(Map<String, Object> params){
return commonDao.barSum(params);
}
/**
* 柱状图统计
* @param params
* @return
*/
public List<Map<String, Object>> barCount(Map<String, Object> params){
return commonDao.barCount(params);
}
}
CaigoujinhuoServiceImpl.java
package com.service.impl;
import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.CaigoujinhuoDao;
import com.entity.CaigoujinhuoEntity;
import com.service.CaigoujinhuoService;
import com.entity.view.CaigoujinhuoView;
/**
* 采购进货 服务实现类
*/
@Service("caigoujinhuoService")
@Transactional
public class CaigoujinhuoServiceImpl extends ServiceImpl<CaigoujinhuoDao, CaigoujinhuoEntity> implements CaigoujinhuoService {
@Override
public PageUtils queryPage(Map<String,Object> params) {
if(params != null && (params.get("limit") == null || params.get("page") == null)){
params.put("page","1");
params.put("limit","10");
}
Page<CaigoujinhuoView> page =new Query<CaigoujinhuoView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,params));
return new PageUtils(page);
}
}
TokenServiceImpl.java
package com.service.impl;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Service;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.dao.TokenDao;
import com.entity.TokenEntity;
import com.entity.TokenEntity;
import com.service.TokenService;
import com.utils.CommonUtil;
import com.utils.PageUtils;
import com.utils.Query;
/**
* token
* @author
*/
@Service("tokenService")
public class TokenServiceImpl extends ServiceImpl<TokenDao, TokenEntity> implements TokenService {
@Override
public PageUtils queryPage(Map<String, Object> params) {
Page<TokenEntity> page = this.selectPage(
new Query<TokenEntity>(params).getPage(),
new EntityWrapper<TokenEntity>()
);
return new PageUtils(page);
}
@Override
public List<TokenEntity> selectListView(Wrapper<TokenEntity> wrapper) {
return baseMapper.selectListView(wrapper);
}
@Override
public PageUtils queryPage(Map<String, Object> params,
Wrapper<TokenEntity> wrapper) {
Page<TokenEntity> page =new Query<TokenEntity>(params).getPage();
page.setRecords(baseMapper.selectListView(page,wrapper));
PageUtils pageUtil = new PageUtils(page);
return pageUtil;
}
@Override
public String generateToken(Integer userid,String username, String tableName, String role) {
TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("userid", userid).eq("role", role));
String token = CommonUtil.getRandomString(32);
Calendar cal = Calendar.getInstance();
cal.setTime(new Date());
cal.add(Calendar.HOUR_OF_DAY, 1);
if(tokenEntity!=null) {
tokenEntity.setToken(token);
tokenEntity.setExpiratedtime(cal.getTime());
this.updateById(tokenEntity);
} else {
this.insert(new TokenEntity(userid,username, tableName, role, token, cal.getTime()));
}
return token;
}
@Override
public TokenEntity getTokenEntity(String token) {
TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("token", token));
if(tokenEntity == null || tokenEntity.getExpiratedtime().getTime()<new Date().getTime()) {
return null;
}
return tokenEntity;
}
}
HomeChart.vue
<template>
<div id="home-chart" style="width:100%;height:400px;"></div>
</template>
<script>
export default {
mounted() {
this.homeChart();
},
methods: {
homeChart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("home-chart"));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: "axis"
},
legend: {
data: ["访问量", "用户量", "收入"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
]
},
yAxis: {
type: "value"
},
series: [
{
name: "访问量",
type: "line",
stack: "总量",
data: [
120,
132,
101,
134,
90,
230,
210,
120,
132,
101,
134,
90,
230
]
},
{
name: "用户量",
type: "line",
stack: "总量",
data: [
220,
182,
191,
234,
290,
330,
310,
182,
191,
234,
290,
330,
310
]
},
{
name: "收入",
type: "line",
stack: "总量",
data: [
150,
232,
201,
154,
190,
330,
410,
232,
201,
154,
190,
330,
410
]
}
]
};
// // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//根据窗口的大小变动图表
window.onresize = function() {
myChart.resize();
};
}
}
};
</script>
<style lang="scss" scoped>
#home-chart {
background: #ffffff;
padding: 20px 0;
}
</style>
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。