SpringBoot+vueJS的酒水销售管理系统的设计与实现的设计与实现“

本论文针对酒水销售行业信息化管理需求，设计并实现了一套基于 SpringBoot 和 VueJS 的轻量化销售管理系统。通过前后端分离架构，结合 MySQL 数据库和 ElementUI 组件库，实现了商品管理、订单处理、库存预警、数据分析等核心功能。系统采用微服务思想优化业务流程，通过 Swagger 接口文档实现前后端高效协作，最终通过压力测试验证了系统的稳定性和可扩展性。

908925859力

943人浏览 · 2025-06-03 08:52:32

908925859力 · 2025-06-03 08:52:32 发布

摘要

关键词：SpringBoot；VueJS；前后端分离；销售管理系统；微服务

一、绪论

1.1 研究背景

传统酒水销售行业存在库存管理混乱、订单处理效率低、数据孤岛明显等问题
数字化转型需求推动企业通过信息化系统提升供应链效率和客户体验
轻量化框架（SpringBoot+VueJS）降低开发成本，适合中小微企业应用

1.2 研究目标

设计一套集商品管理、订单管理、库存预警、销售分析于一体的全流程管理系统
实现前后端分离架构，提升系统可维护性和扩展能力
集成数据可视化模块，为决策提供实时数据支撑

二、关键技术选型

2.1 后端技术栈

技术 / 工具	作用描述
SpringBoot	快速构建 RESTful 服务，简化配置
MyBatis-Plus	ORM 框架，实现数据库高效操作
MySQL	关系型数据库存储业务数据
Swagger2	自动生成 API 文档，方便前后端联调
Redis	缓存热点数据，提升系统响应速度

2.2 前端技术栈

技术 / 工具	作用描述
VueJS	构建响应式前端界面
Vue Router	实现前端路由管理
Vuex	状态管理模式，优化组件间通信
ElementUI	基于 Vue 的 UI 组件库，提升开发效率
Axios	前端 HTTP 请求库，实现接口调用

2.3 架构设计原则

前后端分离：后端专注业务逻辑，前端负责用户交互，通过 RESTful API 通信
微服务轻量化：采用单一 SpringBoot 应用承载核心服务，预留微服务拆分接口
分层设计：分为表现层（Vue）、服务层（SpringBoot）、数据层（MyBatis）

三、系统需求分析

3.1 业务流程分析

3.2 功能需求列表

模块名称	核心功能描述
商品管理	酒水信息录入、修改、删除、批量导入
订单管理	订单创建、审核、状态跟踪、退货处理
库存管理	库存查询、出入库记录、预警阈值设置
客户管理	客户信息维护、等级划分、消费记录分析
销售分析	销量统计、热销商品排行、区域销售对比
系统管理	权限分配、角色管理、操作日志记录

3.3 用例图

四、系统设计

4.1 系统架构图

4.2 数据库设计

4.2.1 核心数据表

商品表（t_goods）
| 字段名 | 类型 | 说明 | 约束条件 |
|--------------|------------|-----------------------|----------------|
| goods_id | INT | 主键，自增 | NOT NULL |
| goods_name | VARCHAR (50)| 商品名称 | UNIQUE |
| category | VARCHAR (20)| 类别（如白酒 / 红酒） | NOT NULL |
| price | DECIMAL (10,2)| 单价 | DEFAULT 0 |
| stock | INT | 库存量 | DEFAULT 0 |
| remark | TEXT | 备注信息 | NULL |
订单表（t_order）
| 字段名 | 类型 | 说明 | 约束条件 |
|--------------|------------|-----------------------|----------------|
| order_id | VARCHAR (32)| 订单号（UUID 生成） | PRIMARY KEY |
| user_id | INT | 客户 ID | FOREIGN KEY |
| goods_id | INT | 商品 ID | FOREIGN KEY |
| quantity | INT | 购买数量 | NOT NULL |
| total_price | DECIMAL (10,2)| 总价 | NOT NULL |
| status | TINYINT | 状态（0 - 待审核，1 - 已确认，2 - 已发货）| DEFAULT 0 |

4.2.2 ER 图

生成失败，换个方式问问吧

五、系统实现关键技术

5.1 后端核心功能实现

5.1.1 商品管理接口

java

@RestController
@RequestMapping("/goods")
public class GoodsController {
    @Autowired
    private GoodsService goodsService;

    // 新增商品
    @PostMapping
    public Result save(@RequestBody GoodsEntity goods) {
        boolean flag = goodsService.save(goods);
        return flag ? Result.success() : Result.error("保存失败");
    }

    // 库存预警查询
    @GetMapping("/warn")
    public Result getWarnList() {
        List<GoodsEntity> list = goodsService.list(Wrappers.<GoodsEntity>lambdaQuery()
                .lt(GoodsEntity::getStock, GoodsEntity::getWarningStock));
        return Result.success(list);
    }
}

5.1.2 订单状态自动更新

通过 Spring Boot 的 Scheduled 任务实现订单超时未支付自动取消：

java

@Service
public class OrderTaskService {
    @Autowired
    private OrderService orderService;

    @Scheduled(cron = "0 0/5 * * * ?") // 每5分钟执行一次
    public void updateOrderStatus() {
        orderService.lambdaUpdate()
                .set(OrderEntity::getStatus, 4) // 状态4为取消
                .eq(OrderEntity::getStatus, 0)
                .lt(OrderEntity::getCreateTime, LocalDateTime.now().minusMinutes(30))
                .update();
    }
}

5.2 前端界面实现

5.2.1 商品列表页（Vue 组件）

vue

<template>
  <div class="goods-list">
    <el-table :data="goodsList" border stripe>
      <el-table-column prop="goodsName" label="商品名称" width="200"></el-table-column>
      <el-table-column prop="category" label="类别" width="120"></el-table-column>
      <el-table-column prop="price" label="单价" width="100"></el-table-column>
      <el-table-column prop="stock" label="库存" width="100">
        <template #default="{row}">
          <span :class="row.stock < row.warningStock ? 'warn-text' : ''">{{ row.stock }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{row}">
          <el-button type="primary" size="small" @click="editGoods(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteGoods(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: []
    };
  },
  mounted() {
    this.fetchGoodsList();
  },
  methods: {
    fetchGoodsList() {
      this.$axios.get('/goods/list').then(res => {
        this.goodsList = res.data;
      });
    }
  }
};
</script>

5.2.2 数据可视化（ECharts 集成）

vue

<template>
  <div class="chart-container">
    <el-chart :style="{ width: '100%', height: '400px' }" :chart="chart"></el-chart>
  </div>
</template>

<script>
import { LineChart, Line, XAxis, YAxis, Tooltip } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { useChart } from '@vue/plugin-echarts';

export default {
  components: {
    LineChart, Line, XAxis, YAxis, Tooltip
  },
  setup() {
    const chart = useChart({
      renderer: CanvasRenderer,
      option: {
        title: { text: '月度销量趋势' },
        xAxis: { data: ['1月', '2月', '3月', '4月', '5月'] },
        yAxis: { },
        series: [{ name: '销量', type: 'line', data: [120, 150, 180, 200, 220] }]
      }
    });
    return { chart };
  }
};
</script>