Vue+SpringBoot打造社区超市管理系统

---

---

一、摘要

1.1 项目介绍

基于JAVA+Vue+SpringBoot+MySQL的社区超市管理系统，包含了商品管理模块、供应商管理模块、账单管理模块，还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块，社区超市管理系统基于角色的访问控制，给超市管理员、店长角色使用，可将权限精确到按钮级别，您可以自定义角色并分配权限，系统适合设计精确的权限约束需求。

1.2 项目录屏

---

二、功能模块

基于JAVA+Vue+SpringBoot+MySQL的社区超市管理系统是一个用于管理超市商品、供应商和账单的系统，该系统主要包含以下几个模。

2.1 商品管理模块

该模块用于管理超市的商品信息。管理员可以添加、修改和删除商品，包括商品名称、价格、库存等信息。用户可以通过该模块查询商品信息，并进行购买操作。

2.2 供应商管理模块

该模块用于管理超市的供应商信息。管理员可以添加、修改和删除供应商，包括供应商名称、联系人、联系方式等信息。用户可以通过该模块查询供应商信息，并与供应商进行合作。

2.3 账单管理模块

该模块用于管理超市的账单信息。管理员可以查看和统计销售情况，包括每日销售额、最畅销商品等。用户可以通过该模块查询自己的购买记录，并进行账单结算。

该系统的前端使用Vue框架进行开发，实现了用户友好的界面和良好的交互体验。后端使用SpringBoot框架搭建API接口，处理前端请求并与数据库进行交互。数据库使用MySQL存储系统的数据。

系统的整体架构是前后端分离的，前端与后端通过API接口进行通信。前端负责展示界面和用户交互，后端负责处理业务逻辑和数据存储。

通过该系统，超市管理员可以方便地管理商品和供应商，实时监控销售情况；用户可以方便地查询商品信息、购买商品并结算账单。这样可以提高超市管理的效率，提升用户的购物体验。

---

三、系统设计

3.1 前端系统设计

一个简单的首页包含三个基本元素:HTML、CSS和JavaScript。有了这三个元素，就可以完成首页的开发了。Vue框架支持这三个元素，因此编写漂亮的页面实际上是一个更大的问题，但它也支持使用其他组件库，如Element UI。一个快速的网站原型工具，有许多漂亮的页面组件。与传统的首页开发相比，主要通过操作DOM形成主视图结构，通过CSS修改形成美观的页面，最后交互部分使用JavaScript接收用户请求，通过事件响应进行交互。如你所知，网站在结构和大页面中包含许多页面元素，而视图和数据的混合，很难操作其中的一个元素。Vue的核心是一个固定的层和分隔视图。主要目标是将视图层与数据层和MVVM模式分离开来。MVVM的核心是视图模型层，它允许您随时观察数据变化并实时更新数据，这是一个双向链接。

3.2 后端系统设计

在后端，我们决定在SpringBoot框架之上进行开发。为什么选择使用开发框架，学过Javaweb的人都知道，开发一个web应用程序从一开始就知道结合servlet和Tomcat服务器并手动连接JDBC数据连接，IDEA软件用于编写SQL查询。这导致了长代码、复杂代码、高代码错误率和不容易调查的问题，极大地延长了开发时间。所以对于系统开发，我使用了开发系统框架和SpringBoot框架，并且可以快速构建系统框架，然后导入依赖项和部署文件，其余的是编写业务逻辑功能。经过几周的spring框架学习，我决定采用SpringBoot框架。

3.3 数据库设计

---

四、系统展示

---

五、核心代码

5.1 查询商品

@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(StrUtil.isNotBlank(commodity.getName())) {
   
        qw.eq("name",commodity.getName());
    }
    if(StrUtil.isNotBlank(commodity.getType())) {
   
        qw.eq("type",commodity.getType());
    }
    if(StrUtil.isNotBlank(commodity.getStock(