1. 项目概述甘肃旅游服务平台管理系统是一个基于SpringBootVue技术栈开发的现代化旅游信息管理平台。这个系统主要面向甘肃地区的旅游管理部门、景区运营方和旅行社提供一站式的旅游资源管理、游客服务、数据分析等功能。我在实际开发过程中发现这类区域性旅游平台有几个核心痛点旅游资源分散、数据更新不及时、多终端适配困难。这套系统通过前后端分离架构很好地解决了这些问题。前端采用Vue.js实现响应式设计后端基于SpringBoot提供RESTful API数据层使用MyBatisMySQL组合整体架构既保证了开发效率又确保了系统性能。提示选择SpringBootVue技术栈时建议优先考虑团队的技术储备。如果团队更熟悉React也可以考虑替换前端框架但需要评估改造成本。2. 技术架构解析2.1 后端技术选型SpringBoot 2.7.x作为后端框架主要考虑了以下几个因素快速启动特性通过内嵌Tomcat和自动配置大大简化了部署流程丰富的starter依赖轻松集成MyBatis、Redis等常用组件Actuator监控端点方便后期运维监控数据库选用MySQL 8.0主要优势在于对JSON数据类型的良好支持适合存储旅游景点的结构化数据完善的GIS空间数据处理能力便于实现景点地理位置查询成熟的社区生态遇到问题容易找到解决方案2.2 前端技术方案Vue 3.x作为前端框架配合以下技术栈Vue Router管理路由Pinia状态管理Element Plus UI组件库Axios处理HTTP请求这种组合的优势在于组合式API使代码更易维护更好的TypeScript支持更小的打包体积3. 核心功能实现3.1 旅游资源管理模块// 景点信息管理Controller示例 RestController RequestMapping(/api/scenic-spots) public class ScenicSpotController { Autowired private ScenicSpotService spotService; GetMapping public ResponseEntityPageResultScenicSpot listSpots( RequestParam(required false) String keyword, RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { return ResponseEntity.ok(spotService.listSpots(keyword, page, size)); } PostMapping public ResponseEntityVoid addSpot(Valid RequestBody ScenicSpotDTO dto) { spotService.addSpot(dto); return ResponseEntity.created(URI.create(/api/scenic-spots)).build(); } }3.2 游客服务模块前端使用Vue实现景点搜索功能// 景点搜索组件 export default { setup() { const searchParams reactive({ keyword: , region: , category: }) const spots ref([]) const loading ref(false) const searchSpots async () { loading.value true try { const res await axios.get(/api/scenic-spots, { params: searchParams }) spots.value res.data } finally { loading.value false } } return { searchParams, spots, loading, searchSpots } } }4. 数据库设计要点4.1 核心表结构表名主要字段说明scenic_spotid, name, description, location, images, open_time, ticket_info景点基本信息tour_routeid, name, spots, duration, price旅游路线userid, username, password, phone, avatar用户信息orderid, user_id, route_id, status, create_time订单信息4.2 MyBatis动态SQL应用!-- 动态条件查询景点 -- select idselectSpots resultTypeScenicSpot SELECT * FROM scenic_spot where if testkeyword ! null and keyword ! AND (name LIKE CONCAT(%,#{keyword},%) OR description LIKE CONCAT(%,#{keyword},%)) /if if testregion ! null AND region_id #{region} /if if testcategory ! null AND category_id #{category} /if /where ORDER BY create_time DESC /select5. 安全防护措施5.1 SQL注入防护严格使用MyBatis的参数绑定方式#{}避免使用${}进行字符串拼接对用户输入进行严格校验5.2 XSS防护前端使用vue-sanitize对富文本内容进行过滤import sanitizeHTML from sanitize-html // 在显示富文本内容时进行过滤 const cleanHTML sanitizeHTML(dirtyHTML, { allowedTags: [b, i, em, strong, a, p, br], allowedAttributes: { a: [href] } })6. 部署方案6.1 后端部署使用Docker部署SpringBoot应用FROM openjdk:11-jre ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT [java,-jar,/app.jar]6.2 前端部署Nginx配置示例server { listen 80; server_name tourism.gansu; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; } }7. 性能优化实践7.1 缓存策略使用Redis缓存热门景点数据Cacheable(value spots, key #id) public ScenicSpot getSpotById(Long id) { return spotMapper.selectById(id); }7.2 图片处理使用WebP格式减少图片体积实现懒加载提升页面性能CDN加速静态资源访问8. 常见问题排查8.1 MyBatis缓存问题当开启事务时一级缓存可能导致查询不到最新数据。解决方案Transactional public void updateSpot(ScenicSpot spot) { spotMapper.updateById(spot); // 清除当前会话的一级缓存 sqlSession.clearCache(); }8.2 Vue路由问题处理页面刷新404问题需要在Nginx中添加location / { try_files $uri $uri/ /index.html; }9. 项目扩展方向增加微信小程序端扩大用户覆盖面接入第三方支付平台完善订单系统实现智能推荐算法提升用户体验增加大数据分析模块为决策提供支持在实际开发中我发现区域旅游平台有几个关键点需要特别注意景点数据的准确性要及时维护多终端适配要提前规划高并发场景要考虑缓存策略安全防护要贯穿整个开发过程这套系统经过多次迭代目前已经稳定运行在甘肃多个景区。开发过程中积累的经验是前期做好技术选型评估中期注重代码规范后期重视性能优化和安全防护。