Spring Boot + Vue + MySQL 全栈项目实战：从零构建旅游分享平台

在实际 Java Web 项目开发中，Spring Boot 作为后端框架，Vue 作为前端框架，配合 MySQL 数据库，构成了当前企业级应用开发的主流技术栈。对于计算机专业的毕业生而言，如何将这三个技术栈整合起来，完成一个功能完整、结构清晰、可部署上线的毕业设计项目，是检验学习成果的关键一步。本文将以一个“旅游分享平台”为业务场景，详细拆解从零开始构建一个基于 Spring Boot + Vue 的前后端分离项目全过程。无论你是正在寻找毕业设计选题，还是希望系统学习这套技术栈的整合与开发流程，本文都将提供一条从环境搭建、模块设计、编码实现到部署测试的完整路径。通过本文，你将掌握如何构建一个具备用户管理、内容发布、数据交互等核心功能的小程序后台管理系统，并理解前后端分离架构下的协作模式与常见问题排查方法。1. 理解项目架构：为什么选择 Spring Boot + Vue + MySQL在开始编码之前，必须理解所选技术栈各自的职责与协作方式。一个清晰的技术架构是项目成功的基础。1.1 技术栈选型与职责划分现代 Web 应用普遍采用前后端分离架构，后端负责数据处理和业务逻辑，前端负责界面展示和用户交互。本项目的技术选型正是基于这一理念：后端 (Spring Boot)：作为服务提供者，负责接收前端请求，处理业务逻辑，与数据库交互，并返回 JSON 格式的数据。Spring Boot 的优势在于其“约定大于配置”的理念，能快速搭建可独立运行的、生产级的 Spring 应用。它内置了 Tomcat 服务器，简化了部署，并提供了强大的自动配置和起步依赖。前端 (Vue.js)：作为用户界面构建者，负责渲染页面、处理用户事件，并通过 Ajax（通常使用 Axios 库）与后端 API 进行数据通信。Vue 是一个渐进式 JavaScript 框架，核心库只关注视图层，易于上手并能与其它库或已有项目整合。其响应式数据绑定和组件化开发模式能极大提升开发效率。数据层 (MySQL)：作为数据持久化存储，负责存储用户信息、旅游分享内容、评论等结构化数据。MySQL 是一款成熟的关系型数据库，具有开源、性能稳定、社区活跃等特点，非常适合中小型项目。小程序端：作为面向用户的轻量级应用入口。小程序通常使用微信小程序原生语法或 UniApp 等跨端框架开发，通过调用后端提供的 RESTful API 获取数据和提交请求。本文重点在于后端管理系统和 API 的构建，小程序端可视为一个特定的 API 消费者。这种分离架构使得前后端可以并行开发，通过 API 文档进行约定，后端只需关注数据接口，前端则专注于用户体验。1.2 项目核心功能模块设计围绕“丽江市旅游分享平台”这一主题，我们可以规划出以下核心功能模块，这些模块也构成了数据库设计和 API 设计的基础：用户管理模块：用户注册、登录（含 JWT 令牌认证）、个人信息管理、权限区分（普通用户、管理员）。旅游分享内容模块：用户发布旅游攻略、游记、景点评价（包含文字、图片、地理位置等）。内容互动模块：对分享内容的点赞、收藏、评论功能。景点/目的地管理模块（管理员）：对丽江市景点信息的增删改查。数据统计与展示模块（管理员）：平台内容数量、用户活跃度等数据的可视化展示。小程序 API 接口模块：为微信小程序提供上述功能对应的数据接口。2. 开发环境准备与项目初始化工欲善其事，必先利其器。确保你的本地开发环境已就绪。2.1 后端环境准备 (Spring Boot)Java JDK：安装 JDK 8 或 JDK 11（LTS 版本）。在命令行输入java -version验证。Maven：用于项目管理、依赖构建。安装后配置环境变量，执行mvn -v验证。IDE：推荐使用 IntelliJ IDEA（社区版或旗舰版），它对 Spring Boot 支持极佳。数据库：安装 MySQL 5.7 或 8.0 版本，并启动服务。建议使用图形化工具如 Navicat、DBeaver 或 IDEA 自带的数据库工具进行连接管理。2.2 前端环境准备 (Vue)Node.js：Vue 的运行和构建环境。访问 Node.js 官网下载 LTS 版本安装。安装后，在命令行执行node -v和npm -v检查版本。Vue CLI：Vue 的官方脚手架工具，用于快速创建项目。通过 npm 全局安装：npm install -g @vue/cli。安装后执行vue --version验证。IDE：推荐使用 Visual Studio Code，配合 Vetur、ESLint、Prettier 等插件提升开发体验。2.3 初始化 Spring Boot 后端项目使用 Spring Initializr（可通过 IDEA 内置或访问 start.spring.io）快速生成项目骨架。Project: Maven ProjectLanguage: JavaSpring Boot: 选择 2.7.x 或 3.x 稳定版本（注意 3.x 需 JDK 17+）Project Metadata:Group:com.lijiang(示例)Artifact:travel-share-backendPackaging: JarDependencies: 添加以下关键依赖：Spring Web: 构建 Web 应用，包含 RESTful API 支持。Spring Data JPA: 简化数据库操作。MySQL Driver: MySQL 数据库连接驱动。Lombok（推荐）：通过注解简化 Java Bean 的 Getter/Setter 等方法编写。Spring Security（可选）：用于 API 权限控制和认证。初期可先不加，后期集成。生成项目后，用 IDEA 打开，等待 Maven 自动下载依赖。2.4 初始化 Vue 前端管理后台项目在选定目录下，使用 Vue CLI 创建项目。vue create travel-share-admin在交互式命令行中，选择Manually select features，然后勾选：Babel (ES6 转译)Router (Vue Router，用于页面路由)Vuex (状态管理，用于跨组件共享用户登录状态等)CSS Pre-processors (如 Sass/SCSS)Linter / Formatter (代码规范)项目创建完成后，进入项目目录并安装常用辅助库：cd travel-share-admin npm install axios --save # HTTP 请求库 npm install element-plus --save # UI 组件库（可选，也可用 Ant Design Vue 等）启动开发服务器：npm run serve，访问http://localhost:8080确认项目运行成功。3. 构建后端：Spring Boot 数据模型与 RESTful API后端是整个应用的核心，我们将从数据库设计开始，逐步实现实体类、数据访问层、业务层和控制层。3.1 数据库设计与实体类映射根据功能模块，设计核心表结构。以下为简化示例：用户表 (user)CREATE TABLE `user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `username` varchar(50) NOT NULL COMMENT '用户名', `password` varchar(255) NOT NULL COMMENT '密码（加密后）', `nickname` varchar(50) DEFAULT NULL COMMENT '昵称', `avatar` varchar(500) DEFAULT NULL COMMENT '头像URL', `phone` varchar(20) DEFAULT NULL COMMENT '手机号', `role` varchar(20) DEFAULT 'USER' COMMENT '角色：USER, ADMIN', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';旅游分享表 (travel_note)CREATE TABLE `travel_note` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `user_id` bigint(20) NOT NULL COMMENT '发布用户ID', `title` varchar(200) NOT NULL COMMENT '标题', `content` text COMMENT '详细内容', `cover_image` varchar(500) DEFAULT NULL COMMENT '封面图片URL', `location` varchar(200) DEFAULT NULL COMMENT '地点（如：丽江古城）', `view_count` int(11) DEFAULT '0' COMMENT '浏览数', `like_count` int(11) DEFAULT '0' COMMENT '点赞数', `status` tinyint(4) DEFAULT '1' COMMENT '状态：0-草稿，1-已发布，2-审核中', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', PRIMARY KEY (`id`), KEY `idx_user_id` (`user_id`), KEY `idx_location` (`location`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='旅游分享表';在 Spring Boot 项目中，创建对应的 JPA 实体类User和TravelNote。User.javapackage com.lijiang.travelshare.entity; import lombok.Data; import javax.persistence.*; import java.time.LocalDateTime; @Entity @Table(name = "user") @Data // Lombok 注解，自动生成 getter, setter, toString 等 public class User { @Id @