标签#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 核心依赖片段xmldependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependencyapplication.yml 配置yamlserver: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://127.0.0.1:3306/campus_trade?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/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 创建项目bashnpm create vitelatest campus-front -- --template vue cd campus-front npm install npm install element-plus axios vue-router4 pinia全局封装 Axios 请求统一添加请求头 token、统一拦截错误路由 Router 搭建划分登录页、首页、商品、订单、聊天、个人中心路由配置 vite.config.js 代理转发 /api 请求到后端localhost:8080jsserver: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } }五、数据库基础表设计创建数据库 campus_trade核心基础表 user 用户表sqlCREATE 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) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;六、联调测试与全套踩坑汇总跨域报错未配置 CorsConfig前端请求 403新增全局跨域配置解决数据库时区异常url 添加 serverTimezoneAsia/ShanghaiLombok 失效IDEA 安装 Lombok 插件、开启注解支持MyBatis 下划线转驼峰不生效开启 map-underscore-to-camel-caseVite 代理失效接口路径统一加 /api 前缀后端接口统一匹配。七、个人实操心得搭建基础框架是整个项目地基前期规范配置、统一返回格式、提前处理跨域和分页能大幅减少后续模块开发的重复 bug。前后端分离一定要约定统一接口规范否则多人开发极易出现对接冲突。