1. 项目概述：旅游分享点评网系统的技术架构与核心价值
这个基于SpringBoot+Vue的旅游分享点评系统，本质上是一个融合了UGC（用户生成内容）与社交属性的垂直领域平台。我在2019年参与过类似项目的全栈开发，当时这个技术组合刚形成稳定生态，如今已成为企业级应用开发的事实标准。
系统采用经典的前后端分离架构：SpringBoot处理后端业务逻辑和RESTful API，Vue.js构建动态前端界面。这种组合的优势在于，SpringBoot的约定优于配置理念大幅减少了XML配置，而Vue的响应式数据绑定让前端交互开发效率提升至少40%。具体到旅游点评场景，系统需要处理的核心业务流包括：用户生成内容（游记/点评）的CRUD、地理位置服务集成、多维度内容排序算法、以及社交互动功能（点赞/收藏/关注）。
关键提示：旅游类UGC平台要特别注意内容审核机制，我们曾因用户上传违规图片导致APP下架，后来接入了第三方内容安全API才解决问题。
2. 技术栈深度解析与选型依据
2.1 后端技术栈设计
SpringBoot 2.7.x版本是我们的基准选择，相较于传统SSM架构，它带来了三个显著优势：
- 内嵌Tomcat容器简化部署，通过
spring-boot-starter-web依赖即可获得完整Web支持 - 自动配置机制让数据库连接池（如HikariCP）、缓存（Redis）、安全框架（Spring Security）的集成变得极其简单
- Actuator端点提供系统监控能力，这对后期运维至关重要
数据库方面，MySQL 8.0作为主库存储结构化数据，其JSON类型字段非常适合存储动态扩展的景点属性。MongoDB则用于存储用户生成的富文本内容，例如：
java复制// 游记文档结构示例
{
"_id": ObjectId("..."),
"authorId": 1024,
"title": "三日游西湖攻略",
"content": "...", // Markdown格式文本
"photos": ["url1", "url2"],
"location": {
"type": "Point",
"coordinates": [120.12, 30.16]
},
"tags": ["杭州", "人文", "美食"]
}
2.2 前端技术方案
Vue 3的组合式API让复杂交互组件的开发更高效。核心模块包括：
- 基于Vue Router的页面导航系统
- Pinia状态管理处理全局数据（如用户登录状态）
- Element Plus组件库构建UI界面
- Axios封装API请求，关键配置如下：
javascript复制// api.js
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000,
withCredentials: true
})
// 请求拦截器
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + getToken()
}
return config
})
3. 核心功能模块实现细节
3.1 用户系统设计与安全控制
采用RBAC（基于角色的访问控制）模型，通过Spring Security实现权限管理。密码存储使用BCrypt算法：
java复制@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder(12);
}
JWT令牌实现无状态认证，关键配置包括：
- 令牌有效期设置为2小时
- 刷新令牌有效期7天
- 黑名单机制处理主动注销
踩坑记录：初期未做接口防刷，导致短信接口被恶意调用。后来通过Redis实现手机号+IP的限流（1分钟5次）解决问题。
3.2 内容发布与展示系统
富文本编辑采用Quill.js，后端使用JSoup进行XSS过滤：
java复制String safeHtml = Jsoup.clean(rawHtml,
Whitelist.relaxed()
.addTags("iframe")
.addAttributes("iframe", "src", "width", "height"));
景点数据聚合展示的典型SQL示例：
sql复制SELECT
a.*,
AVG(r.rating) AS avg_rating,
COUNT(DISTINCT r.id) AS review_count
FROM attractions a
LEFT JOIN reviews r ON a.id = r.attraction_id
GROUP BY a.id
ORDER BY
CASE WHEN :sort = 'hot' THEN review_count
WHEN :sort = 'rating' THEN avg_rating
ELSE a.create_time END DESC
LIMIT :size OFFSET :offset
3.3 智能推荐算法实现
混合推荐策略包含：
- 基于位置的推荐（5公里内热门景点）
- 协同过滤（相似用户的偏好）
- 热门内容（近期点赞数加权计算）
Redis的ZSET数据结构非常适合实现实时排行榜：
java复制// 更新景点热度
redisTemplate.opsForZSet().incrementScore(
"attraction:hot",
attractionId,
like ? 1 : -1
);
// 获取TOP10
Set<Object> tops = redisTemplate.opsForZSet()
.reverseRange("attraction:hot", 0, 9);
4. 性能优化关键实践
4.1 缓存策略设计
采用多级缓存架构：
- 本地Caffeine缓存高频访问的用户基础信息（TTL=5分钟）
- Redis缓存热门景点数据（TTL=1小时）
- MySQL查询缓存特定场景结果
缓存击穿防护方案：
java复制public Attraction getAttractionWithCache(Long id) {
String key = "attraction:" + id;
Attraction value = redisTemplate.opsForValue().get(key);
if (value != null) return value;
synchronized (this) {
value = redisTemplate.opsForValue().get(key);
if (value == null) {
value = attractionMapper.selectById(id);
redisTemplate.opsForValue().set(key, value, 1, HOURS);
}
}
return value;
}
4.2 前端性能优化手段
- 图片懒加载：使用Intersection Observer API
- 路由懒加载：
component: () => import('./views/Attraction.vue') - Webpack分包优化：
javascript复制// vue.config.js
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
maxSize: 244 * 1024 // 244KB
}
}
}
5. 典型问题排查实录
5.1 跨域问题解决方案
开发环境配置代理：
javascript复制// vue.config.js
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
生产环境使用Nginx反向代理：
nginx复制location /api {
proxy_pass http://backend;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
5.2 大文件上传优化
前端采用分片上传：
javascript复制const chunkSize = 2 * 1024 * 1024; // 2MB
const chunks = Math.ceil(file.size / chunkSize);
for (let i = 0; i < chunks; i++) {
const chunk = file.slice(i * chunkSize, (i+1)*chunkSize);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('chunkNumber', i);
formData.append('totalChunks', chunks);
await axios.post('/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
}
后端使用MD5校验文件完整性：
java复制// 检查分片是否存在
if (!Files.exists(Paths.get(uploadPath, chunkHash))) {
file.transferTo(new File(uploadPath, chunkHash));
}
// 合并分片
try (FileOutputStream fos = new FileOutputStream(finalFile)) {
for (int i = 0; i < totalChunks; i++) {
Path chunk = Paths.get(uploadPath, chunkHash + "." + i);
Files.copy(chunk, fos);
Files.delete(chunk);
}
}
6. 部署与监控方案
6.1 容器化部署实践
Docker Compose编排示例：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- mysql_data:/var/lib/mysql
redis:
image: redis:6-alpine
ports:
- "6379:6379"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
frontend:
build: ./frontend
ports:
- "80:80"
6.2 监控指标采集
SpringBoot Actuator配置：
properties复制management.endpoints.web.exposure.include=*
management.metrics.export.prometheus.enabled=true
Prometheus监控指标示例：
code复制http_server_requests_seconds_count{uri="/api/attractions",status="200"} 1423
system_cpu_usage{host="prod-01"} 0.68
jvm_memory_used_bytes{area="heap",id="PS Survivor Space"} 2.4e+07
这个项目最让我印象深刻的是内容审核模块的演进过程。最初我们使用简单的关键词过滤，后来升级为基于机器学习的图像识别+文本分析组合方案。技术选型上，Vue的渐进式特性让我们能逐步重构旧模块，而SpringBoot的自动配置则大幅降低了微服务拆分的成本。如果重做这个项目，我会更早引入Elasticsearch优化搜索体验，并在CDN配置上投入更多精力