如何使用ssm实现基于BS的超市商品管理系统的设计与实现+vue

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