SpringBoot+Vue旅游网站毕业设计实战指南

1. 项目概述与背景

这个基于SpringBoot+Vue的旅游网站平台项目，是我在指导计算机专业学生毕业设计时反复打磨的成熟方案。它采用前后端分离架构，后端使用SpringBoot提供RESTful API，前端用Vue.js实现动态交互，数据库选用MySQL，是一套典型的现代化Web应用技术栈。

在实际教学中发现，很多同学做旅游类项目时容易陷入两个极端：要么功能过于简单（只有CRUD），要么盲目堆砌复杂功能导致难以完成。这个项目经过多次迭代，找到了一个平衡点——包含用户管理、景点展示、订单系统等核心模块，代码量约1.2万行，完整实现需要80-120小时，非常适合作为Java Web方向的毕业设计选题。

2. 技术选型解析

2.1 后端技术栈

选择SpringBoot 2.7.x版本（非最新的3.x）是经过深思熟虑的：

• 教学考量：2.7.x的文档和社区资源更丰富，遇到问题更容易解决
• 稳定性：LTS版本长期支持，避免学生在答辩前遇到版本兼容问题
• 功能覆盖：内嵌Tomcat、自动配置、Starter依赖等特性足以满足项目需求

数据库选用MySQL 8.0而非5.7，主要因为：

sql复制-- 示例：创建用户表时使用了MySQL 8.0的特性
CREATE TABLE `user_info` (
  `user_id` BIGINT NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL COMMENT '登录名',
  `password` VARCHAR(100) NOT NULL COMMENT 'BCrypt加密',
  -- 其他字段...
  PRIMARY KEY (`user_id`),
  UNIQUE INDEX `idx_username` (`username`) USING BTREE,
  INDEX `idx_email` (`email`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

注意：utf8mb4_0900_ai_ci是MySQL 8.0新增的校对规则，比5.7的utf8mb4_general_ci排序更准确

2.2 前端技术栈

Vue 2.x的选择基于以下考虑：

• 生态成熟：Element UI等组件库对Vue 2支持更完善
• 学习曲线：比Vue 3的Composition API更易上手
• 项目规模：对于毕业设计级别的项目，Vue 2完全够用

前端工程化配置要点：

javascript复制// vue.config.js 关键配置
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

3. 核心模块设计与实现

3.1 用户认证模块

采用JWT+Spring Security的方案而非传统的Session认证，主要因为：

• 无状态：更适合前后端分离架构
• 跨域支持：避免Cookie跨域问题
• 移动端友好：便于后续扩展APP接口

安全增强措施：

1. 密码加密：BCryptPasswordEncoder（带盐值哈希）
2. JWT设置：30分钟过期 + Refresh Token机制
3. 接口防护：敏感操作需二次验证

java复制// JWT生成核心代码示例
public String generateToken(UserDetails userDetails) {
    Map<String, Object> claims = new HashMap<>();
    claims.put("roles", userDetails.getAuthorities().stream()
            .map(GrantedAuthority::getAuthority)
            .collect(Collectors.toList()));
    
    return Jwts.builder()
            .setClaims(claims)
            .setSubject(userDetails.getUsername())
            .setIssuedAt(new Date(System.currentTimeMillis()))
            .setExpiration(new Date(System.currentTimeMillis() + 30 * 60 * 1000)) // 30分钟
            .signWith(SignatureAlgorithm.HS256, secretKey)
            .compact();
}

3.2 景点展示模块

创新性地实现了：

• 分级缓存策略：Redis热点数据 + MySQL持久化
• 智能排序算法：综合热度、价格、评分等多维度
• 懒加载优化：分页查询配合前端Intersection Observer API

典型SQL优化案例：

sql复制-- 使用CTE优化复杂查询
WITH popular_spots AS (
    SELECT spot_id, COUNT(*) AS order_count
    FROM order_info
    WHERE order_time > DATE_SUB(NOW(), INTERVAL 3