许蒋氏1. 项目概述：前后端分离的周边游平台系统
这个基于SpringBoot+Vue+MyBatis+MySQL技术栈的周边游平台系统，是我去年带队为本地旅游服务商开发的实战项目。系统采用经典的前后端分离架构，后端用SpringBoot提供RESTful API，前端用Vue构建响应式界面，数据库选用MySQL 8.0，配合MyBatis-Plus实现高效数据操作。整套系统从需求分析到上线部署历时3个月，目前稳定服务日均5000+用户。
提示：项目源码已通过GPL-3.0协议开源，文末会提供获取方式。部署时建议使用Docker容器化方案，可减少环境配置问题。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构深度解析
2.1 后端技术选型
SpringBoot 2.7作为核心框架，主要基于以下考量：
- 自动配置特性简化了SSM框架整合
- 内嵌Tomcat支持快速部署
- Actuator端点便于监控
- 与MyBatis的天然兼容性
关键依赖配置示例（pom.xml片段）：
xml复制<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.3.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
2.2 前端架构设计
Vue 3组合式API带来以下优势：
- 更好的TypeScript支持
- 更灵活的逻辑复用
- 更小的打包体积
项目采用的技术组合：
- UI库：Element Plus
- 状态管理：Pinia
- 路由：Vue Router 4
- HTTP客户端：Axios
典型API调用示例：
javascript复制import { useTripStore } from '@/stores/trip'
const store = useTripStore()
const loadData = async () => {
try {
await store.fetchPopularTrips()
} catch (err) {
ElMessage.error('加载失败')
}
}
3. 核心功能实现细节
3.1 旅游产品管理模块
采用领域驱动设计（DDD）实现：
- 聚合根：TourProduct
- 值对象：PricePolicy
- 仓储接口：TourProductRepository
MyBatis动态SQL应用示例：
xml复制<select id="selectByConditions" resultMap="BaseResultMap">
SELECT * FROM tour_product
<where>
<if test="region != null">
AND region_id = #{region}
</if>
<if test="minPrice != null">
AND current_price >= #{minPrice}
</if>
</where>
ORDER BY sales_volume DESC
LIMIT #{pageSize}
</select>
3.2 订单支付系统
支付流程关键技术点：
- 分布式ID生成（雪花算法）
- 乐观锁控制并发
- 状态机模式管理订单生命周期
- 微信支付/支付宝沙箱集成
订单状态转换设计：
java复制public enum OrderStatus {
INIT(0),
PAID(1),
COMPLETED(2),
CANCELLED(-1);
// 状态校验逻辑
public boolean canTransferTo(OrderStatus target) {
// 实现状态流转规则
}
}
4. 部署实战指南
4.1 生产环境部署方案
推荐的基础设施配置：
- 服务器：2核4G（最低配置）
- 数据库：MySQL 8.0主从架构
- 缓存：Redis 6.x集群
- 消息队列：RabbitMQ 3.9
Nginx关键配置示例：
nginx复制server {
listen 80;
server_name yourdomain.com;
location /api/ {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
}
location / {
root /var/www/dist;
try_files $uri $uri/ /index.html;
}
}
4.2 常见部署问题解决
-
前端静态资源404错误：
- 检查vue-router的history模式配置
- 确保Nginx try_files配置正确
-
数据库连接池耗尽：
yaml复制spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000 -
跨域问题处理：
java复制@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .maxAge(3600); } }
5. 性能优化实践
5.1 数据库优化策略
-
索引优化：
- 为高频查询字段建立组合索引
- 使用EXPLAIN分析执行计划
-
查询优化：
- 避免SELECT *
- 合理使用MyBatis二级缓存
- 大数据量分页采用游标方式
5.2 前端性能提升
-
代码分割：
javascript复制const TourDetail = () => import('@/views/TourDetail.vue') -
图片懒加载：
html复制<img v-lazy="imageUrl" alt="tour image"> -
API请求优化：
- 防抖处理搜索请求
- 接口数据缓存策略
6. 安全防护措施
6.1 常见安全防护
-
SQL注入防护：
- 始终使用#{}参数绑定
- 定期使用SQLMap扫描
-
XSS防护：
java复制@Configuration public class WebSecurityConfig { @Bean public FilterRegistrationBean<XssFilter> xssFilter() { // 配置XSS过滤器 } } -
CSRF防护：
- 前后端配合使用CSRF Token
- SameSite Cookie策略
6.2 敏感数据保护
-
密码加密存储：
java复制public class PasswordEncoder { public String encode(CharSequence rawPassword) { return BCrypt.hashpw(rawPassword.toString(), BCrypt.gensalt()); } } -
数据脱敏处理：
- 手机号：138****1234
- 身份证号：110***********123X
7. 项目扩展方向
7.1 推荐系统集成
基于用户行为的简单推荐实现：
java复制public List<TourProduct> recommendProducts(Long userId) {
// 1. 获取用户历史行为
// 2. 计算相似用户
// 3. 返回推荐结果
}
7.2 微服务改造方案
可拆分的微服务：
- 用户服务
- 产品服务
- 订单服务
- 支付服务
- 评价服务
Spring Cloud技术选型：
- 注册中心：Nacos
- 服务调用：OpenFeign
- 网关：Spring Cloud Gateway
8. 开发经验分享
8.1 前后端协作实践
-
接口文档管理：
- 使用Swagger UI生成文档
- 配合YApi进行接口管理
-
联调技巧：
- Mock.js模拟接口数据
- Chrome开发者工具网络分析
8.2 调试技巧
-
后端调试：
- Arthas诊断工具
- MyBatis SQL日志打印
-
前端调试：
- Vue Devtools组件检查
- Chrome性能分析
踩坑记录：MySQL的utf8mb4字符集必须在前端项目初始化时就配置正确，否则后期迁移会导致emoji表情存储异常。我们曾因此不得不进行了一次全库字符集转换操作。