【开源】JAVA+Vue.js实现超市账单管理系统

news/发布时间2024/5/14 15:16:02

在这里插入图片描述

目录

  • 一、摘要
    • 1.1 项目介绍
    • 1.2 项目录屏
  • 二、功能模块
  • 三、系统设计
    • 3.1 总体设计
    • 3.2 前端设计
    • 3.3 后端设计
    • 在这里插入图片描述
  • 四、系统展示
  • 五、核心代码
    • 5.1 查询供应商
    • 5.2 查询商品
    • 5.3 新增超市账单
    • 5.4 编辑超市账单
    • 5.5 查询超市账单
  • 六、免责说明

一、摘要

1.1 项目介绍

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

1.2 项目录屏

二、功能模块

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

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

三、系统设计

本系统主要分为前端和后端两个组成部分，在前端我将采用当下比较流行的技术VUE和Element UI搭建起简洁大方的前端页面，方便用户操作和用户的体验感。

在后端我将采用当下比较流行的技术SpringBoot来完成开发，因为SpringBoot兼容了许多框架，可以帮助我快速搭建起整个系统的框架，其中最核心的框架就是SSM框架，当一个用户在网站页面上发送请求，控制层接收到用户的请求，调用业务层去实现，业务管理层调用不同的执行方法去处理，然后业务层调用DAO层去数据库里进行增删改查的操作，最后将数据结果给用户反馈。

在数据库设计方面，如何设计一个合理安全的数据库，首先要考虑的就是对一个数据库中所有表的属性设置，包括属性的的长度、类型、主外键的设置、索引的设置等等。然后在实际设计开发系统的过程中可以参考一些成熟典型的系统的设计思想，可以帮助我们大大提高程序的可行性、完整性和安全性。

3.1 总体设计

.
在这里插入图片描述

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

3.2 前端设计

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

3.3 后端设计

在后端方面我将选择基于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层去数据库里进行增删改查的操作，然后将数据结果反馈给用户。

在这里插入图片描述

四、系统展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、核心代码

5.1 查询供应商

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "分页获取供应商")
public Result<IPage<Supplier>> getByPage(@ModelAttribute Supplier supplier, @ModelAttribute PageVo page){QueryWrapper<Supplier> qw = new QueryWrapper<>();if(StrUtil.isNotBlank(supplier.getAddress())) {qw.eq("address",supplier.getAddress());}if(StrUtil.isNotBlank(supplier.getMobile())) {qw.eq("mobile",supplier.getMobile());}if(StrUtil.isNotBlank(supplier.getName())) {qw.eq("name",supplier.getName());}if(StrUtil.isNotBlank(supplier.getType())) {qw.eq("type",supplier.getType());}IPage<Supplier> data = iSupplierService.page(PageUtil.initMpPage(page),qw);return new ResultUtil<IPage<Supplier>>().setData(data);
}

5.2 查询商品

@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())) {qw.eq("stock",commodity.getStock());}if(StrUtil.isNotBlank(commodity.getSupplierId())) {qw.eq("supplier_id",commodity.getSupplierId());}if(StrUtil.isNotBlank(commodity.getUnitPrice())) {qw.eq("unit_price",commodity.getUnitPrice());}IPage<Commodity> data = iCommodityService.page(PageUtil.initMpPage(page),qw);for (Commodity com : data.getRecords()) {Supplier supplier = iSupplierService.getById(com.getSupplierId());if(supplier != null) {com.setSupplierName(supplier.getName());}}return new ResultUtil<IPage<Commodity>>().setData(data);
}

5.3 新增超市账单

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增账单")
public Result<Bill> insert(Bill bill) {bill.setDateTime(DateUtils.getCompleteNowDate());bill.setUserId(securityUtil.getCurrUser().getId());String price = bill.getPrice();String number = bill.getNumber();Double sum = Double.parseDouble(price) * Double.parseDouble(number);sum = Math.ceil(sum * 10.0) / 10.0;bill.setSum(sum + "");if(iBillService.saveOrUpdate(bill)){return new ResultUtil<Bill>().setData(bill);}return new ResultUtil<Bill>().setErrorMsg("新增账单失败");
}

5.4 编辑超市账单

@RequestMapping(value = "/update", method = RequestMethod.POST)
@ApiOperation(value = "编辑账单")
public Result<Bill> update(Bill bill) {if(iBillService.saveOrUpdate(bill)){return new ResultUtil<Bill>().setData(bill);}return new ResultUtil<Bill>().setErrorMsg("编辑账单失败");
}

5.5 查询超市账单

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询账单")
public Result<IPage<Bill>> getByPage(@ModelAttribute Bill bill, @ModelAttribute PageVo page){QueryWrapper<Bill> qw = new QueryWrapper<>();if(!ZwzNullUtils.isNull(bill.getUserId())) {qw.eq("user_id",bill.getUserId());}if(!ZwzNullUtils.isNull(bill.getCommodityId())) {qw.eq("commodity_id",bill.getCommodityId());}if(!ZwzNullUtils.isNull(bill.getSupplierId())) {qw.eq("supplier_id",bill.getSupplierId());}IPage<Bill> data = iBillService.page(PageUtil.initMpPage(page),qw);for (Bill bill1 : data.getRecords()) {Supplier supplier = iSupplierService.getById(bill1.getSupplierId());if(supplier != null) {bill1.setSupplierName(supplier.getName());} else {bill1.setSupplierName("无");}Commodity commodity = iCommodityService.getById(bill1.getCommodityId());if(commodity != null) {bill1.setCommodityName(commodity.getName());} else {bill1.setCommodityName("无");}User user = iUserService.getById(bill1.getUserId());if(user != null) {bill1.setUserName(user.getNickname());} else {bill1.setUserName("无");}}return new ResultUtil<IPage<Bill>>().setData(data);
}

六、免责说明

  • 本项目仅供个人学习使用，商用授权请联系博主，否则后果自负。
  • 博主拥有本软件构建后的应用系统全部内容所有权及独立的知识产权，拥有最终解释权。
  • 如有问题，欢迎在仓库 Issue 留言，看到后会第一时间回复，相关意见会酌情考虑，但没有一定被采纳的承诺或保证。

下载本系统代码或使用本系统的用户，必须同意以下内容，否则请勿下载！

  1. 出于自愿而使用/开发本软件，了解使用本软件的风险，且同意自己承担使用本软件的风险。
  2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和博主无关，博主对此不承担任何责任。
  3. 在任何情况下，对于因使用或无法使用本软件而导致的任何难以合理预估的损失（包括但不仅限于商业利润损失、业务中断与业务信息丢失），博主概不承担任何责任。
  4. 必须了解使用本软件的风险，博主不承诺提供一对一的技术支持、使用担保，也不承担任何因本软件而产生的难以预料的问题的相关责任。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.bcls.cn/LTCI/5220.shtml

如若内容造成侵权/违法违规/事实不符，请联系编程老四网进行投诉反馈email:xxxxxxxx@qq.com，一经查实，立即删除！

相关文章

Python进阶学习：json.dumps()和json.dump()的区别

Python进阶学习：json.dumps()和json.dump()的区别

Python进阶学习&#xff1a;json.dumps()和json.dump()的区别 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 &#x1f448; 希望得到您…
阅读更多...
微信小程序开启横屏调试

微信小程序开启横屏调试

我们先打开小程序项目 开启真机运行 目前是一个竖屏的 然后打开全局配置文件 app.json 给下面的 window 对象 下面加一个 pageOrientation 属性 值为 landscape 运行结果如下 然后 我们开启真机运行 此时 就变成了个横屏的效果
阅读更多...
基于java Springboot实现教务管理系统

基于java Springboot实现教务管理系统

基于java Springboot实现教务管理系统《视频版-建议收藏》 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文…
阅读更多...
nginx（二）

nginx（二）

nginx的验证模块 输入用户名和密码 第一步先下载httpd 这个安装包 第二步编辑子配置文件 然后去网页访问192.168.68.3/admin/ 连接之后&#xff0c;会出现404&#xff0c;404出现是因为没给网页写页面 如果要写页面&#xff0c;则在/opt/html&#xff0c;建立一个admin&#x…
阅读更多...
【k8s资源调度-StatefulSet】

【k8s资源调度-StatefulSet】

1、部署对象StatefulSet资源&#xff08;无状态应用&#xff09; StatefulSet针对的是有状态应用&#xff0c;有状态应用会对我们的当前pod的网络、文件系统等有关联。 2、配置文件如下 StatefulSet资源的配置文件粗略如下&#xff0c;如下的配置信息包含了数据卷&#xff0c;…
阅读更多...
https://htmlunit.sourceforge.io/

https://htmlunit.sourceforge.io/

https://htmlunit.sourceforge.io/ 爬虫 HtmlUnit – Welcome to HtmlUnit HtmlUnit 3.11.0 API https://mvnrepository.com/artifact/net.sourceforge.htmlunit/htmlunit/2.70.0 https://s01.oss.sonatype.org/service/local/repositories/releases/content/org/htmlunit…
阅读更多...
图搜索基础-深度优先搜索

图搜索基础-深度优先搜索

图搜索基础-深度优先搜索 参考原理引入流程解析手推例子 代码实现运行结果结果分析 参考 理论参考&#xff1a;深蓝学院 实现参考&#xff1a;github项目 原理 引入 对于这样一个图&#xff0c;我们试图找到S到G的通路&#xff1a; 计算机程序不会像人眼一样&#xff0c;一…
阅读更多...
鸿蒙OS应用开发之显示图片组件6

鸿蒙OS应用开发之显示图片组件6

前面学习了怎么样让图片合适的大小来显示出来，达到最佳的布局显示图片。现在来学习PixelMap图片显示。PixelMap图片是指图片解码后无压缩的位图，用于图片显示或图片处理。 由于PixelMap图片是一种无压缩的图片，比较适合图片处理，比如从网络上加载图片之后，再进行处理再显示…
阅读更多...
Spring Boot与Netty：构建高性能的网络应用

Spring Boot与Netty：构建高性能的网络应用

点击下载《Spring Boot与Netty&#xff1a;构建高性能的网络应用》 1. 前言 本文将详细探讨如何在Spring Boot应用中集成Netty&#xff0c;以构建高性能的网络应用。我们将首先了解Netty的原理和优势&#xff0c;然后介绍如何在Spring Boot项目中集成Netty&#xff0c;包括详…
阅读更多...
OD(9)之Mermaid序列图(Sequence diagrams)使用详解

OD(9)之Mermaid序列图(Sequence diagrams)使用详解

OD(8)之Mermaid序列图(Sequence diagrams)使用详解 Author: Once Day Date: 2024年2月21日 漫漫长路才刚刚开始… 全系列文章可参考专栏: Mermiad使用指南_Once_day的博客-CSDN博客 参考文章: 关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charti…
阅读更多...
Easy-Jmeter: 性能测试平台

Easy-Jmeter: 性能测试平台

目录 写在开始1 系统架构2 表结构设计3 测试平台生命周期4 分布式压测5 压力机管理6 用例管理6.1 新增、编辑用例6.2 调试用例6.3 启动测试6.4 动态控量6.5 测试详情6.6 环节日志6.7 实时数据6.8 测试结果 7 测试记录7 用例分析8 系统部署8.1普通部署8.2容器化部署 写在最后 写…
阅读更多...
Python中的functools模块详解

Python中的functools模块详解

大家好&#xff0c;我是海鸽。 函数被定义为一段代码&#xff0c;它接受参数&#xff0c;充当输入&#xff0c;执行涉及这些输入的一些处理&#xff0c;并根据处理返回一个值&#xff08;输出&#xff09;。当一个函数将另一个函数作为输入或返回另一个函数作为输出时&#xf…
阅读更多...
【SpringBoot】Spring常用注解总结

【SpringBoot】Spring常用注解总结

目录 ⭐spring springmvc和springboot的区别 Autowired 和Resource的区别和联系 1. SpringBootApplication 2. Spring Bean 相关 2.1. Autowired 2.2. Component,Repository,Service, Controller 2.3. RestController 2.4. Scope 2.5. Configuration 3. 处理常见的 HT…
阅读更多...
基于Springboot的校园求职招聘系统（有报告）。Javaee项目，springboot项目。

基于Springboot的校园求职招聘系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的校园求职招聘系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…
阅读更多...
HTTP---------状态码

HTTP---------状态码

当服务端返回 HTTP 响应时&#xff0c;会带有一个状态码&#xff0c;用于表示特定的请求结果。比如 HTTP/1.1 200 OK&#xff0c;里面的 HTTP/1.1 表示协议版本&#xff0c;200 则是状态码&#xff0c;OK 则是对状态码的描述。 由协议版本、状态码、描述信息组成的行被称为起始…
阅读更多...
读取7400MB/s！华为发布eKitStor Xtreme M.2闪存条

读取7400MB/s！华为发布eKitStor Xtreme M.2闪存条

今日&#xff0c;华为举行数据存储新春新品发布会&#xff0c;不仅发布全新数据湖解决方案&#xff0c;华为还针对商业市场与分销市场发布了全闪存存储新品。 据介绍&#xff0c;面向游戏加速、影视编辑、户外作业等场景&#xff0c;华为发布eKitStor Xtreme系列高性能M.2闪存条…
阅读更多...
设置主从复制时发生报错Could not find first log file name in binary log index file‘；解决方案

设置主从复制时发生报错Could not find first log file name in binary log index file‘；解决方案

如图所示&#xff0c;slave_io_runnind:no,slave_sql_running:yes 此时&#xff0c;主从配置错误&#xff0c;我们可以查看Last_IO_Error:来查看报错信息 此时&#xff0c;我们需要停止从服务器的主从服务&#xff0c; mysql> stop slave; Query OK, 0 rows affected, 1 w…
阅读更多...
k8s kubectl陈述式资源管理及命令详解，项目流程与发布示例

k8s kubectl陈述式资源管理及命令详解，项目流程与发布示例

目录 Kubernetes kubectl 命令表 _ Kubernetes(K8S)中文文档_Kubernetes中文社区http://docs.kubernetes.org.cn/683.html kubectl概念 概述 用途 kubectl语法 基本语法 简单举例 kubectl使用详解 set&#xff1a;更新 部署发布操作 暴露service service的作用 使…
阅读更多...
我的服务器为什么会被攻击？

我的服务器为什么会被攻击？

时常的网站运行中&#xff0c;很多站长可能会遇到网站被黑客攻击的情况&#xff0c;其中同行之间恶性竞争&#xff0c;不正当的竞争关系&#xff0c;导致互联网关系越来越差&#xff0c;攻击的方式多种多样&#xff0c;网站遭受攻击的频次也越来越高。其次&#xff0c;就网络黑…
阅读更多...
ChatGPT国内快速上手指南

ChatGPT国内快速上手指南

ChatGPT简介 ChatGPT是由OpenAI团队研发的自然语言处理模型&#xff0c;该模型在大量的互联网文本数据上进行了预训练&#xff0c;使其具备了深刻的语言理解和生成能力。 GPT拥有上亿个参数&#xff0c;这使得ChatGPT在处理各种语言任务时表现卓越。它的训练使得模型能够理解上…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 尧图建网站 广利置业