SpringBoot+Vue构建图书商城全栈系统实战

1. 项目概述：从零构建图书商城全栈系统

这个基于SpringBoot+Vue的图书商城管理系统，是典型的Java Web全栈开发实战项目。它完整实现了电商平台的核心功能链路：从前端商品展示、用户交互，到后端订单处理、库存管理，再到数据库持久化存储。作为毕业设计选题，它既覆盖了主流技术栈的应用场景，又具备足够的复杂度来展示开发者的工程能力。

我在实际开发中发现，这类系统最考验的不是单一功能的实现，而是如何让前后端优雅地协同工作。比如当用户在前端点击"加入购物车"时，需要经历Vue组件事件触发→Axios异步请求→SpringBoot接口处理→MyBatis数据库操作→结果返回前端渲染的完整流程。每个环节都可能成为性能瓶颈或bug温床。

2. 技术架构解析

2.1 前端技术选型

Vue 2.x + Element UI的组合是经过实战检验的方案：

• Vue CLI搭建项目骨架
• Vue Router实现SPA路由跳转
• Axios封装了带拦截器的HTTP客户端
• Element UI提供现成的表单/表格/弹窗组件

javascript复制// 典型API调用示例
export function addToCart(bookId) {
  return request({
    url: '/cart/add',
    method: 'post',
    data: { bookId }
  })
}

关键技巧：在main.js中配置axios拦截器统一处理401未授权情况，自动跳转到登录页

2.2 后端技术栈

SpringBoot 2.3 + MyBatis Plus的技术组合：

• Lombok减少样板代码
• Hutool处理工具类操作
• PageHelper实现分页查询
• JWT进行无状态认证

java复制@RestController
@RequestMapping("/api/cart")
public class CartController {
    
    @Autowired
    private CartService cartService;

    @PostMapping("/add")
    public Result addCart(@RequestBody CartItem item) {
        return cartService.addItem(item);
    }
}

2.3 数据库设计

MySQL 5.7的表结构设计要点：

• 用户体系：users(user_id, username, password_hash)
• 商品管理：books(book_id, title, price, stock)
• 订单系统：orders(order_id, user_id, total_amount)
• 关联表：order_items(id, order_id, book_id)

sql复制CREATE TABLE `orders` (
  `order_id` varchar(32) NOT NULL,
  `user_id` int(11) NOT NULL,
  `total_amount` decimal(10,2) DEFAULT NULL,
  `status` tinyint(4) DEFAULT '0',
  PRIMARY KEY (`order_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 核心功能实现

3.1 用户认证模块

采用JWT+Redis的方案解决无状态认证：

1. 登录成功生成token返回客户端
2. 前端存储token在localStorage
3. 每次请求携带在Authorization头
4. 服务端通过拦截器校验token

java复制public class JwtInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, 
                           HttpServletResponse response, 
                           Object handler) {
        String token = request.getHeader("Authorization");
        // 验证token逻辑
        if(!JwtUtil.verify(token)){
            throw new UnauthorizedException();
        }
        return true;
    }
}

3.2 商品展示系统

实现要点：

• 分页查询商品列表
• 按分类/关键词筛选
• 图片上传使用阿里云OSS
• 库存状态的实时显示

前端关键代码：

vue复制<template>
  <el-table :data="bookList">
    <el-table-column prop="title" label="书名"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="addToCart(scope.row.id)">加入购物车</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

3.3 购物车与订单系统

购物车数据结构设计：

json复制{
  "userId": 123,
  "items": [
    {
      "bookId": 456,
      "quantity": 2,
      "price": 39.99
    }
  ]
}

订单创建流程：

1. 验证购物车商品库存
2. 生成唯一订单号
3. 创建订单主表记录
4. 批量插入订单明细
5. 扣减商品库存
6. 清空购物车

4. 项目部署实战

4.1 后端部署

1. 打包SpringBoot应用：

bash复制mvn clean package -DskipTests

2. 编写Dockerfile：

dockerfile复制FROM openjdk:8-jdk-alpine
COPY target/bookstore-0.0.1.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

3. 数据库配置：

yaml复制spring:
  datasource:
    url: jdbc:mysql://mysql:3306/bookstore?useSSL=false
    username: root
    password: 123456

4.2 前端部署

1. 修改API基础地址：

js复制// .env.production
VUE_APP_BASE_API = '/api'

2. Nginx配置示例：

nginx复制server {
    listen       80;
    server_name  localhost;

    location /api {
        proxy_pass http://backend:8080;
    }

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
    }
}

5. 毕设开发经验谈

5.1 接口文档规范

使用Swagger UI自动生成API文档：

java复制@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.example.controller"))
                .paths(PathSelectors.any())
                .build();
    }
}

5.2 性能优化实践

1. 商品列表加入Redis缓存：

java复制@Cacheable(value = "books", key = "#pageNum+'-'+#pageSize")
public PageInfo<Book> getBooks(int pageNum, int pageSize) {
    // 数据库查询
}

2. 使用@Async异步处理非核心流程：

java复制@Async
public void sendOrderEmail(Order order) {
    // 发送邮件逻辑
}

5.3 常见问题排查

1. 跨域问题解决方案：

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

2. 订单并发问题处理：

sql复制UPDATE books 
SET stock = stock - 1 
WHERE book_id = 123 AND stock > 0

这个项目最让我有成就感的是实现了完整的下单流程闭环。从最初的需求分析、技术选型，到最后的压力测试、性能调优，每个环节都遇到过各种"坑"。比如在开发购物车功能时，最初没有考虑并发场景，导致在压力测试时出现了库存超卖的问题。后来通过Redis分布式锁和数据库乐观锁的双重保障，才彻底解决了这个问题。