SpringBoot+Vue药品管理系统开发实战-代码聚汇网

SpringBoot+Vue药品管理系统开发实战

刘野哥哥

1. 项目概述

这个前后端分离的药品管理系统采用SpringBoot+Vue+MyBatis+MySQL技术栈实现，是一套完整的医药行业信息化解决方案。我在实际开发中发现，这类系统在医疗机构、药店连锁等场景中需求非常普遍，但市面上很多开源项目要么功能不全，要么部署文档缺失。这个项目从技术选型到部署方案都经过精心设计，特别适合作为企业级应用的入门案例。

系统采用经典的三层架构：Vue.js构建响应式前端界面，SpringBoot提供RESTful API，MyBatis处理数据持久化，MySQL作为关系型数据库。这种架构既保证了开发效率，又能满足医药行业对数据准确性和系统稳定性的高要求。

2. 技术栈解析

2.1 SpringBoot后端框架

SpringBoot 2.7.x版本作为后端基础框架，主要考虑其：

自动配置特性大幅减少XML配置
内嵌Tomcat服务器简化部署
完善的健康检查机制适合医药系统7×24小时运行需求

关键配置示例（application.yml）：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/medicine_db?useSSL=false&serverTimezone=UTC
    username: med_admin
    password: Med@1234
  jpa:
    show-sql: true
    hibernate:
      ddl-auto: update

2.2 Vue前端框架

采用Vue 3 + Element Plus构建管理界面，主要优势：

组件化开发提升代码复用率
响应式设计适配多终端访问
丰富的UI组件库加速开发

典型页面结构：

code复制src/
├── api/           # 接口定义
├── assets/        # 静态资源  
├── components/    # 公共组件
│   ├── MedicineTable.vue  # 药品表格组件
│   └── SearchBar.vue      # 搜索组件
├── router/        # 路由配置
└── views/         # 页面视图

3. 核心功能实现

3.1 药品信息管理模块

采用CRUD标准操作：

新增药品：包含药品编码、名称、规格等20+字段
库存预警：设置上下限阈值自动提醒
批次管理：支持按生产批次追踪

关键MyBatis映射示例：

xml复制<select id="selectByCondition" resultType="Medicine">
  SELECT * FROM t_medicine
  <where>
    <if test="name != null">AND name LIKE CONCAT('%',#{name},'%')</if>
    <if test="category != null">AND category = #{category}</if>
  </where>
  ORDER BY update_time DESC
</select>

3.2 权限控制系统

基于RBAC模型实现：

用户-角色-权限三级关联
JWT token认证
前端路由动态加载

权限验证拦截器核心逻辑：

java复制public boolean preHandle(HttpServletRequest request, 
                         HttpServletResponse response,
                         Object handler) {
    String token = request.getHeader("Authorization");
    Claims claims = JwtUtil.parseToken(token);
    String uri = request.getRequestURI();
    
    if(!permissionService.checkPermission(claims.getSubject(), uri)){
        throw new UnauthorizedException("无访问权限");
    }
    return true;
}

4. 系统部署方案

4.1 开发环境搭建

后端环境：
- JDK 1.8+
- Maven 3.6+
- MySQL 5.7+
前端环境：
- Node.js 14+
- npm 6+

初始化数据库脚本：

sql复制CREATE DATABASE medicine_db CHARACTER SET utf8mb4;
CREATE USER 'med_admin'@'%' IDENTIFIED BY 'Med@1234';
GRANT ALL PRIVILEGES ON medicine_db.* TO 'med_admin'@'%';

4.2 生产环境部署

推荐使用Docker compose编排：

yaml复制version: '3'
services:
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root123
      MYSQL_DATABASE: medicine_db
    ports:
      - "3306:3306"
    
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      
  frontend:
    build: ./frontend
    ports:
      - "80:80"

5. 常见问题解决

5.1 跨域问题处理

前后端分离常见跨域解决方案：

SpringBoot配置CORS：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .maxAge(3600);
    }
}

Nginx反向代理：

nginx复制server {
    listen 80;
    server_name med.example.com;
    
    location /api {
        proxy_pass http://backend:8080;
    }
    
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

5.2 性能优化建议

数据库层面：
- 为药品编码、批次号等字段建立索引
- 大数据量表采用分库分表
缓存策略：
- 使用Redis缓存药品目录
- 本地缓存高频访问数据
前端优化：
- 组件懒加载
- 接口数据分页

6. 项目扩展方向

对接医保系统：实现医保药品目录同步
移动端适配：开发微信小程序版本
智能预警：基于历史销售数据预测库存需求
电子处方：集成数字签名功能

实际开发中我发现，药品批号管理是最容易出问题的环节。建议在数据库设计时就建立完整的批次追踪体系，包括：

生产日期
有效期
供应商信息
入库检验记录

这样的设计在后期药品召回等场景中会非常有用。我曾经遇到过因为批次记录不全导致需要人工核对上千条记录的情况，提前做好设计能避免很多麻烦。