1. 项目概述：桂林旅游景点导游平台系统
这个前后端分离的桂林旅游景点导游平台系统，采用SpringBoot+Vue+MyBatis+MySQL技术栈实现，是一个典型的旅游信息化解决方案。系统主要面向游客提供桂林地区旅游景点的查询、导航、推荐等服务，同时为管理员提供景点信息管理功能。
我在实际开发中发现，这类旅游平台有几个关键需求点：
- 景点信息的可视化展示（地图、图片、视频）
- 个性化推荐算法实现
- 多终端适配（PC/移动端）
- 高并发访问处理能力
提示：选择SpringBoot+Vue前后端分离架构时，需要考虑API接口规范、跨域问题、权限控制等关键点
2. 技术选型解析
2.1 后端技术栈
SpringBoot 2.7.x 作为后端框架，主要考虑因素：
- 快速构建特性（starter依赖）
- 内嵌Tomcat服务器
- 完善的自动配置机制
- 与MyBatis的良好集成
核心依赖配置示例：
xml复制<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.28</version>
</dependency>
2.2 前端技术栈
Vue 3.x 作为前端框架优势：
- 组件化开发模式
- 响应式数据绑定
- 丰富的生态系统（Vue Router, Vuex, Axios）
- 与Element Plus等UI库完美配合
典型项目结构：
code复制src/
├── api/ # 接口定义
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── store/ # 状态管理
├── utils/ # 工具函数
└── views/ # 页面组件
3. 数据库设计与实现
3.1 MySQL数据库设计
核心表结构设计：
-
景点信息表(spot)
- id (主键)
- name (景点名称)
- location (地理位置)
- description (景点描述)
- image_url (图片链接)
- video_url (视频链接)
- rating (评分)
- ticket_price (门票价格)
-
用户表(user)
- id (主键)
- username (用户名)
- password (加密存储)
- phone (联系电话)
- role (角色：admin/user)
-
评论表(comment)
- id (主键)
- user_id (外键)
- spot_id (外键)
- content (评论内容)
- create_time (创建时间)
3.2 MyBatis映射配置
动态SQL示例（景点搜索）：
xml复制<select id="searchSpots" resultType="com.example.entity.Spot">
SELECT * FROM spot
<where>
<if test="name != null and name != ''">
AND name LIKE CONCAT('%',#{name},'%')
</if>
<if test="location != null and location != ''">
AND location LIKE CONCAT('%',#{location},'%')
</if>
<if test="minPrice != null">
AND ticket_price >= #{minPrice}
</if>
<if test="maxPrice != null">
AND ticket_price <= #{maxPrice}
</if>
</where>
ORDER BY rating DESC
</select>
4. 核心功能实现
4.1 景点展示模块
前端实现要点：
- 使用Element Plus的卡片组件展示景点
- 集成百度地图API实现位置展示
- 图片懒加载优化性能
关键Vue组件代码：
vue复制<template>
<el-card v-for="spot in spots" :key="spot.id">
<el-image :src="spot.image_url" lazy></el-image>
<h3>{{ spot.name }}</h3>
<p>{{ spot.description }}</p>
<baidu-map :center="spot.location"></baidu-map>
</el-card>
</template>
4.2 后台管理系统
SpringBoot实现管理员接口：
java复制@RestController
@RequestMapping("/admin")
@PreAuthorize("hasRole('ADMIN')")
public class AdminController {
@Autowired
private SpotService spotService;
@PostMapping("/spots")
public Result addSpot(@RequestBody Spot spot) {
return spotService.addSpot(spot);
}
@PutMapping("/spots/{id}")
public Result updateSpot(@PathVariable Long id, @RequestBody Spot spot) {
return spotService.updateSpot(id, spot);
}
}
5. 系统部署方案
5.1 后端部署
- 打包SpringBoot应用：
bash复制mvn clean package -DskipTests
- 服务器环境准备：
- JDK 1.8+
- MySQL 8.0+
- Redis（可选，用于缓存）
- 启动命令：
bash复制nohup java -jar tour-guide.jar --spring.profiles.active=prod > app.log 2>&1 &
5.2 前端部署
- 项目构建：
bash复制npm run build
- Nginx配置示例：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/dist;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
}
}
6. 开发中的常见问题与解决方案
6.1 跨域问题处理
SpringBoot解决方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.maxAge(3600);
}
}
6.2 性能优化技巧
- 数据库层面：
- 为常用查询字段添加索引
- 使用连接池（HikariCP）
- 合理设计分页查询
- 前端层面：
- 组件懒加载
- 路由懒加载
- 图片压缩与CDN加速
- 缓存策略：
java复制@Cacheable(value = "spots", key = "#id")
public Spot getSpotById(Long id) {
return spotMapper.selectById(id);
}
7. 项目扩展方向
- 移动端适配：
- 开发微信小程序版本
- 使用uni-app跨平台方案
- 智能推荐：
- 基于用户行为的协同过滤
- 基于内容的推荐算法
- 支付集成：
- 微信支付
- 支付宝支付
- 门票预订功能
- 社交功能：
- 用户互动评论
- 游记分享
- 景点打卡
在实际开发过程中，我发现以下几个关键点需要特别注意：
- 接口文档的规范管理（推荐使用Swagger）
- 前后端联调时的数据格式约定
- 生产环境与开发环境的配置隔离
- 日志系统的完善配置
对于初学者，建议先从基础功能模块入手，逐步扩展复杂功能。在开发景点搜索功能时，特别注意SQL注入防护，所有用户输入都应该进行参数化处理。