当前位置：首页 > news >正文

校易淘实训｜Vue3+SpringBoot+MySQL 前后端分离项目从零搭建完整流程 + 全套踩坑解决方案

news 2026/6/30 16:17:40

标签：#Vue3 #SpringBoot #前后端分离 #MyBatis-Plus #校园二手平台字数：约 1200 字

一、项目前言

本次实训我们开发校园二手交易平台「校易淘」，采用标准前后端分离架构。本文完整记录从零搭建前后端基础工程、数据库设计、跨域配置、接口联调全过程，把开发时遇到的端口冲突、跨域、MyBatis 映射、时区报错等高频问题一次性给出解决方案，适合刚接触前后端分离的同学参考。

二、开发工具准备

后端：IDEA 2024、Maven3.8、MySQL8.0、Navicat
前端：VSCode、Node16、npm、Vite
辅助工具：Postman 接口测试、Git 代码管理

三、后端 SpringBoot 项目搭建

初始化依赖新建 SpringBoot 工程，勾选核心依赖： Spring Web、MySQL Driver、MyBatis-Plus Starter、Lombok、Validation、WebSocket（预留聊天模块） pom.xml 核心依赖片段：

xml

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.1</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency>

application.yml 配置

yaml

server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://127.0.0.1:3306/campus_trade?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai username: root password: root mybatis-plus: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.trade.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

基础配置类

跨域 CorsConfig：解决前端 8081 访问后端 8080 跨域拦截
MyBatisPlus 分页插件配置
全局统一返回结果类 Result、全局异常处理器 GlobalExceptionHandler

四、前端 Vue3 项目搭建

Vite 创建项目

bash

npm create vite@latest campus-front -- --template vue cd campus-front npm install npm install element-plus axios vue-router@4 pinia

全局封装 Axios 请求，统一添加请求头 token、统一拦截错误
路由 Router 搭建，划分登录页、首页、商品、订单、聊天、个人中心路由
配置 vite.config.js 代理，转发 /api 请求到后端localhost:8080

server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }

五、数据库基础表设计

创建数据库 campus_trade，核心基础表 user 用户表：

sql

CREATE TABLE `user` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键', `stu_id` varchar(20) NOT NULL COMMENT '学号（唯一登录凭证）', `username` varchar(30) DEFAULT NULL COMMENT '昵称', `password` varchar(100) NOT NULL COMMENT '密码加密存储', `avatar` varchar(255) DEFAULT NULL COMMENT '头像', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), UNIQUE KEY `uk_stuid` (`stu_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;