1. 项目概述：基于SSM+Vue的旅游推荐平台开发实录
去年接手了一个旅游行业数字化升级项目，客户要求打造一个能同时满足景点推荐和酒店预订需求的综合性平台。经过技术选型，最终确定采用SSM（Spring+SpringMVC+MyBatis）作为后端框架，配合Vue.js前端技术栈，实现了前后端分离的现代化架构。这个技术组合在保证系统稳定性的同时，大幅提升了开发效率和用户体验。
这个项目最让我印象深刻的是如何通过Vue的响应式特性解决动态数据展示的难题。传统旅游网站每次筛选条件变化都要整页刷新，而我们的方案只需要局部更新组件，等待时间从平均3秒降低到300毫秒以内。下面我就从技术实现角度，详细拆解这个项目的关键设计点和实战经验。
2. 技术架构设计与选型考量
2.1 后端技术栈深度解析
选择SSM框架组合经过了严格的技术论证。Spring的IoC容器让我们能灵活管理各类服务组件，比如景点推荐算法就有三种实现版本（基于热度、基于用户画像、混合模式），通过@Qualifier注解即可动态切换。SpringMVC的@RestController注解配合Jackson库，自动将Java对象序列化为JSON，减少了80%的样板代码。
MyBatis的XML映射文件配置是个技术活。我们为景点表设计了多表联查的resultMap，一个典型的例子：
xml复制<resultMap id="scenicDetailMap" type="com.tourism.model.ScenicVO">
<id property="id" column="scenic_id"/>
<result property="name" column="scenic_name"/>
<collection property="hotels" ofType="com.tourism.model.Hotel">
<id property="id" column="hotel_id"/>
<result property="name" column="hotel_name"/>
</collection>
</resultMap>
关键经验：MyBatis的延迟加载一定要在开发初期就配置好，否则N+1查询问题会导致性能灾难。我们的解决方案是在application.yml中添加：
yaml复制mybatis: configuration: lazy-loading-enabled: true aggressive-lazy-loading: false
2.2 前端架构演进过程
Vue 3的组合式API让我们能更好地组织代码逻辑。比如酒店筛选模块，我们把所有过滤逻辑封装成useHotelFilter组合函数：
javascript复制export default function useHotelFilter() {
const state = reactive({
priceRange: [0, 2000],
facilities: []
});
const filterHotels = (hotels) => {
return hotels.filter(hotel =>
hotel.price >= state.priceRange[0] &&
hotel.price <= state.priceRange[1] &&
state.facilities.every(fac => hotel.facilities.includes(fac))
);
};
return { state, filterHotels };
}
路由管理采用Vue Router的懒加载技术，配合Webpack的代码分割，使首屏加载时间优化了40%：
javascript复制const routes = [
{
path: '/scenic/:id',
component: () => import('./views/ScenicDetail.vue'),
props: true
}
];
3. 核心功能实现细节
3.1 智能景点推荐系统
推荐算法采用混合策略模式，根据用户行为动态调整权重。核心计算类图如下（伪代码表示）：
java复制public interface RecommendationStrategy {
List<Scenic> recommend(Long userId);
}
@Service
@Primary
public class HybridRecommendation implements RecommendationStrategy {
@Autowired
private HeatBasedRecommendation heatBased;
@Autowired
private UserBasedRecommendation userBased;
public List<Scenic> recommend(Long userId) {
List<Scenic> result = new ArrayList<>();
if(userId != null) {
result.addAll(userBased.recommend(userId));
}
result.addAll(heatBased.recommend(userId));
return result.stream().distinct().collect(Collectors.toList());
}
}
前端通过Axios拦截器实现推荐请求的自动重试机制：
javascript复制axios.interceptors.response.use(null, error => {
if(error.config && error.response?.status === 502) {
return new Promise(resolve => {
setTimeout(() => resolve(axios(error.config)), 1000);
});
}
return Promise.reject(error);
});
3.2 酒店实时预订系统
库存控制采用乐观锁机制，防止超卖：
java复制@Update("UPDATE hotel_room SET stock = stock - 1 WHERE id = #{roomId} AND stock > 0")
int deductStock(@Param("roomId") Long roomId);
前端使用WebSocket实现房态实时更新：
javascript复制const socket = new WebSocket(`wss://api.example.com/rooms/${roomId}/status`);
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
roomStore.updateStatus(data);
};
4. 性能优化实战记录
4.1 数据库优化方案
针对景点模糊查询的慢SQL问题（最初需要800ms），我们通过以下措施优化到120ms：
- 添加全文索引：
ALTER TABLE scenic ADD FULLTEXT INDEX ft_idx(name, description) - 使用Elasticsearch构建二级索引
- 查询改写为：
SELECT * FROM scenic WHERE MATCH(name,description) AGAINST('长城' IN BOOLEAN MODE)
4.2 前端性能提升技巧
通过Chrome Performance工具分析发现图片加载是性能瓶颈，采取以下措施：
- 使用Intersection Observer实现懒加载
javascript复制const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('.lazy-img').forEach(img => observer.observe(img));
- 配置Webpack的image-webpack-loader自动压缩图片
- 使用CDN分发静态资源
5. 典型问题排查手册
5.1 跨域问题解决方案
开发阶段遇到最频繁的就是跨域问题。我们的解决方案是：
- 后端配置CORS过滤器
java复制@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOriginPattern("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
- 前端开发环境配置代理
javascript复制// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}
5.2 内存泄漏排查案例
上线后发现Node.js服务内存持续增长，通过以下步骤定位问题：
- 使用Chrome DevTools的Memory面板创建堆快照
- 对比快照发现是未销毁的Vue组件实例
- 根本原因是全局事件监听未移除：
javascript复制// 错误示例
mounted() {
window.addEventListener('resize', this.handleResize);
}
// 正确做法
mounted() {
window.addEventListener('resize', this.handleResize);
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize);
}
6. 安全防护实施方案
6.1 认证授权体系
采用JWT+Redis的方案：
- 登录成功后生成JWT token并存入Redis
java复制public String generateToken(User user) {
String token = Jwts.builder()
.setSubject(user.getId().toString())
.setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
.signWith(SignatureAlgorithm.HS512, SECRET)
.compact();
redisTemplate.opsForValue().set("TOKEN_"+user.getId(), token, EXPIRATION_TIME, TimeUnit.MILLISECONDS);
return token;
}
- 前端在axios拦截器中自动附加token
javascript复制axios.interceptors.request.use(config => {
const token = store.getters.token;
if(token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
6.2 XSS防护措施
- 后端统一过滤敏感字符
java复制public String filterXSS(String value) {
return StringEscapeUtils.escapeHtml4(value);
}
- 前端使用v-html时自动转义
javascript复制Vue.directive('safe-html', {
inserted: function(el, binding) {
el.innerHTML = DOMPurify.sanitize(binding.value);
}
});
这个项目从技术选型到最终上线历时5个月，期间遇到了无数技术挑战。最深刻的体会是：在复杂系统开发中，没有银弹技术方案，必须根据具体业务场景做权衡。比如我们最初考虑用GraphQL替代RESTful API，但考虑到团队技术储备和项目周期，最终选择了更成熟的方案。