SpringBoot+Vue学生用品采购系统开发实战-代码聚汇网

SpringBoot+Vue学生用品采购系统开发实战

futa子

1. 项目背景与核心价值

这个学生用品采购系统平台是一个典型的Java Web全栈项目，采用SpringBoot+Vue技术栈实现前后端分离架构。作为高校计算机专业毕业设计的优质选题，它完美覆盖了以下教学实践需求：

技术栈完整性：后端SpringBoot框架+前端Vue框架的组合，符合当前企业级开发的主流技术选型
业务场景实用性：采购管理系统是企事业单位的通用需求，具有实际应用价值
教学示范性：包含用户权限管理、商品CRUD、订单流程等经典业务模块

我在实际开发中发现，这类系统最考验学生的不是功能实现本身，而是如何规范地处理以下问题：

前后端数据交互的接口设计
数据库表关系的合理规划
异常情况的统一处理机制
可扩展的权限控制方案

2. 技术架构详解

2.1 后端技术选型

采用SpringBoot 2.7.x作为基础框架，主要依赖包括：

xml复制<dependencies>
    <!-- Web支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- 数据库相关 -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.2.2</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>1.2.8</version>
    </dependency>
    
    <!-- 工具类 -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.78</version>
    </dependency>
</dependencies>

关键配置要点：

数据库连接池使用Druid而非HikariCP，因其提供更完善的监控功能
MyBatis配置开启驼峰命名自动转换
全局异常处理器需捕获ServiceException和系统异常

2.2 前端技术方案

Vue 2.x技术栈构成：

核心框架：Vue 2.6.x
UI组件库：Element UI 2.15.x
路由管理：Vue Router 3.5.x
状态管理：Vuex 3.6.x
HTTP客户端：Axios 0.26.x

项目结构示例：

code复制src/
├── api/            # 接口定义
├── assets/         # 静态资源  
├── components/     # 公共组件
├── router/         # 路由配置
├── store/          # Vuex状态
├── utils/          # 工具函数
└── views/          # 页面组件

3. 数据库设计与实现

3.1 核心表结构

sql复制-- 用户表
CREATE TABLE `sys_user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL COMMENT '登录名',
  `password` varchar(100) NOT NULL COMMENT '密码',
  `real_name` varchar(50) DEFAULT NULL COMMENT '真实姓名',
  `role_id` int DEFAULT NULL COMMENT '角色ID',
  `status` tinyint DEFAULT '1' COMMENT '状态(0:禁用,1:正常)',
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 商品表
CREATE TABLE `product` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL COMMENT '商品名称',
  `category_id` int DEFAULT NULL COMMENT '分类ID',
  `spec` varchar(50) DEFAULT NULL COMMENT '规格',
  `unit` varchar(10) DEFAULT NULL COMMENT '单位',
  `price` decimal(10,2) DEFAULT NULL COMMENT '单价',
  `stock` int DEFAULT '0' COMMENT '库存',
  `image_url` varchar(255) DEFAULT NULL COMMENT '图片URL',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 采购订单表
CREATE TABLE `purchase_order` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `order_no` varchar(30) NOT NULL COMMENT '订单编号',
  `user_id` bigint NOT NULL COMMENT '申请人ID',
  `total_amount` decimal(10,2) DEFAULT NULL COMMENT '总金额',
  `status` tinyint DEFAULT '0' COMMENT '状态(0:待审核,1:已通过,2:已拒绝)',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `order_no` (`order_no`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 关键设计考量

索引设计：
- 用户表的username字段建立唯一索引
- 订单表的order_no字段建立唯一索引
- 商品表的category_id字段建立普通索引
字段类型选择：
- 金额字段使用DECIMAL(10,2)而非FLOAT
- 状态字段使用TINYINT而非VARCHAR
- 时间字段统一使用datetime类型
分表策略：
- 订单明细表建议按年月分表
- 操作日志表建议按业务模块分表

4. 接口规范与文档生成

4.1 RESTful接口设计

采用标准的RESTful风格设计，主要包含以下接口类型：

接口类型	路径示例	说明
GET	/api/products	获取商品列表
POST	/api/products	新增商品
PUT	/api/products/	修改商品信息
DELETE	/api/products/	删除商品
GET	/api/orders/	获取订单详情

4.2 Swagger集成配置

java复制@Configuration
@EnableSwagger2
public class SwaggerConfig {
    
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.example.controller"))
                .paths(PathSelectors.any())
                .build();
    }
    
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("学生用品采购系统API文档")
                .description("毕业设计项目接口说明")
                .version("1.0")
                .build();
    }
}

接口文档访问地址：http://localhost:8080/swagger-ui.html

5. 典型业务场景实现

5.1 采购流程实现

核心代码示例（Controller层）：

java复制@RestController
@RequestMapping("/api/orders")
public class OrderController {
    
    @Autowired
    private OrderService orderService;
    
    @PostMapping
    public Result createOrder(@RequestBody OrderCreateDTO dto) {
        String orderNo = orderService.createOrder(dto);
        return Result.success(orderNo);
    }
    
    @GetMapping("/{orderNo}")
    public Result getOrderDetail(@PathVariable String orderNo) {
        OrderVO vo = orderService.getOrderDetail(orderNo);
        return Result.success(vo);
    }
    
    @PutMapping("/{orderNo}/approve")
    public Result approveOrder(@PathVariable String orderNo) {
        orderService.approveOrder(orderNo);
        return Result.success();
    }
}

5.2 权限控制方案

基于RBAC模型的实现：

java复制@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/api/login").permitAll()
            .antMatchers("/api/admin/**").hasRole("ADMIN")
            .antMatchers("/api/teacher/**").hasAnyRole("TEACHER", "ADMIN")
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .addFilter(new JwtAuthorizationFilter(authenticationManager()))
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and()
            .csrf().disable();
    }
}

6. 项目部署与运维

6.1 后端部署要点

打包命令：

bash复制mvn clean package -DskipTests

启动参数配置：

properties复制# application-prod.properties
server.port=8080
spring.datasource.url=jdbc:mysql://localhost:3306/procurement?useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.druid.initial-size=5
spring.datasource.druid.max-active=20

启动脚本：

bash复制nohup java -jar procurement.jar --spring.profiles.active=prod > app.log 2>&1 &

6.2 前端部署方案

生产环境打包：

bash复制npm run build

Nginx配置示例：

nginx复制server {
    listen       80;
    server_name  localhost;
    
    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

7. 开发经验与避坑指南

跨域问题解决方案：

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

MyBatis常见问题：

实体类属性与表字段映射问题：确保开启驼峰命名或使用@Result注解
动态SQL编写：推荐使用<script>标签方式
分页查询：建议使用PageHelper插件

Vue性能优化建议：

路由懒加载：component: () => import('./views/User.vue')
第三方库按需引入：import { Button } from 'element-ui'
大数据列表使用虚拟滚动

接口联调技巧：

使用Postman进行接口测试
开发阶段开启CORS方便调试
统一响应格式：

json复制{
    "code": 200,
    "message": "success",
    "data": {}
}

这个项目完整实现了学生用品采购的全流程管理，包括用户管理、商品管理、采购申请、订单审批等核心功能模块。作为毕业设计项目，它不仅展示了SpringBoot和Vue的技术应用能力，更体现了规范的软件开发流程和文档编写能力。