基于SpringBoot+Vue的嘉泰中药材销售系统 | 完整毕设项目（附运行截图+源码）-优快云博客

本文链接：https://blog.youkuaiyun.com/Manofletters/article/details/148980957

🌿 基于SpringBoot+Vue的嘉泰中药材销售系统 - 完整毕业设计项目分享

博主介绍：✌优快云全栈领域优质创作者，博客之星、掘金/知乎/b站/华为云/阿里云等平台优质作者，专注于Java、小程序/APP、python、大数据等技术领域和毕业项目实战，以及程序定制化开发、文档编写、答疑辅导等。
🌟文末获取系统源码+数据库+文档🌟
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以和学长沟通，希望帮助更多的人！！！

项目亮点: 现代化UI设计 | 完整电商流程 | 养生知识模块 | 多端适配 | 企业级架构

适用人群: 毕业设计、学习参考、项目实战、技术提升

📋 项目概述

嘉泰中药材销售系统是一个面向中药材爱好者和消费者的在线销售平台，提供中药材浏览、购买、养生知识获取等核心功能。项目采用前后端分离架构，前端基于Vue 2.x构建响应式界面，后端以Spring Boot为核心开发RESTful API，实现了从用户认证到订单支付的完整业务闭环。

🌟 系统特色

🎨 现代化设计: 采用清新中药主题配色，卡片式商品展示，适配PC与移动端
🛒 完整电商流程: 支持购物车管理、多支付方式（模拟）、订单追踪等核心功能
📚 养生知识模块: 提供中医养生文章、体质辨识等内容，增强用户粘性
🔐 安全认证: 基于Sa-Token的权限管理体系，保障用户信息安全
📊 数据可视化: 后台管理端集成销售数据统计（ECharts），辅助运营决策

🛠️ 技术栈详解

前端技术栈

Vue.js 2.x          - 渐进式前端框架
Element UI          - 企业级UI组件库
Vuex               - 状态管理
Vue Router         - 路由管理
Axios              - HTTP客户端
ECharts            - 数据可视化

后端技术栈

Spring Boot 2.x     - 快速开发框架
MyBatis-Plus 3.x    - 增强版ORM框架
MySQL 8.0          - 关系型数据库
Redis              - 缓存中间件
Sa-Token           - 权限认证框架
Knife4j            - API文档工具

🎯 核心功能模块

1. 用户认证系统

注册/登录: 支持手机号、邮箱注册，JWT令牌认证
个人中心: 头像上传、收货地址管理、账户余额查看
收藏夹: 收藏感兴趣的中药材，快速查看历史关注

2. 中药材浏览模块

分类筛选: 按祛湿类、安神类等中药分类快速查找（支持多级分类）
详情页: 展示药材价格、功效、用法，关联推荐相似药材
搜索排序: 支持名称模糊搜索，按价格/销量排序

3. 购物车与订单

graph TD
    A[浏览药材] --> B[加入购物车]
B --> C[选择规格/数量]
C --> D[确认订单]
D --> E[选择支付方式（模拟）]
E --> F[支付成功]
F --> G[订单发货/待评价]

4. 养生知识社区

文章列表: 按季节、体质分类的养生文章（如春季调理指南）
互动评论: 用户可对文章留言，支持评论点赞
体质测试: 简易体质辨识工具，推荐适合的中药材

5. 后台管理端

商品管理: 药材上下架、库存修改、价格调整
订单监控: 实时查看订单状态（待支付/已发货/已完成）
数据统计: 销售趋势、热门药材、用户活跃度分析（ECharts可视化）

💻 系统架构设计

整体架构图

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   前端 Vue.js    │    │  后端 Spring    │    │    数据库层      │
│                 │    │     Boot        │    │                 │
│  ├─ 用户界面     │◄──►│  ├─ 控制层      │◄──►│  ├─ MySQL       │
│  ├─ 路由管理     │    │  ├─ 业务层      │    │  ├─ Redis       │
│  ├─ 状态管理     │    │  ├─ 数据层      │    │  └─ MinIO（文件存储）│
│  └─ 组件库      │    │  └─ 配置层      │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘

🎨 UI界面展示

首页设计

轮播图: 展示平台活动（如“春季养生特惠”）和热门药材
分类导航: 快速入口直达祛湿类、安神类等药材专区
推荐模块: 热门药材（人参/当归）、最新养生文章卡片式展示

药材详情页

主图展示: 高清水药材图片（支持放大查看）
核心信息: 价格、库存、功效标签（如“补气”“养血”）
关联推荐: 基于浏览记录的相似药材推荐（如“黄芪”推荐给查看“人参”的用户）

购物车页面

多选操作: 支持勾选多个商品统一结算
数量调整: 加减按钮控制购买数量（库存实时校验）
价格合计: 自动计算总价（含运费）

后台数据看板

销售趋势: 近30天订单量/销售额折线图
热门药材: 销量TOP5药材柱状图
用户分布: 注册用户地域分布图（中国地图可视化）

🔧 核心代码实现

1. 后端药材查询接口（Spring Boot）

@RestController
@RequestMapping("/api/herb")
public class HerbController {
    @Autowired
    private IKHerbInventoryService herbService;

    /**
     * 分页查询药材列表
     */
    @PostMapping("/list")
    public R<PageVO> list(@RequestBody BaseQuery query) {
        return herbService.selectKHerbInventoryList(query);
    }

    /**
     * 获取药材详情
     */
    @GetMapping("/{id}")
    public R<KHerbInventory> detail(@PathVariable Long id) {
        return herbService.selectKHerbInventoryById(id);
    }
}

2. 前端药材列表组件（Vue）

<template>
  <div class="herb-list">
    <div class="filter">
      <el-select v-model="selectedCategory" @change="loadHerbs">
        <el-option v-for="cate in categories" :key="cate.id" :label="cate.name" :value="cate.id"></el-option>
      </el-select>
    </div>
    <div class="cards">
      <el-card v-for="herb in herbList" :key="herb.id" @click="goDetail(herb.id)">
        <img :src="herb.image" class="herb-img"/>
        <div class="herb-name">{{ herb.name }}</div>
        <div class="herb-price">¥{{ herb.price }}</div>
      </el-card>
    </div>
  </div>
</template>

3. 数据库药材实体（MyBatis-Plus）

@Data
@TableName("k_herb_inventory")
public class KHerbInventory {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String herbName;
    private Integer quantity;
    private BigDecimal price;
    private String effects;
    private String usage;
    private LocalDateTime createTime;
}

🚀 项目部署与运行

环境要求

JDK 1.8+
Node.js 12+
MySQL 5.7+
Redis 6.0+

后端部署

# 1. 导入数据库脚本（mysql.sql）
mysql -u root -p < mysql.sql

# 2. 修改配置（bs-templates-springboot-init/src/main/resources/application-dev.yml）
# 配置MySQL连接：jdbc:mysql://localhost:3306/mysql
# 配置Redis连接：host=localhost, port=6379

# 3. 启动后端
mvn spring-boot:run

前端部署

# 1. 安装依赖（vue_user目录）
npm install

# 2. 启动开发环境
npm run serve

# 3. 生产环境打包
npm run build

📊 适合人群与学习价值

适合人群

毕业设计: 计算机/软件工程专业学生的优质选题
技术学习: 想掌握Spring Boot+Vue前后端开发的学习者
项目实战: 需要完整电商项目经验的开发者
求职准备: 积累全栈开发项目的应届毕业生

学习价值

全栈能力: 掌握前后端分离开发模式与协作流程
业务理解: 熟悉电商核心流程（商品-购物车-订单-支付）设计
技术实践: 主流框架（Spring Boot/Vue）的企业级应用
工程规范: 代码分层、接口设计、异常处理等最佳实践

📝 项目总结

嘉泰中药材销售系统是一个功能完善、技术先进的全栈Web应用，结合了电商核心功能与中医养生特色。通过现代化技术栈和用户友好的界面设计，为用户提供了从药材选购到养生知识学习的一站式体验。项目涵盖用户管理、商品展示、订单处理等电商核心模块，是学习全栈开发和完成毕业设计的优质选择。

项目亮点

✅ 技术栈主流: Spring Boot+Vue 2.x 企业级技术组合
✅ 功能完整: 覆盖电商全流程+特色养生模块
✅ UI体验佳: 清新中药主题设计，适配多端
✅ 代码规范: 分层清晰、注释完善，易于扩展
✅ 部署简单: 提供详细文档，快速搭建运行

技术收获

掌握Spring Boot快速开发与MyBatis-Plus使用
学会Vue组件化开发与状态管理（Vuex）
理解前后端分离架构与RESTful API设计
熟悉MySQL数据库设计与Redis缓存应用

🔥 如果这个项目对你有帮助，欢迎点赞收藏！有问题可以在评论区交流讨论～