基于 Spring Boot 和 Vue.js 的全栈购物平台开发实践

news2025/5/19 7:27:58

在现代 Web 开发中，前后端分离的架构已经成为主流。本文将分享如何使用 Spring Boot 和 Vue.js构建一个全栈购物平台，涵盖从后端 API 开发到前端页面实现的完整流程。

1. 技术栈介绍

后端技术栈
JDK 1.8：稳定且广泛使用的 Java 版本。
Spring Boot：快速构建 RESTful API。
MyBatis：简化数据库操作。
MySQL：存储用户、商品和订单数据。
Redis：缓存热点数据，提升系统性能。

前端技术栈
Vue.js：构建单页面应用（SPA）。
Axios：与后端 API 通信。
Element U：快速构建美观的界面。
Vue Router：实现前端路由。
Vuex：管理全局状态。

开发工具
IntelliJ IDEA：Java 开发 IDE。
VS Code：前端开发 IDE。
Postman：API 调试工具。
Git：版本控制。

2. 项目结构

后端结构
src/main/java/com/shopping
├── config // 配置类
├── controller // 控制器
├── service // 服务层
├── mapper // MyBatis Mapper
├── entity // 实体类
├── dto // 数据传输对象
├── exception // 自定义异常
└── ShoppingApplication.java // 启动类
前端结构
src
├── assets // 静态资源
├── components // 组件
├── views // 页面
├── router // 路由配置
├── store // Vuex 状态管理
├── App.vue // 根组件
└── main.js // 入口文件

3. 后端开发

3.1 数据库设计
设计用户、商品、订单等表结构：
用户表（user）：存储用户信息。
商品表（product）：存储商品信息。
订单表（order）：存储订单信息。
订单商品表（order_item）：存储订单中的商品信息。

3.2 实现 RESTful API
使用 Spring Boot 实现以下 API：
用户模块：
注册：`POST /user/register`
登录：`POST /user/login`
商品模块：
获取商品列表：`GET /product/list`
获取商品详情：`GET /product/{id}`
订单模块：
创建订单：`POST /order/create`
获取订单列表：`GET /order/list`

3.3 全局异常处理
使用 `@ControllerAdvice` 和 `@ExceptionHandler` 实现全局异常处理，统一返回错误信息。

4. 前端开发

4.1 页面设计
使用 Vue.js 和 Element UI 设计以下页面：
登录页面：用户登录。
商品列表页面：展示商品信息。
商品详情页面：展示商品详情。
购物车页面：展示购物车中的商品。
订单页面：展示用户订单。

4.2 前端路由
使用 Vue Router 实现前端路由：
javascript
const routes = [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/product/list', component: ProductList },
    { path: '/product/:id', component: ProductDetail },
    { path: '/cart', component: Cart },
    { path: '/order', component: Order },
];
4.3 状态管理
使用 Vuex 管理全局状态，例如用户登录状态、购物车商品等。

5. 前后端联调

5.1 使用 Axios 发送请求
在前端使用 Axios 发送请求到后端 API：
javascript
axios.post('/user/login', {
    username: 'test',
    password: '123456'
}).then(response => {
    console.log(response.data);
}).catch(error => {
    console.error(error);
});
5.2 跨域问题解决
在 Spring Boot 中配置跨域支持：
java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}

6. 部署与运行

6.1 后端部署
使用 Maven 打包 Spring Boot 项目：
bash
mvn clean package
运行生成的 JAR 文件：
bash
java -jar target/ShoppingPlatform.jar6.2 前端部署
使用 Vue CLI 打包前端项目：
bash
npm run build

将生成的 `dist` 目录部署到 Nginx 或 Tomcat。