基于Vue和SpringBoot的超市账单管理系统的设计和实现(二)

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 基于Vue和SpringBoot的超市账单管理系统的设计和实现

4.4.2用户管理模块

在用户管理模块(如图4-4),用户的基本资料可以被查看,如果是管理员身份登陆,还可以操作禁用或者启动某个用户。如果想修改和删除某个用户,就可以通过调用updateById()和deleteById()方法,是通过用户的ID进行筛选,在查询方面就具有多样性操作,可以通过用户名就行查询,当涉及到大量的数据时,可以通过部门进行删选查询,帮助我们减少查询时间,提高效率。

也可以用过手机号、邮箱、性别、登陆账号、创建时间来进行查询。如果知道用户ID的话,则可以通过selectById()方法进行精准查询。当然想要更快更精准的查询某个用户的信息,可以通过多条件组合查询,例如通过部门、性别和创建时间这三个条件一起进行筛选。在考虑到如果在用户管理模块下存放了上千个用户信息,那就需要有分页功能,所以我是使用了mybatis-plus插间来实现,首先导入Mybatis-plus依赖,然后创建Mybatis-plus-config配置类,在这个类中通过@Param(“ew”)QueryWrapperqueryWrapper接口实现分页操作。

4.4.3供应商管理模块

在供应商管理模块(如图4-5),可以查看供应商的基本资料。可以通过名称和电话来进行多条件查询供应商数据。通过前端发送/getId请求到服务器,后端的控制层就接收到用户发送过来的请求,然后调用iSupplierServicec.getById()方法,调用Dao层去数据库里查询相关的供应商数据,把获取到的供应商全部数据在通过控制层的视图解析器完成视图的跳转,最后将数据呈现到用户页面上。

同样如果要查询显示所有供应商信息,前端通过/getAll请求,发送请求到后端,后端控制层就收到用户的请求,交给供应商业务层去实现,业务层通关调用iSupplierServicec.list()方法,调用Dao层去数据库里查询供应商的相关数据,把获取到的供应商全部数据在通过控制层的视图解析器完成视图的跳转,最后将数据呈现到用户页面上。如果要添加或者修改更新某个供应商信息,前端通过提交请求,发送请求到后端,后端控制层就收到用户的请求,交给相关供应商的业务层去实现,业务层通过调用iSupplierServicec.saveOrUpdate()方法,调用Dao层去数据库里查询数据,并将相关的数据进行视图跳转传回给客户端。

删除操作也是同样的处理过程,发送/delByIds请发到后端,后端业务层调用相关的方法,去Dao层查询到数据进行删除操作,然后将处理结果通过视图解析器发回客户端。

4.4.4账单管理模块

账单管理模块如图(4-6),可以查看账单的基本资料。当账单数据过多时,则可以通过供应商名称或者商品名称或者负责员工进行查询,也可以将三个条件组合起来进行组合查询,减少查询时间。当如果是管理员身份登陆,还可以对账单信息进行编辑和删除。

如果要显示全部账单信息,是通过客户端发送/getAll请求到服务器,控制层接收到用户发送的请求,将请求发送给账单的业务层处理,业务层调用iBillService.list()方法,调用Dao层去数据库里查询相应的账单信息,并将数据通过视图跳转经过转发或者重定向展示给用户。

如果要查询某个账单信息,则是通过发送/getId请求到服务器,控制层接收到用户发送的请求,将请求发送给相关的业务层处理,业务层调用iBillService.getById()方法,调用Dao层去数据库里查询相关数据并将数据返回到前端页面。

如果想要进行添加或者修改和删除操作,则通过发送/insert、/update、/delByIds请求到服务器,控制层接收到用户发送的请求,将请求发送给相关的业务层处理,业务层调用账单的相关方法,调用Dao层去数据库里查询相关数据并将数据返回到前端页面。

4.4.5商品管理模块

商品管理模块(如图4-7),可以查询商品的基本资料。并且可以分别通过商品名称、商品单价、库存、商品分类、供应商进行组合查询。

如果要显示全部商品信息,是通过客户端发送/getAll请求到服务器,控制层接收到用户发送的请求,将请求发送给账单的业务层处理,业务层调用iCommondityService.list()方法,调用Dao层去数据库里查询相应的商品信息,并将数据通过视图跳转经过转发或者重定向展示给用户。如果要查询某个商品信息,则是通过发送/getId请求到服务器,控制层接收到发、用户发送的请求,将请求发送给相关的业务层处理,业务层调用iCommondityService.getById()方法,调用Dao层去数据库里查询相关数据并将数据返回到前端页面。

如果想要进行添加或者修改和删除操作,则通过发送/insert、/update、/delByIds请求到服务器,控制层接收到用户发送的请求,将请求发送给相关的业务层处理,业务层调用账单的相关方法,调用Dao层去数据库里查询相关数据并将数据返回到前端页面。

4.4.6部门管理模块

如果我们用管理员身份登陆,就可以看到部门管理模块,部门管理模块中包含了部门名称、上级部门、部门负责人、副负责人、排序值。一个超市就会有不同的部分,并且部门下面还会有子部门,所以可以在设计一个部门的同时给它添加子部门。

4.4.7角色权限管理模块

角色权限管理模块(如图4-8),在该页面我们可以看到系统一共分为4种权限,分别是超市部门经理、超市采购职员、测试权限、管理员。

如果是以管理员身份登陆系统,那就有权限可以进入该功能页面,对四种权限进行菜单权限的管理、数据权限的管理,并且可以删除某个权限。如果想要实现对用户的权限赋予,就需要通过SpringSecurity功能实现,在系统中首先需要引入SpringSecurity依赖,然后再编写SpringSecurity的核心配置类,WebSecurityConfig,在配置类中用@EnableGlobalMethodSecurity注解开启Security模式,然后重写configure()方法,其次编写SecurityUserDetails类,它会返回一个UserDetails 的接口,这个接口包含了用户的基本信息,然后编写UserDetailsServiceImpl实现类,返回一个新User类,这就是Spring security提供的用户信息实体。

最后通过service和Dao层,权限列表根据用户表和角色表关联查询出来,这样就可以实现对用户权限的赋予。

4.4.8数据字典管理模块

在数据字典管理模块,我们可以看到很多数据类型,例如供应商类型、性别、消息类型、按钮权限类型、商品类型等等,这些数据字典其实就是其他页面的下拉选项框,或者说是为其他模块提供基础的数据支持,当我们在其他模块使用不同的数据类型,就先需要这数据字典管理模块下进行添加,这样的好处就是方便我们统一管理。

4.4.9系统监控管理模块

在系统监控管理模块下,我们可以看到一些日志信息,包括操作名称、请求类型、求情路径、请求参数、登陆账号、IP地址、日志类型、创建时间。该功能模块模块可以帮助管理员查看用户登陆系统的时间以及记录用户操作,并且一旦发生异常,可以快速定位问题的根源和用户做了哪些操作,帮助运维人员进行维修。

该功能的实现通过 Aop 实现,以切面的方式,通过前置后置环绕代理业务逻辑代码,在中间插入日志输出功能,这样就可以达到代码的复用性。首先引入 Aop 的相关依赖,利用 @aspect 注解表明这个类是切面类,用 @pointcut 注解表明切点位置,用@Before标注在方法上,这代表前置通知,是在方法执行之前用语拦截控制层记录用户操作时间,用 @AfterReturning 注解,表明在方法执行之后拦截无异常操作,就是用来记录信息(如图4-11),这样就可以实习日志管理。

5结论与展望

5.1结论

系统在设计完成之后,回想之前所做的过程,从选题开始,选超市账单管理系统进行研究,是出于好奇,毕竟超市购物已经成为我们日常生活的习惯,所以对超市账单是如何进行管理就有了研究的必要。在系统开始设计之前,我先查阅了大量的文献,研究其他人是用何种技术来实现超市账单管理系统的设计,分别具有哪些功能模块。

经过研究发现之前设计的超市账单管理系统存在操作繁琐,系统界面复杂,维护困难等问题。所以我确定采用SpringBoot和Vue技术来进行系统开发。在确定完技术后,开始设计文章大纲,再与导师商量后确定好文章大纲,然后开始开发系统。在系统成功开发出来,达到了页面的简洁美观,也能够清晰掌握商品信息,商品供应商信息,部门管理以及操作系统的用户信息等超市账单管理系统所需要具备的基本功能。

5.2展望

本系统在技术方面选择了当下市场上比较流行的SpringBoot和Vue技术,利用框架快速搭建起系统的骨架,然后再写一些业务逻辑功能。这也符合大部分公司开发系统的设计理念。虽然系统顺利开发出来了,但还是存在一些缺陷,例如本系统的商品管理模块,缺少商品的图片,只能通过文字来辨别商品种类,缺少了直观的表现,所以如果要改进可以在商品信息管理模块多加一栏图片属性,然后在前端页面做一个放大镜功能,实现图片的放大。还有一个缺点就是缺少信息导入功能,如果涉及到大量数据,那在系统上一个个添加会浪费很多时间,如果我们用信息导入模板,在系统外用Excel将信息录入完成,通过模板导入就可以做到快速大量导入信息。超市账单管理系统的发展空间还是很大的,不仅是功能的扩展上,还可以尝试往移动端发展,这样就不会局限于只能用电脑来进行操作,摆脱办公地点的限制。

参考文献

[1]马雪莲.超市管理信息化系统设计与实现[D].天津:天津大学,2012

[2]王海群.大型超市商店形象对顾客满意与忠诚的影响研究[D].浙江:浙江大学,2006

[3]高妮娜.基于J2EE的东营胜大超市信息管理系统的设计与实现[D].成都:电子科技大学,2013.

[4]J2EE开发框架[EB/OL].http://baike.sogou.com/v54230260.htm,2014

[5]尹汉东,任邵东等.基于J2EE的Web应用的MVC架构实现[J].北京:计算机仿真,2004,

[6]张勇.基于MVC的J2EE架构研究与设计[D].上海:华东师范大学,2006

[7]Spring简介[EB/OL].http://baike.sogou.com/v25116.htm?sp=SSTSpring,2014

[8]MVC简介[EB/OL].http://baike.sogou.com/v25227.htm?sp=SSTMVC,2014

[9]侯俊杰.Java程序设计教程与实训[M].北京:科学出版社,2005.

[10]夏宽理.Java语言程序设计[M].北京:机械工业出版社,2008.

[11]郑阿奇,殷红先,张为民.PowerBuilder实用教程[M].北京:电子工业出版社,2013.

[12]陈承欢.SQLServer2014数据库应用、管理与设计[M].北京:电子工业出版社,2016.

致谢

文章写到这个部分,也就意味着我在大学里的最后一个“任务”也要完成了,现在的心情无比复杂,从开始写文章时的迷茫、焦虑,那段日子可谓是身心俱疲,到文章完成的那一刻紧绷的弦终于放松了下来,心情自然是无比愉悦的,但同时也充满的不舍于感慨,真不敢相信大学四年生活已经要结束了。

文章的顺利完成,自然离不开老师们的辅导和帮助,感谢大学四年我的执教老师,传授我专业的计算机技能知识,无论是在理论知识上还是实践上,都让我受益匪浅。同时我也要感谢我的室友和那些曾经在学习上帮助到我的同学,大学四年的生活,我们一起在努力学习,一起努力玩耍,和大家在一起的点点滴滴都会成为我自己人生中最美好的一段记录。

我还要衷心感谢我的家人,现在我也开始体会到工作的艰辛与赚钱不易,是你们不求回报的支持让我渡过了大学四年美好的时光。最再次向给予我关心、帮助和支持的老师、同学、朋友和亲人们表示感谢!祝一切都好!


引用说明:

引用以上内容的用户,必须同意以下内容,否则请勿引用!

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

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
115 62
|
7天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
52 13
|
14天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
187 1
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
80 2
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
45 0
|
25天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
27天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
下一篇
DataWorks