【开源免费】Vue+SpringBoot打造超市账单管理系统，初学者入门实战项目

墨蓝 2023-09-24 16:07 21阅读 0赞

> **作者主页**：[Designer 小郑][Designer]  
> **作者简介**：3年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN学院、蓝桥云课认证讲师。

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

<table> 
 <thead> 
 <tr> 
 <th>标题</th> 
 <th>说明</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>项目类型</td> 
 <td>开源项目</td> 
 </tr> 
 <tr> 
 <td>项目名称</td> 
 <td> 超市账单管理系统 \color{red}{超市账单管理系统} 超市账单管理系统</td> 
 </tr> 
 <tr> 
 <td>Git 仓库</td> 
 <td><a href="https://gitee.com/yyzwz/bill-system" rel="nofollow">https://gitee.com/yyzwz/bill-system</a></td> 
 </tr> 
 <tr> 
 <td>增值服务</td> 
 <td>【 文档、部署、讲解 \color{red}{文档、部署、讲解} 文档、部署、讲解】 <a href="https://bbs.csdn.net/topics/617132402" rel="nofollow">https://bbs.csdn.net/topics/617132402</a></td> 
 </tr> 
 <tr> 
 <td>项目编码</td> 
 <td>ky009</td> 
 </tr> 
 </tbody> 
</table>

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

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

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

### 摘要 ###

随着科技的进步，网络变得越来越便利和重要，很多的现代化公司也应用了自己开发的软件，来加快自身的发展，以便更快得跟上时代的潮流，占据市场竞争的优势。**由于我国超市连锁行业的高速健康发展,其中的经营管理模式也随之变得愈加复杂,所以也就需要一套相应的软件来管理**。经过翻阅和分析大量参考文献，我在后端技术上采用基于SpringBoot框架来快速搭建起项目的框架，SpringBoot集成了很多框架配置和应用模板，当需要什么框架和模板，直接开箱就能使用，并且SpringBoot的自动配置功能能帮助开发人员快速完成业务功能的实现，SpringBoot采用启动器来管理项目所需要的依赖，这样就能帮助程序员摆脱配置繁琐的苦恼。

系统采用Thymeleaf模板引擎来进行前后端数据的交互，采用yaml语言来写SpringBoot的配置文件，**集成SpringSecurity**来实现系统的权限分配和用户认证等。SpringBoot框架遵行“**约定大于配置**”的思想，简单的理解来说就是在使用SpringBoot框架的项目中，在没有规定配置的地方，都是采用默认的配置，而开发人员仅仅需要做的就是当有特殊需求的时候，通过config模块中根据需求自定义配置就可以了。在前端技术上采用Vue框架和Element UI技术来实现，利用MVVM开发模式将视图和数据层进行分割，能够随时观察到数据的变化,并对视图对应的内容实时进行更新。**在数据库上选择的是MySQL数据库**，因为MySQL是一个开源的数据库，并且能够存储千万条数据。整个系统页面清爽简洁，并且容易快速上手，系统在开发过程中遵循了操作简便原则、可扩展性原则、高内聚低耦合原则、易维护原则。

**关键词**：超市管理系统；数据库；框架；账单

#### 目录 ####

*   *  摘要
     *  1绪论
     *   *  1.1研究背景
         *  1.2研究意义和目的
         *  1.3国内外研究现状
         *  1.4研究思路
     *  2系统相关技术及可行性分析
     *   *  2.1系统开发工具
         *  2.2数据库技术
         *  2.3可行性分析
         *   *  2.3.1技术可行性
             *  2.3.2经济可行性
             *  2.3.3社会可行性
     *  3系统设计与功能分析
     *   *  3.1需求分析
         *  3.2设计思想
         *  3.3设计原则
         *  3.4系统功能设计
     *  4系统详细设计
     *   *  4.1前端页面框架解析
         *  4.2后端框架解析
         *  4.3 SpringBoot自动配置原理
         *  4.4模块介绍解析
         *   *  4.4.1登陆管理模块
             *  4.4.2用户管理模块
             *  4.4.3供应商管理模块
             *  4.4.4账单管理模块
             *  4.4.5商品管理模块
             *  4.4.6部门管理模块
             *  4.4.7角色权限管理模块
             *  4.4.8数据字典管理模块
             *  4.4.9系统监控管理模块
     *  5结论与展望
     *   *  5.1结论
         *  5.2展望
     *  参考文献
     *  致谢

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

### 1绪论 ###

#### 1.1研究背景 ####

世界上第一个购物中心诞生于美国纽约，外国人迈克尔·库伦开设了第一家合作商店，为了更好地吸引大量客流量，迈克尔·库伦精心设计了低价策略，通过大量进货把商品价格压低，通过商店一次性集中售卖。但由于大量商品的销售，难免会出现商品信息录入错误，经常导致顾客把鸡肉当作猪肉买走，并且工作人员忙不过来结账的情况，这对当时的销售产生了重大的影响。在我国，超市被引入是在20世纪80年代，全中国第一家大型超市建设于北京。到了**现在人们喜欢去各大超市购物，随着超市的规模越来越大**，顾客越来越多，许多大型超市都有设置多个柜台进行结账，有些超市还会设置自动扫描结账的机器，甚至马云还开设过“无人超市”，整个超市工作流程全靠电脑操作，这样做的目的就是加快工作效率，让广大顾客不用排起长队等待结账，消费者能拥有快速精准良好的购物体验。当满足顾客的需求，就能占据市场的竞争优势，真所谓顾客就是上帝。

#### 1.2研究意义和目的 ####

在计算机还没普及的年代，我们常常会看到许多超市在结账的时候会排起长长的队伍,并且那个年代许多超市的职工分工不明确，组织架构不清晰，导致员工之间的配合不默契，整个超市运转就不流畅，这样很容易出现因为操作上的差错而给当事人或者整个超市企业造成不必要的经济损失,**为了避免出现这样的情况，企业管理层就考虑要引入新的超市管理技术**。步入21世纪后，计算机行业迅猛发展，数据库信息管理技术以及商业应用软件的不断进步和发展,现代化信息管理系统取代传统的手工业是社会发展的必然趋势。使用计算机技术对企业进行管理的优势有很多，首先使用计算机可以代替人工进行许多复杂繁琐的工作；其次使用计算机可以帮助我们节省许多人力资源；第三计使用算机同时可以最大化和限度的提高企业员工的日常劳动效率；第四使用计算机同时可以将重要工作的文件和重要数据得到最好的管理保存并且安全。所以**针对各类超市账单信息的综合管理业务,设计研制一个完全符合日常业务运行的现代超市账单管理系统,使整个超市账单信息管理工作实现信息化**。

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

在翻阅研究过大量国内外参考文献之后,我发现超市管理系统的设计思路有很多，例如范晓云采用了第4代软件开发工具PowerBuilder，**结合数据库开发了一套适合中小型超市管理系统**。这套系统不仅具有界面清爽、操作简单，并且安全可靠、功能易扩展的优势。但存在的缺点也是很明显的，就是执行效率低，开发的效果不太理想，页面不美观，PB与其他技术的集成不好。刘文文采用的是JSP+Java Bean+Servlet这种技术的应用组合，然后将网站发送到Tomcat服务器上，她的设计思路不仅软件开发方便,而且它还能同时提供较为强大的应用功能,能充分满足各种软件开发应用需求。但缺点在于由于没有使用框架技术，所以Servlet代码和JDBC代码太过复杂和繁琐，导致可读性较差，而且这些都只适合一些小型超市的日常运营作业，很难应对中大型超市的需求。国外S.KeyvanMirrazavi和HenriBeringer指出随着超市的不断扩大，商品的种类和数量的增加，就有必要选择一个功能完备的超市管理系统，减少因为操作上的差错而给当事人或者整个超市企业造成不必要的经济损失。

#### 1.4研究思路 ####

现在的超市账单管理系统在市场上存在很多，但问题也有不少，有些账单管理系统用的是比较过时的技术实现的，从而导致页面不够美观整洁，操作不够人性化和方便，或者存在数据维护麻烦、错误操作导致系统崩溃等一系列问题。所以为了解决这些存在的问题，所以在经过我的调查和研究，将在**前端采用VUE技术和Element UI框架**快速搭建起简洁大方的页面，在**后端则将采用SpringBoot框架**进行业务逻辑、事务管理、日志输出、权限控制等功能的开发，利用框架进行开发的好处就在于减少代码量、项目搭建快捷以及维护的便利，这种开发理念也符合市场上大部分公司的开发理念。通过这种开发方式就可以达到整体系统的简洁性、完整性、安全性、操作简便。

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

### 2系统相关技术及可行性分析 ###

#### 2.1系统开发工具 ####

本系统将主要**采用IDEA和Visual Studio Code软件**来分别作为后端和前端技术完成开发。IDEA软件在目前的编程开发行业被承认是最好的Java代码开发工具。尤其是体现在IDEA软件有各类代码自动提示功能，并且还支持C、C++、Python等多种语言开发，还具有强大的模块整合能力，例如支持git、maven、Spring等。IDEA提倡的是一种智能自动编码，提示功能的快速，好用的快捷提示键，精准的搜索等诸多优点致使使用IDEA软件的人数也越来越多。在前端开发软件选择上，选择Visual Studio Code软件是因为VS code是运行速度快，操作方便。虽然这对实际的项目没什么大的帮助，但是可以在无形间提高我们的用户体验。VS code有着非常丰富的插件系统，无论你是编辑HTML、CSS、JS、TS、Vue、React等前端代码，还是JAVA、Python等后端代码，都可以完美兼容。

#### 2.2数据库技术 ####

数据库，顾名思义就是管理数据的仓库，如果想要保存一些重要的数据不会丢失，那将其存入数据库是最明智的选择。MySQL数据库就是当下许多公司企业都在采用的数据库，它具有很多优点，首先MySQL是开源的，所以使用不需要任何费用。其次MySQL的底层代码是C和C++，所以他支持很多的编程语言，保证了源代码的可移植性。还有一个优点就是MySQL可以存储处理千万条数据，一个中大型超市，必然会产生许多条数据，所以**MySQL正好能满足企业的数据存储需求**。

#### 2.3可行性分析 ####

##### 2.3.1技术可行性 #####

本系统主要采用Java语言来进行开发设计，在四年大学期间里我主学了Java编程语言，并且许多大公司都采用Java语言来进行系统开发，它摒弃了很多传统编程语言繁琐和不够灵活的缺点。并且Java还在持续不断的更新，每一个版本都有新特性，能带来更加简洁方便的方法进行功能的开发。后端则采用SSM框架和SpringBoot进行业务逻辑、事务管理、日志输出、权限控制等功能的开发，利用框架可以将系统的框架快速搭建起来，并且可以和MySQL数据库进行连接。前端则采用VUE和Element UI框架也可以快速帮助我们搭建起简洁、大方的网站页面。

##### 2.3.2经济可行性 #####

本系统所使用的开发工具（IDEA、MySQL、VS Code）都是可以免费使用的，没有任何成本，只需要会懂相关的技术即可开发出该系统。

##### 2.3.3社会可行性 #####

本系统所涉及到的业务逻辑、事务管理、日志输出、权限控制等功能的开发都比较适用于当下社会所需要的系统，并且系统使用很多公司都采用的VUE和Spring这种开发理念，可以达到整体系统的简洁性、完整性、安全性、操作简便以及方便维护，所以具有社会可行性。

### 3系统设计与功能分析 ###

#### 3.1需求分析 ####

本管理系统主要是适用于中小型超市账单的管理，既要能让用户能够快速上手，也要保证基本功能的齐全，还要易于系统的维护。所以一个比较成熟的超市账单管理系统应包含以下几个模块：

1.  登陆模块：用户通过账号密码可以登入不用权限的账号。
2.  用户管理模块：查看用户信息、修改用户信息、批量或单个删除用户、增加用户信息、禁用和启动用户账号功能可以在该模块实现。
3.  供应商管理模块：查看供应商信息、修改供应商信息、批量或单独删除供应商、增加供应商的功能在该模块实现。
4.  账单管理模块：查看账单信息、修改账单信息、批量或单独删除账单、增加账单的功能在该模块实现。
5.  部门管理模块：可以建立不同的部门，批量或单独删除某一个部门，修改部门信息以及可以给某个部门设立一个或者多个子部门。
6.  权限管理模块：不同账号所拥有的权限可以该模块进行分配。
7.  日志管理模块：系统操作人员登陆系统的时间会被记录在该管理模块下。
8.  退出登陆模块:退出当前账户到登陆页面。

#### 3.2设计思想 ####

本系统主要分为**前端**和**后端**两个组成部分，在前端我将采用当下比较流行的技术 **VUE 和 Element UI** 搭建起简洁大方的前端页面，方便用户操作和用户的体验感。在后端我将采用当下比较流行的技术 SpringBoot 来完成开发，因为 SpringBoot 兼容了许多框架，可以帮助我快速搭建起整个系统的框架，其中**最核心的框架就是 SpringBoot 框架**，当一个用户在网站页面上发送请求，控制层接收到用户的请求，调用业务层去实现，业务管理层调用不同的执行方法去处理，然后业务层调用 DAO 层去数据库里进行增删改查的操作，最后将数据结果给用户反馈。在数据库设计方面，如何设计一个合理安全的数据库，首先要考虑的就是对一个数据库中所有表的属性设置，包括属性的的长度、类型、主外键的设置、索引的设置等等。然后在实际设计开发系统的过程中可以参考一些成熟典型的系统的设计思想，可以帮助我们大大提高程序的可行性、完整性和安全性。

#### 3.3设计原则 ####

本系统在完成开发需求的同时，也应该遵循操作灵活简便，提高用户体验感，所以在开发过程中应遵循以下的设计原则：

1.  操作简便的原则：系统的设计不仅要页面清爽简洁，让用户能迅速精准的找到所需要的业务功能。
2.  可维护原则：系统的设计要有很好的管理模式，将系统分为几个模块统一管理，以便在系统出现问题崩溃时可以及时准确的查出问题所在并维护好。
3.  可读性原则：系统在开发的过程中，开发人员应养成良好的习惯，给代码和模块标记注释，以后日后再此功能基础上进行修改，方便程序员了解此功能原理，然后及时、高效得对代码进行处理和维护。
4.  可扩展性原则：系统在开发的过程中，避免不了因为考虑不全面导致功能不齐全，所以在功能设计中要考虑功能的可扩展性，方便新增业。
5.  高内聚低耦合原则：一个较为成熟的软件应该具体高内聚低耦合的特点,目的在于使得程序模块的可重用性、移植性得到提高。多用设计模式和接口就能实现。

#### 3.4系统功能设计 ####

根据本系统的业务功能**需求分析**，设计出该系统的简易功能设计图（如图3-1），首先在登陆界面输入账号密码，然后就可以进入主界面，根据不同的账号权限，能呈现出不同的系统界面。在登陆界面中包括了员工管理功能，商品管理功能，供应商管理功能，账单管理功能、部门管理功能、系统操作权限管理功能和系统日志输出功能。增删改查四种操作均可在员工管理界面，商品管理界面，供应商管理界面，账单管理、部门管理界面中使用。在权限管理界面，如果是管理员身份登陆可以给用户赋予权限，也可以撤销权限。当要查看一些操作记录和用户登陆系统时间的操作可以在系统监控功能模块中的日志输出查看。

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

### 4系统详细设计 ###

#### 4.1前端页面框架解析 ####

一个简单的前端页面构成三个基本要素：**HTML、CSS、JavaScript**。有了这三要素就可以完成一个前端页面的开发。Vue框架同样兼容这三个要素，并且如果真要自己写出一个美观的页面是十分麻烦的，但 **Vue 支持使用其他的组件库，例如Element UI**，是一款网站快速成型工具，上面有许多美观的页面组件。相比于传统的前端页面开发，是通过操作 DOM，形成基本的视图结构，然后再通过CSS的修饰，让页面变得美观，最后在涉及交互部分，就需要用到JavaScript来接收用户请求，并通事件响应来进行交互操作，并且在事件的处理函数中涉及到各种数据的修改。我们知道一个网站包含的页面元素是非常多的，在结构和很庞大的页面中，如果视图和数据都混合在一起，要想操作其中的一个元素的难度就会很大，正所谓牵一发而动全身。而 **Vue 的核心在于它主关注视图层，它将视图单独剥离出来**，主要目的就是分离视图层和数据层，而实现分离是通过 MVVM 模式，MVVM 的核心是 View Model 层，它能够随时观察到数据的变化,并对视图对应的内容实时进行更新,当视图发生改变的同时，数据也会随之发生变化,这就是双向绑定。

#### 4.2后端框架解析 ####

在后端方面我将**选择基于SpringBoot框架来进行开发**。之所以选择用框架来开发是学过 JavaWeb 的同学都知道，开发一个 web 应用，从最初开始接触 Servlet 结合 Tomcat 服务器，然后再通过手动连接 JDBC 来进行数据连接，在 IDEA 软件上写 SQL 查询语句。这样就会导致一个问题，会产生大量繁杂冗余的代码，并且代码出错率高，不容易排查，大大加长了开发时间。所以我将运用框架来开发系统，利用SpringBoot框架进行系统开发，可以快速搭建出系统的框架，只需要我们把依赖和配置文件导入，剩下的就是编写业务逻辑功能。经过2个月我自己对Spring的学习研究，总结出 SpringBoot 框架开发便捷的原因是从以下三个策略出发：

1.  **SpringBoot可以通过启动器来管理项目所需要的依赖**，无需指定依赖的版本。
2.  **SpringBoot利用几个核心注解做到了根据添加的依赖进行自动配置**，不需要配置xml文件。
3.  **SpringBoot内置了许多项目所需要的功能**，例如数据监控、用户认证。

在还没有使用 SpringBoot 框架之前，我也早早听说了这个框架厉害的传闻，并且一直流传着一句话“**约定大于配置**”,在还没有深入学习之前，我还是对这句话一知半解，但随着深入学习，我开始慢慢理解这句话的含义，简单的理解来说就是在使用 SpringBoot 框架的项目中，在没有规定配置的地方，都是采用默认的配置，而开发人员仅仅需要做的就是当有特殊需求的时候，通过 config 模块中根据需求自定义配置就可以了，这样就帮助开发人员大大减少了配置工作，这就是所谓的“约定”。

并且 **SpringBoot 集成了很多框架配置和应用模板**，当需要什么框架和模板，直接开箱就能使用。但在SpringBoot项目开发中，本质最主要的还是SSM框架，SSM框架就是Spring、SpringMVC、Mybatis，在使用SpringBoot时，它就会默认配置好这个框架的使用方式。整个系统的执行流程（如图4-1），从客户端发送请求到服务器，控制层接收到用户的请求，调用业务层去实现，业务管理层调用不同的执行方法去处理，业务层调用DAO层去数据库里进行增删改查的操作，然后将数据结果反馈给用户。

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

#### 4.3 SpringBoot自动配置原理 ####

对比搭 建SSM 框架，我们需要导入相关的jar包，配置web.xml文件，配置Spring和Springmvc文件，配置数据库连接，部署Tomcat服务器，做完这些步骤还经常报错，例如jar包的丢失，依赖版本不兼容等问题，导致启动项目就需要花上好长的时间。但现在**使用SpringBoot框架就不需要这么麻烦就可以快速启动项目**，是因为SpringBoot内置了Tomcat服务器，并且在 SpringBoot 项目中有一个很重要的依赖就是starter，它默认帮我们引入相关的jar包，来简化配置文件，开发人员就不需要考虑各个jar包之间的版本兼容问题，摆脱繁琐的配置。

当我们的项目启动时，会加载大量的自动配置类，通**过注解 @EnableAutoConfiguration 开启自动配置**，这个注解的作用就是给容器中导入一些组件，注解里有一个方法是获取候选的配置，它会扫描jar包路径下的 META‐INF/spring.factories，里面就存在很多自动配置类，都会被加入到容器当中发挥作用，当然我们可以通过一些逻辑判断条件来决定这个配置类是否开启，如果开启这个类就会给容器添加组件，正是因为这些组件存在，我们就不需要自己手动配置了，而这些组件的值就可以通过properties类来进行获取。以上这些步骤就是 SpringBoot 自动配置的原理。

#### 4.4模块介绍解析 ####

##### 4.4.1登陆管理模块 #####

在登陆页面时（如图4-1），可以选择输入自己的账号与密码，当能你没用填写账号提交网页时，前端页面的 login.vue 会对账号进行验证，会自动提示你的账号不能设置为空。当你没有输入密码提交网页时，前端页面的 login.vue 对你的客户端验证，会自动提示你的密码不能设置为空。

同样当你输入了账号密码而没有输入验证码，同样也会提示验证码不能为空。当输入账号和密码提交网页时，客户端发送请求，前端输入的 username 和 password 用 Axios 通信将其转换成 JSON 字符串，这样就可以和后端进行交互，然后后端就会判断该用户是普通员工还是管理员身份，从而显示不同的界面。

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

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

##### 4.4.2用户管理模块 #####

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

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

![在这里插入图片描述][d59cd768a3404058be6df81e425b1196.png_pic_center]  
![在这里插入图片描述][1b3f6418dc6e43488ee76876c9e3583e.png_pic_center]

##### 4.4.3供应商管理模块 #####

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

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

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

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

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

##### 4.4.4账单管理模块 #####

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

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

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

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

![在这里插入图片描述][02cb9e5d254e4cd1a0f18ac7e3b84222.png_pic_center]  
![在这里插入图片描述][2c6a015c7d8547ffb324633ce38a8637.png_pic_center]

##### 4.4.5商品管理模块 #####

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

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

![在这里插入图片描述][44888dc824bd460c9ffd4d799153096c.png_pic_center]  
![在这里插入图片描述][2246acbdce0e409187750da195340f1a.png_pic_center]

##### 4.4.6部门管理模块 #####

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

![在这里插入图片描述][8c9601f12ab241bd8d71d24d6802d14f.png_pic_center]  
![在这里插入图片描述][ef4f1b15dc5946e9bd0a3772dae57831.png_pic_center]

##### 4.4.7角色权限管理模块 #####

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

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

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

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

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

##### 4.4.8数据字典管理模块 #####

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

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

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

##### 4.4.9系统监控管理模块 #####

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

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

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

### 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.  必须了解使用本文内容的风险，作者不对其提供二次维护服务，也不提供任何有关资料。

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

[Designer]: https://blog.csdn.net/qq_41464123
[8233138e6dfd4463bf2ce395a1273d14.png_pic_center]: https://img-blog.csdnimg.cn/8233138e6dfd4463bf2ce395a1273d14.png#pic_center
[44888dc824bd460c9ffd4d799153096c.png_pic_center]: https://img-blog.csdnimg.cn/44888dc824bd460c9ffd4d799153096c.png#pic_center
[d48a5058057c4e8ea04e4ee223b7ce47.png_pic_center]: https://img-blog.csdnimg.cn/d48a5058057c4e8ea04e4ee223b7ce47.png#pic_center
[0a367fdebb4847bf85ecaa1ca27d448b.png_pic_center]: https://img-blog.csdnimg.cn/0a367fdebb4847bf85ecaa1ca27d448b.png#pic_center
[1da9e5a8f24f44aa9586971b4765a7a0.png_pic_center]: https://img-blog.csdnimg.cn/1da9e5a8f24f44aa9586971b4765a7a0.png#pic_center
[d59cd768a3404058be6df81e425b1196.png_pic_center]: https://img-blog.csdnimg.cn/d59cd768a3404058be6df81e425b1196.png#pic_center
[1b3f6418dc6e43488ee76876c9e3583e.png_pic_center]: https://img-blog.csdnimg.cn/1b3f6418dc6e43488ee76876c9e3583e.png#pic_center
[b5dc0a7caac04ce9b14a50c56376b450.png_pic_center]: https://img-blog.csdnimg.cn/b5dc0a7caac04ce9b14a50c56376b450.png#pic_center
[cadb3264f31846d5a8d264939dbae76d.png_pic_center]: https://img-blog.csdnimg.cn/cadb3264f31846d5a8d264939dbae76d.png#pic_center
[02cb9e5d254e4cd1a0f18ac7e3b84222.png_pic_center]: https://img-blog.csdnimg.cn/02cb9e5d254e4cd1a0f18ac7e3b84222.png#pic_center
[2c6a015c7d8547ffb324633ce38a8637.png_pic_center]: https://img-blog.csdnimg.cn/2c6a015c7d8547ffb324633ce38a8637.png#pic_center
[2246acbdce0e409187750da195340f1a.png_pic_center]: https://img-blog.csdnimg.cn/2246acbdce0e409187750da195340f1a.png#pic_center
[8c9601f12ab241bd8d71d24d6802d14f.png_pic_center]: https://img-blog.csdnimg.cn/8c9601f12ab241bd8d71d24d6802d14f.png#pic_center
[ef4f1b15dc5946e9bd0a3772dae57831.png_pic_center]: https://img-blog.csdnimg.cn/ef4f1b15dc5946e9bd0a3772dae57831.png#pic_center
[bf28173a1b36402985ddfdd272abcfb2.png_pic_center]: https://img-blog.csdnimg.cn/bf28173a1b36402985ddfdd272abcfb2.png#pic_center
[b3039c74e4354944a126c730b648f9d2.png_pic_center]: https://img-blog.csdnimg.cn/b3039c74e4354944a126c730b648f9d2.png#pic_center
[f110a98a24fb462aa4a7a3721b85636b.png_pic_center]: https://img-blog.csdnimg.cn/f110a98a24fb462aa4a7a3721b85636b.png#pic_center
[14a2852e30164c38a0cbc1f480441355.png_pic_center]: https://img-blog.csdnimg.cn/14a2852e30164c38a0cbc1f480441355.png#pic_center
[4fa523f0913d4cc79cf9eec0475a94f0.png_pic_center]: https://img-blog.csdnimg.cn/4fa523f0913d4cc79cf9eec0475a94f0.png#pic_center
[7d2746c460f14bae93bb7f7efb630638.png_pic_center]: https://img-blog.csdnimg.cn/7d2746c460f14bae93bb7f7efb630638.png#pic_center
[3a01dc60e62c415b812015851343f1c0.png_pic_center]: https://img-blog.csdnimg.cn/3a01dc60e62c415b812015851343f1c0.png#pic_center