SpringBoot+Vue前后端分离架构实战：红色旅游系统毕业设计全流程

红色革命老区旅游系统是一个典型的基于现代Web技术栈的毕业设计项目，它结合了SpringBoot后端和Vue前端，旨在为革命老区提供一个集信息展示、线路规划、在线预订、文化宣传于一体的数字化平台。对于计算机相关专业的毕业生来说，这类项目不仅能全面考察你对前后端分离架构、数据库设计、业务逻辑实现和系统部署的理解，还能让你在实践中掌握从需求分析到项目上线的完整流程。本文将带你从零开始，理解如何设计并实现这样一个系统，涵盖技术选型、环境搭建、核心模块开发、前后端联调以及生产环境部署的完整链路，确保你不仅能完成一个可运行的毕设，更能理解每一步背后的工程决策。

1. 理解项目架构与技术选型

在动手编码之前，理清整个系统的技术栈和架构设计是至关重要的。一个清晰的架构能让你在开发过程中避免混乱，也更容易向答辩老师阐述你的设计思路。

1.1 为什么选择 SpringBoot + Vue 前后端分离架构

传统的Java Web项目（如JSP/Servlet）将前端页面和后端逻辑耦合在一起，代码维护困难，前后端开发人员协作效率低。而前后端分离架构将前端展示层和后端服务层彻底解耦。

• 后端 (SpringBoot)：专注于提供业务逻辑和数据接口。它负责用户认证、订单处理、数据持久化等核心功能，并通过RESTful API以JSON格式向前端提供数据。SpringBoot的“约定大于配置”理念，能让你快速搭建一个稳定、可扩展的后端服务，无需过多关注繁琐的XML配置。
• 前端 (Vue.js)：专注于用户界面和交互体验。它通过调用后端API获取数据，并利用组件化、响应式的特性，动态地渲染出旅游系统的各个页面，如首页轮播、景点列表、详情页、个人中心等。Vue的学习曲线相对平缓，生态丰富，非常适合快速开发复杂的单页面应用（SPA）。

这种架构的优势在于职责清晰、易于并行开发、前端可独立部署，并且后端API可以被多种客户端（如Web、小程序、App）复用，符合现代Web应用的发展趋势。

1.2 核心依赖与版本锁定

为了避免因依赖版本冲突导致的环境问题，在项目伊始就明确并锁定核心依赖的版本是最佳实践。以下是一个推荐的技术栈清单：

后端技术栈 (SpringBoot 2.7.x)

• Web框架: Spring Boot Starter Web (提供MVC、内嵌Tomcat)
• 数据持久层: MyBatis-Plus (极大简化CRUD操作)
• 数据库: MySQL 8.0+ (关系型数据库，存储用户、景点、订单等数据)
• 数据库连接: Druid (高性能数据库连接池)
• JSON处理: Jackson (或Fastjson)
• 身份认证: Spring Security 或 JWT (JSON Web Token)
• 模板引擎 (可选): Thymeleaf (如果后端需要渲染少量页面，如管理后台登录页)
• 构建工具: Maven 3.6+

前端技术栈 (Vue 3.x)

• 框架: Vue 3 (使用Composition API)
• 构建工具: Vite (替代Webpack，启动和热更新更快)
• 路由: Vue Router 4.x
• 状态管理: Pinia (替代Vuex，更简洁)
• UI组件库: Element Plus (适用于中后台系统) 或 Vant (适用于移动端风格)
• HTTP客户端: Axios
• 包管理: npm 或 yarn

注意：SpringBoot 2.7.x是一个长期支持版本，社区资源丰富，稳定性高。不建议在毕设中盲目追求最新版本（如SpringBoot 3.x），以免遇到未知的兼容性问题。

2. 项目初始化与环境搭建

一个良好的开端是成功的一半。我们将分别创建后端和前端项目，并配置好基础的开发环境。

2.1 后端SpringBoot项目创建与配置

使用IntelliJ IDEA的Spring Initializr是创建项目最快捷的方式。

1. 创建项目：打开IDEA，选择File -> New -> Project，选择Spring Initializr。填写项目元数据（Group, Artifact, Package）。Java版本选择8或11，这两个是生产环境最主流的LTS版本。
2. 选择依赖：在Dependencies中，勾选：
   • Spring Web(构建Web应用)
   • MyBatis Framework(或稍后手动引入MyBatis-Plus)
   • MySQL Driver(数据库驱动)
   • Lombok(简化实体类代码，可选但推荐)
3. 项目结构：生成的项目结构如下：

   src/main/java/com/yourpackage/ ├── controller/ # 控制器层，接收请求，返回响应 ├── service/ # 业务逻辑层 │ └── impl/ # 业务逻辑实现类 ├── mapper/ # MyBatis Mapper接口层（或dao层） ├── entity/ # 实体类，对应数据库表 ├── dto/ # 数据传输对象，用于前后端交互 ├── vo/ # 视图对象，用于封装返回给前端的数据 └── config/ # 配置类，如MyBatis-Plus配置、Web配置等 src/main/resources/ ├── application.yml # 主配置文件 ├── application-dev.yml # 开发环境配置 ├── application-prod.yml # 生产环境配置 └── mapper/ # MyBatis的XML映射文件（如果使用）

4. 配置数据库连接：在application-dev.yml中配置开发环境数据库。

   spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/red_tourism_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai username: root password: yourpassword type: com.alibaba.druid.pool.DruidDataSource # 使用Druid连接池 druid: initial-size: 5 min-idle: 5 max-active: 20 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL，调试用 global-config: db-config: id-type: auto # 主键策略，数据库自增 mapper-locations: classpath:mapper/*.xml

5. 引入MyBatis-Plus：在pom.xml中，将Spring Initializr生成的mybatis-spring-boot-starter依赖替换为mybatis-plus-boot-starter。

   <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3</version> <!-- 使用与SpringBoot 2.7兼容的版本 --> </dependency>

2.2 前端Vue项目创建与配置

我们使用Vite来创建Vue 3项目，它比传统的Vue CLI更快。

1. 创建项目：打开终端，执行以下命令。

   npm create vue@latest red-tourism-frontend

   在交互式提示中，根据需求选择功能（Router, Pinia, ESLint等）。项目创建完成后，进入目录并安装依赖。

   cd red-tourism-frontend npm install

2. 安装核心依赖：安装UI库、HTTP客户端等。

   npm install element-plus axios npm install --save-dev sass # 如果使用SCSS

3. 配置Element Plus和Axios：
   • 在main.js或main.ts中全局引入Element Plus。

     import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(router) app.use(ElementPlus) app.mount('#app')

   • 创建src/utils/request.js文件，封装Axios实例，统一处理请求拦截（如添加Token）、响应拦截和错误处理。

     import axios from 'axios' import { ElMessage } from 'element-plus' import router from '@/router' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 从环境变量读取后端API地址 timeout: 10000 }) // 请求拦截器 service.interceptors.request.use( config => { // 从localStorage或Pinia store中获取token const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = 'Bearer ' + token } return config }, error => { return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { const res = response.data // 假设后端统一返回格式为 { code: 200, data: {}, message: 'success' } if (res.code !== 200) { ElMessage.error(res.message || 'Error') // 如果是401未授权，跳转到登录页 if (res.code === 401) { router.push('/login') } return Promise.reject(new Error(res.message || 'Error')) } else { return res } }, error => { ElMessage.error(error.message || 'Request Error') return Promise.reject(error) } ) export default service

4. 配置环境变量：在项目根目录创建.env.development和.env.production文件，分别配置开发和生产环境的后端API地址。

   # .env.development VUE_APP_BASE_API = http://localhost:8080/api

   # .env.production VUE_APP_BASE_API = /api # 生产环境使用相对路径或配置Nginx代理

3. 数据库设计与核心业务模块实现

红色革命老区旅游系统的核心是数据。一个设计良好的数据库是系统稳定运行的基础。

3.1 数据库表结构设计

根据旅游系统的常见功能，我们设计以下几张核心表：

建表示例 (MySQL):

CREATE TABLE `scenic_spot` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键', `name` varchar(100) NOT NULL COMMENT '景点名称', `description` text COMMENT '景点详细介绍', `location` varchar(255) COMMENT '具体地址', `image_url` varchar(500) COMMENT '封面图片URL', `open_time` varchar(100) COMMENT '开放时间', `ticket_price` decimal(10,2) DEFAULT '0.00' COMMENT '门票价格', `status` tinyint DEFAULT '1' COMMENT '状态：0-关闭，1-开放', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='景点信息表';

3.2 后端核心模块：景点管理

我们以“景点管理”模块为例，展示后端CRUD接口的实现。

1. 创建实体类 (Entity)：对应scenic_spot表。

   package com.redtourism.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.math.BigDecimal; import java.util.Date; @Data @TableName("scenic_spot") public class ScenicSpot { @TableId(type = IdType.AUTO) private Long id; private String name; private String description; private String location; private String imageUrl; private String openTime; private BigDecimal ticketPrice; private Integer status; private Date createTime; private Date updateTime; }

2. 创建Mapper接口：继承MyBatis-Plus的BaseMapper，无需编写XML即可获得基础CRUD方法。

   package com.redtourism.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.redtourism.entity.ScenicSpot; import org.apache.ibatis.annotations.Mapper; @Mapper public interface ScenicSpotMapper extends BaseMapper<ScenicSpot> { // 可以在此定义自定义的复杂SQL方法 }

3. 创建Service层：定义业务接口及其实现。

   // Service接口 package com.redtourism.service; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.redtourism.entity.ScenicSpot; import com.baomidou.mybatisplus.extension.service.IService; public interface ScenicSpotService extends IService<ScenicSpot> { Page<ScenicSpot> findPage(Page<ScenicSpot> page, String name); } // Service实现类 package com.redtourism.service.impl; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.redtourism.entity.ScenicSpot; import com.redtourism.mapper.ScenicSpotMapper; import com.redtourism.service.ScenicSpotService; import org.springframework.stereotype.Service; import org.springframework.util.StringUtils; @Service public class ScenicSpotServiceImpl extends ServiceImpl<ScenicSpotMapper, ScenicSpot> implements ScenicSpotService { @Override public Page<ScenicSpot> findPage(Page<ScenicSpot> page, String name) { LambdaQueryWrapper<ScenicSpot> queryWrapper = new LambdaQueryWrapper<>(); // 如果查询参数name不为空，则进行模糊查询 if (StringUtils.hasText(name)) { queryWrapper.like(ScenicSpot::getName, name); } // 按创建时间倒序排列 queryWrapper.orderByDesc(ScenicSpot::getCreateTime); return baseMapper.selectPage(page, queryWrapper); } }

4. 创建Controller层：提供RESTful API。

   package com.redtourism.controller; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.redtourism.common.Result; import com.redtourism.entity.ScenicSpot; import com.redtourism.service.ScenicSpotService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping("/scenic-spot") public class ScenicSpotController { @Autowired private ScenicSpotService scenicSpotService; // 新增或修改 @PostMapping public Result save(@RequestBody ScenicSpot scenicSpot) { boolean success = scenicSpotService.saveOrUpdate(scenicSpot); return success ? Result.success() : Result.error(); } // 根据ID删除 @DeleteMapping("/{id}") public Result delete(@PathVariable Long id) { boolean success = scenicSpotService.removeById(id); return success ? Result.success() : Result.error(); } // 批量删除 @PostMapping("/del/batch") public Result deleteBatch(@RequestBody List<Long> ids) { boolean success = scenicSpotService.removeByIds(ids); return success ? Result.success() : Result.error(); } // 查询所有 @GetMapping public Result findAll() { List<ScenicSpot> list = scenicSpotService.list(); return Result.success(list); } // 根据ID查询 @GetMapping("/{id}") public Result findOne(@PathVariable Long id) { ScenicSpot spot = scenicSpotService.getById(id); return Result.success(spot); } // 分页查询 @GetMapping("/page") public Result findPage(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(defaultValue = "") String name) { Page<ScenicSpot> page = new Page<>(pageNum, pageSize); Page<ScenicSpot> pageResult = scenicSpotService.findPage(page, name); return Result.success(pageResult); } }

   其中，Result是一个自定义的统一响应体类，用于规范API返回格式。

   package com.redtourism.common; import lombok.Data; @Data public class Result { private Integer code; private String message; private Object data; private static final int SUCCESS_CODE = 200; private static final int ERROR_CODE = 500; public static Result success() { return success(null); } public static Result success(Object data) { Result r = new Result(); r.setCode(SUCCESS_CODE); r.setMessage("操作成功"); r.setData(data); return r; } public static Result error(String msg) { Result r = new Result(); r.setCode(ERROR_CODE); r.setMessage(msg); return r; } public static Result error() { return error("系统错误"); } }

3.3 前端核心页面：景点列表与分页

前端使用Vue 3 + Element Plus + Axios来调用后端的API并展示数据。

1. 创建景点列表页面组件：src/views/scenic/SpotList.vue

   <template> <div class="spot-container"> <el-card> <!-- 搜索和新增按钮 --> <div style="margin-bottom: 20px;"> <el-input v-model="searchName" placeholder="请输入景点名称" style="width: 200px;" @keyup.enter="load" /> <el-button type="primary" @click="load" style="margin-left: 10px;">搜索</el-button> <el-button type="success" @click="handleAdd" style="margin-left: 10px;">新增</el-button> </div> <!-- 数据表格 --> <el-table :data="tableData" border stripe> <el-table-column prop="id" label="ID" width="80"></el-table-column> <el-table-column prop="name" label="景点名称"></el-table-column> <el-table-column prop="location" label="地址"></el-table-column> <el-table-column prop="ticketPrice" label="门票价格(元)" width="120"></el-table-column> <el-table-column prop="status" label="状态" width="100"> <template #default="scope"> <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'"> {{ scope.row.status === 1 ? '开放' : '关闭' }} </el-tag> </template> </el-table-column> <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column> <el-table-column label="操作" width="200" fixed="right"> <template #default="scope"> <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页组件 --> <div style="margin-top: 20px;"> <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </el-card> <!-- 新增/编辑对话框 --> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="40%"> <el-form :model="form" label-width="80px"> <el-form-item label="景点名称"> <el-input v-model="form.name" autocomplete="off" /> </el-form-item> <el-form-item label="地址"> <el-input v-model="form.location" autocomplete="off" /> </el-form-item> <el-form-item label="门票价格"> <el-input-number v-model="form.ticketPrice" :min="0" :precision="2" /> </el-form-item> <el-form-item label="状态"> <el-radio-group v-model="form.status"> <el-radio :label="1">开放</el-radio> <el-radio :label="0">关闭</el-radio> </el-radio-group> </el-form-item> <el-form-item label="详细介绍"> <el-input v-model="form.description" type="textarea" :rows="4" /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="save">确认</el-button> </span> </template> </el-dialog> </div> </template> <script setup> import { ref, onMounted, reactive } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import request from '@/utils/request' // 导入封装好的axios实例 // 响应式数据 const searchName = ref('') const tableData = ref([]) const total = ref(0) const pageNum = ref(1) const pageSize = ref(10) const dialogVisible = ref(false) const dialogTitle = ref('') const form = reactive({ id: null, name: '', location: '', ticketPrice: 0, status: 1, description: '' }) // 加载数据 const load = () => { request.get('/scenic-spot/page', { params: { pageNum: pageNum.value, pageSize: pageSize.value, name: searchName.value } }).then(res => { tableData.value = res.data.records total.value = res.data.total }).catch(error => { console.error('加载数据失败:', error) }) } // 处理分页 const handleSizeChange = (val) => { pageSize.value = val load() } const handleCurrentChange = (val) => { pageNum.value = val load() } // 处理新增 const handleAdd = () => { dialogTitle.value = '新增景点' Object.keys(form).forEach(key => { if (key === 'status') { form[key] = 1 } else if (key === 'ticketPrice') { form[key] = 0 } else { form[key] = '' } }) dialogVisible.value = true } // 处理编辑 const handleEdit = (row) => { dialogTitle.value = '编辑景点' Object.assign(form, row) // 将行数据复制到表单 dialogVisible.value = true } // 保存数据（新增或更新） const save = () => { request.post('/scenic-spot', form).then(res => { if (res.code === 200) { ElMessage.success('保存成功') dialogVisible.value = false load() // 重新加载列表 } else { ElMessage.error(res.message) } }) } // 处理删除 const handleDelete = (id) => { ElMessageBox.confirm('确认删除该景点吗？', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => { request.delete(`/scenic-spot/${id}`).then(res => { if (res.code === 200) { ElMessage.success('删除成功') load() } else { ElMessage.error(res.message) } }) }).catch(() => {}) } // 组件挂载时加载数据 onMounted(() => { load() }) </script> <style scoped> .spot-container { padding: 20px; } </style>

2. 配置路由：在src/router/index.js中配置该页面的路由。

   import { createRouter, createWebHistory } from 'vue-router' import SpotList from '@/views/scenic/SpotList.vue' const routes = [ // ... 其他路由 { path: '/scenic/list', name: 'ScenicList', component: SpotList } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router

4. 前后端联调与跨域问题解决

当前端和后端分别运行在不同的端口（如Vue运行在http://localhost:5173，SpringBoot运行在http://localhost:8080）时，浏览器会因同源策略而阻止前端请求后端API，这就是跨域问题。

4.1 后端解决跨域（CORS）

在SpringBoot后端项目中，创建一个配置类来全局允许跨域请求。

package com.redtourism.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有接口生效 .allowedOriginPatterns("*") // 允许所有来源，生产环境应指定具体域名 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } }

生产环境注意：allowedOriginPatterns("*")在开发环境很方便，但在生产环境是极不安全的。必须将其替换为具体的前端域名，例如.allowedOriginPatterns("https://yourdomain.com")。

4.2 前端代理配置（开发环境）

在Vite项目中，可以通过配置vite.config.js来设置开发服务器代理，将API请求转发到后端，从而避免跨域。

// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { port: 5173, // 前端开发服务器端口 proxy: { '/api': { // 代理所有以 /api 开头的请求 target: 'http://localhost:8080', // 后端地址 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉 /api 前缀 } } } })

配置后，前端代码中请求/api/scenic-spot/page会被Vite开发服务器代理到http://localhost:8080/scenic-spot/page。

4.3 联调验证

1. 启动后端：在IDEA中运行SpringBoot主类，控制台输出Tomcat started on port(s): 8080表示成功。
2. 启动前端：在终端进入前端项目目录，运行npm run dev，控制台会输出本地访问地址（如http://localhost:5173）。
3. 访问页面：在浏览器打开http://localhost:5173，并导航到景点列表页面 (/scenic/list)。
4. 测试功能：尝试点击“搜索”、“新增”、“编辑”、“删除”、“分页”等按钮，观察浏览器开发者工具（F12）的“网络(Network)”标签页，查看请求和响应是否正常，数据是否能在页面正确显示和更新。

5. 常见问题排查与解决方案

在开发过程中，你几乎一定会遇到以下问题。提前了解它们的现象和解决方法，能节省大量排查时间。

分页插件配置示例：

package com.redtourism.config; import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; @Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); // 添加分页插件 interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }

6. 项目扩展与生产环境考量

完成基础CRUD和前后端联调只是第一步。一个完整的毕业设计，还需要考虑更多增强功能和工程化实践。

6.1 系统功能扩展建议

1. 用户认证与授权：集成Spring Security或使用JWT实现用户登录、注册、权限控制（如普通用户和管理员）。
2. 文件上传：实现景点图片上传功能，可以使用本地存储或集成OSS（对象存储服务）。
3. 订单与支付模拟：完善订单流程，集成支付宝/微信支付沙箱环境进行模拟支付。
4. 地图集成：使用高德地图或百度地图API，在景点详情页展示地理位置。
5. 数据可视化：使用ECharts展示旅游数据统计，如各景点访问量、订单趋势图。
6. 后台管理系统：为管理员提供一个独立的、功能更全面的后台管理界面。
7. 搜索与推荐：引入Elasticsearch实现景点全文搜索，或实现简单的基于内容的推荐算法。

6.2 生产环境部署准备

毕业设计答辩时，如果能展示一个在线可访问的系统，会是很大的加分项。部署到云服务器需要以下步骤：

1. 后端打包：使用Maven命令mvn clean package -DskipTests生成可执行的JAR文件（位于target目录）。
2. 前端打包：运行npm run build，生成静态文件（位于dist目录）。
3. 服务器环境：购买一台云服务器（如阿里云ECS），安装JDK 8/11、MySQL、Nginx。
4. 数据库迁移：将本地的数据库结构和数据导出为SQL脚本，在服务器MySQL中执行。
5. 部署后端：将JAR文件上传至服务器，使用nohup java -jar your-app.jar &命令在后台运行。更推荐使用systemd或Docker容器来管理进程。
6. 部署前端：将dist目录下的所有文件上传到服务器，并配置Nginx作为Web服务器和反向代理。

   # Nginx 配置示例 (部分) server { listen 80; server_name your-domain.com; # 你的域名或服务器IP # 前端静态文件 location / { root /path/to/your/frontend/dist; index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 反向代理后端API location /api/ { proxy_pass http://localhost:8080/; # 转发到后端SpringBoot应用 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

7. 域名与HTTPS：为服务器绑定域名，并使用Let‘s Encrypt等工具为网站配置免费的SSL证书，启用HTTPS。

6.3 毕业设计文档与答辩要点

除了代码，一份清晰的文档和流畅的答辩同样重要。

• 系统设计文档：应包含需求分析、系统架构图（前后端分离）、数据库ER图、核心功能流程图、API接口文档（可使用Swagger集成）。
• 部署文档：记录本地开发环境搭建步骤和服务器部署步骤。
• 答辩演示：
  • 演示主线要清晰：从用户视角演示核心业务流程，如：注册登录 -> 浏览景点 -> 查看详情 -> 加入线路 -> 下单。
  • 突出技术亮点：重点讲解你如何解决一两个技术难点，如JWT认证的实现、文件上传的处理、复杂查询的优化等。
  • 准备问答：思考老师可能问的问题，如“为什么选这个技术栈？”、“数据库表是如何设计的？”、“系统有什么可以优化的地方？”。

从环境搭建到功能实现，再到问题排查和部署上线，每一步都蕴含着对软件工程能力的锻炼。这个红色革命老区旅游系统项目，不仅是一个毕业设计的成果，更是一次完整的全栈开发实践。在实现过程中，多思考、多记录、多总结，把遇到的问题和解决方案都整理下来，这本身就是一份宝贵的学习财富。