1. 项目概述与核心价值这个基于SpringBootVue的甘肃旅游服务平台管理系统是一个典型的全栈开发实战项目特别适合计算机相关专业学生用于毕业设计、课程设计或个人技术学习。系统采用前后端分离架构后端使用SpringBoot框架搭建RESTful API前端采用Vue.js实现动态交互界面数据库选用MySQL进行数据存储。我在实际开发这类旅游管理系统时发现它完美涵盖了企业级应用开发的典型技术栈后端SpringBoot MyBatis MySQL前端Vue ElementUI Axios辅助工具Maven/Gradle Redis(可选)提示选择甘肃作为案例地区很有代表性既包含丰富的旅游资源数据敦煌莫高窟、张掖丹霞等又不会因地域太广导致数据量过大特别适合教学演示。2. 技术架构深度解析2.1 后端技术选型SpringBoot 2.7.x版本是当前最稳定的选择避免直接用3.x可能存在的兼容性问题。我推荐的基础依赖包括dependencies !-- Web支持 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis整合 -- dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.2.2/version /dependency !-- MySQL驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency !-- 开发热部署 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId optionaltrue/optional /dependency /dependencies数据库设计建议采用以下核心表结构用户表(tb_user)id, username, password, phone, role景点表(tb_scenic)id, name, location, description, image_url订单表(tb_order)id, user_id, scenic_id, create_time, status评论表(tb_comment)id, user_id, scenic_id, content, star2.2 前端技术实现Vue 3.x Element Plus是目前最主流的技术组合。项目初始化建议使用Vitenpm create vitelatest gansu-tourism --template vue cd gansu-tourism npm install element-plus axios vue-router关键页面组件规划首页景点展示、搜索筛选、轮播图详情页景点介绍、图片画廊、预订表单用户中心订单管理、个人信息后台管理数据看板、内容CRUD3. 核心功能实现细节3.1 景点信息管理模块后端Controller示例带分页查询RestController RequestMapping(/api/scenic) public class ScenicController { Autowired private ScenicService scenicService; GetMapping(/list) public Result list( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { PageInfoScenic pageInfo scenicService.findPage(pageNum, pageSize, keyword); return Result.success(pageInfo); } }前端对接采用Axios封装// src/api/scenic.js import request from /utils/request export function getScenicList(params) { return request({ url: /api/scenic/list, method: get, params }) }3.2 用户认证与权限控制采用JWT实现无状态认证关键配置Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers(/api/user/login).permitAll() .antMatchers(/api/admin/**).hasRole(ADMIN) .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }前端路由守卫示例// src/router/index.js router.beforeEach((to, from, next) { if (to.meta.requiresAuth !store.getters.isLoggedIn) { next(/login) } else if (to.meta.requiresAdmin !store.getters.isAdmin) { next(/403) } else { next() } })4. 典型问题解决方案4.1 跨域问题处理SpringBoot后端解决方案推荐配置类方式Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .maxAge(3600); } }4.2 文件上传实现后端接收处理PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.error(请选择文件); } String fileName UUID.randomUUID() . StringUtils.getFilenameExtension(file.getOriginalFilename()); Path path Paths.get(upload/ fileName); try { Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING); return Result.success(/upload/ fileName); } catch (IOException e) { return Result.error(上传失败); } }前端ElementUI上传组件el-upload action/api/upload :on-successhandleSuccess :before-uploadbeforeUpload el-button typeprimary点击上传/el-button /el-upload5. 项目扩展建议5.1 数据可视化增强引入ECharts实现旅游数据统计// 安装依赖 npm install echarts vue-echarts // 在组件中使用 import { use } from echarts/core import { CanvasRenderer } from echarts/renderers import { PieChart } from echarts/charts import { TitleComponent, TooltipComponent } from echarts/components import VChart from vue-echarts use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent]) // 模板中 v-chart :optionchartOption styleheight: 400px/5.2 微信小程序端扩展建议采用uni-app跨平台方案// 页面逻辑基本与Vue一致 export default { data() { return { scenicList: [] } }, onLoad() { this.loadData() }, methods: { async loadData() { const res await uni.request({ url: https://your-api.com/api/scenic/list }) this.scenicList res.data } } }6. 开发心得与避坑指南数据库连接池配置 生产环境务必配置合理的连接池参数如HikariCPspring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5 connection-timeout: 30000 idle-timeout: 600000前端性能优化路由懒加载component: () import(./views/Scenic.vue)图片懒加载img v-lazyimageUrlAPI请求节流使用lodash的throttle函数部署注意事项前端打包npm run build生成的dist目录需要配置Nginx代理后端打包mvn package生成的jar包可通过java -jar运行数据库建议生产环境使用云数据库如阿里云RDS调试技巧后端使用Postman测试API开启SpringBoot的debugtrue前端安装Vue Devtools结合Chrome开发者工具调试这个项目我在实际教学中使用了3个学期发现学生们最容易出错的是Vue的响应式数据更新问题记得用this.$setMyBatis的XML映射文件路径配置跨域时的Cookie传递问题需要配置withCredentials: true建议开发时采用模块化推进先完成用户认证模块注册/登录实现基础CRUD功能景点管理开发业务功能订单/评论最后做数据统计和优化 SpringBoot+Vue旅游管理系统开发实战
1. 项目概述与核心价值这个基于SpringBootVue的甘肃旅游服务平台管理系统是一个典型的全栈开发实战项目特别适合计算机相关专业学生用于毕业设计、课程设计或个人技术学习。系统采用前后端分离架构后端使用SpringBoot框架搭建RESTful API前端采用Vue.js实现动态交互界面数据库选用MySQL进行数据存储。我在实际开发这类旅游管理系统时发现它完美涵盖了企业级应用开发的典型技术栈后端SpringBoot MyBatis MySQL前端Vue ElementUI Axios辅助工具Maven/Gradle Redis(可选)提示选择甘肃作为案例地区很有代表性既包含丰富的旅游资源数据敦煌莫高窟、张掖丹霞等又不会因地域太广导致数据量过大特别适合教学演示。2. 技术架构深度解析2.1 后端技术选型SpringBoot 2.7.x版本是当前最稳定的选择避免直接用3.x可能存在的兼容性问题。我推荐的基础依赖包括dependencies !-- Web支持 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis整合 -- dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.2.2/version /dependency !-- MySQL驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency !-- 开发热部署 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId optionaltrue/optional /dependency /dependencies数据库设计建议采用以下核心表结构用户表(tb_user)id, username, password, phone, role景点表(tb_scenic)id, name, location, description, image_url订单表(tb_order)id, user_id, scenic_id, create_time, status评论表(tb_comment)id, user_id, scenic_id, content, star2.2 前端技术实现Vue 3.x Element Plus是目前最主流的技术组合。项目初始化建议使用Vitenpm create vitelatest gansu-tourism --template vue cd gansu-tourism npm install element-plus axios vue-router关键页面组件规划首页景点展示、搜索筛选、轮播图详情页景点介绍、图片画廊、预订表单用户中心订单管理、个人信息后台管理数据看板、内容CRUD3. 核心功能实现细节3.1 景点信息管理模块后端Controller示例带分页查询RestController RequestMapping(/api/scenic) public class ScenicController { Autowired private ScenicService scenicService; GetMapping(/list) public Result list( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { PageInfoScenic pageInfo scenicService.findPage(pageNum, pageSize, keyword); return Result.success(pageInfo); } }前端对接采用Axios封装// src/api/scenic.js import request from /utils/request export function getScenicList(params) { return request({ url: /api/scenic/list, method: get, params }) }3.2 用户认证与权限控制采用JWT实现无状态认证关键配置Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers(/api/user/login).permitAll() .antMatchers(/api/admin/**).hasRole(ADMIN) .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }前端路由守卫示例// src/router/index.js router.beforeEach((to, from, next) { if (to.meta.requiresAuth !store.getters.isLoggedIn) { next(/login) } else if (to.meta.requiresAdmin !store.getters.isAdmin) { next(/403) } else { next() } })4. 典型问题解决方案4.1 跨域问题处理SpringBoot后端解决方案推荐配置类方式Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .maxAge(3600); } }4.2 文件上传实现后端接收处理PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.error(请选择文件); } String fileName UUID.randomUUID() . StringUtils.getFilenameExtension(file.getOriginalFilename()); Path path Paths.get(upload/ fileName); try { Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING); return Result.success(/upload/ fileName); } catch (IOException e) { return Result.error(上传失败); } }前端ElementUI上传组件el-upload action/api/upload :on-successhandleSuccess :before-uploadbeforeUpload el-button typeprimary点击上传/el-button /el-upload5. 项目扩展建议5.1 数据可视化增强引入ECharts实现旅游数据统计// 安装依赖 npm install echarts vue-echarts // 在组件中使用 import { use } from echarts/core import { CanvasRenderer } from echarts/renderers import { PieChart } from echarts/charts import { TitleComponent, TooltipComponent } from echarts/components import VChart from vue-echarts use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent]) // 模板中 v-chart :optionchartOption styleheight: 400px/5.2 微信小程序端扩展建议采用uni-app跨平台方案// 页面逻辑基本与Vue一致 export default { data() { return { scenicList: [] } }, onLoad() { this.loadData() }, methods: { async loadData() { const res await uni.request({ url: https://your-api.com/api/scenic/list }) this.scenicList res.data } } }6. 开发心得与避坑指南数据库连接池配置 生产环境务必配置合理的连接池参数如HikariCPspring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5 connection-timeout: 30000 idle-timeout: 600000前端性能优化路由懒加载component: () import(./views/Scenic.vue)图片懒加载img v-lazyimageUrlAPI请求节流使用lodash的throttle函数部署注意事项前端打包npm run build生成的dist目录需要配置Nginx代理后端打包mvn package生成的jar包可通过java -jar运行数据库建议生产环境使用云数据库如阿里云RDS调试技巧后端使用Postman测试API开启SpringBoot的debugtrue前端安装Vue Devtools结合Chrome开发者工具调试这个项目我在实际教学中使用了3个学期发现学生们最容易出错的是Vue的响应式数据更新问题记得用this.$setMyBatis的XML映射文件路径配置跨域时的Cookie传递问题需要配置withCredentials: true建议开发时采用模块化推进先完成用户认证模块注册/登录实现基础CRUD功能景点管理开发业务功能订单/评论最后做数据统计和优化