最近在帮学弟学妹们看毕业设计发现很多同学在选题“旅游网站”后面对SpringBoot和Vue.js这一经典组合时依然会感到无从下手。时间紧、技术栈不熟、前后端联调困难、部署上线更是“玄学”这些都是非常真实的痛点。今天我就结合一个完整的旅游网站毕设项目把从零搭建到部署上线的全流程和避坑要点梳理一遍希望能帮你少走弯路。1. 为什么是 SpringBoot Vue.js毕业设计时间有限技术选型的第一原则是“成熟、高效、资料多”。对比其他组合Django React/VueDjango的“全家桶”模式开发效率极高但Python后端对于大部分以Java为主课的计算机专业同学来说可能不如Spring生态熟悉且国内Java岗位更多毕设用SpringBoot对未来求职也更有利。Flask VueFlask非常轻量灵活但需要自己组装很多组件ORM、鉴权等对于新手而言SpringBoot约定大于配置、开箱即用的特性更能减少决策成本让你聚焦业务逻辑。SpringBoot Vue.jsSpringBoot简化了Spring的初始搭建和开发过程Vue.js则以其渐进式和易于上手的特点成为前端入门的热门选择。两者通过RESTful API进行通信结构清晰社区活跃遇到问题几乎都能找到解决方案。对于旅游网站这类包含用户、景点、订单、评论等典型CRUD功能的项目这套组合能让你快速搭建出结构良好的前后端分离应用。2. 项目结构与核心模块规划在动手写代码前先规划好项目结构事半功倍。我们采用标准的前后端分离模式后端 (SpringBoot Project)src/main/java/com/travel/ ├── config/ // 配置类CORS、JWT、Swagger等 ├── controller/ // 控制器接收HTTP请求 ├── service/ // 业务逻辑层 ├── service/impl/ ├── dao/ // 数据访问层或repository ├── entity/ // 实体类对应数据库表 ├── dto/ // 数据传输对象 ├── utils/ // 工具类JWT、加密等 └── TravelApplication.java // 启动类前端 (Vue.js Project)src/ ├── api/ // 封装所有axios请求 ├── assets/ // 静态资源 ├── components/ // 可复用组件如景点卡片、分页器 ├── router/ // 路由配置 ├── store/ // Vuex状态管理用户登录状态等 ├── views/ // 页面视图首页、详情页、用户中心 └── App.vue3. 后端核心模块实现与关键代码3.1 用户管理模块含JWT鉴权用户模块是基础涉及注册、登录和鉴权。我们使用JWTJSON Web Token来管理用户会话。实体类与数据库创建User实体包含id,username,password加密存储,email,avatar等字段。使用Spring Data JPA或MyBatis-Plus进行ORM操作。密码加密绝对不要明文存储密码使用Spring Security的BCryptPasswordEncoder进行哈希加密。Configuration public class SecurityConfig { Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } } // 在注册服务中加密密码 user.setPassword(passwordEncoder.encode(rawPassword));JWT工具类编写一个工具类来生成和解析JWT Token。通常包含secretKey密钥和expiration过期时间。Component public class JwtUtil { private static final String SECRET_KEY your-secret-key-change-in-production; private static final long EXPIRATION 86400000L; // 24小时 public String generateToken(String username) { return Jwts.builder() .setSubject(username) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRATION)) .signWith(SignatureAlgorithm.HS512, SECRET_KEY) .compact(); } // ... 解析Token、验证Token等方法 }登录接口在AuthController中创建/api/auth/login接口校验用户名和密码成功后返回包含JWT Token的响应。鉴权拦截器创建一个拦截器或使用Spring Security Filter在除登录/注册外的请求头中获取Authorization: Bearer token并验证其有效性将用户信息存入请求上下文。3.2 景点信息模块这是旅游网站的核心提供景点的增删改查CRUD接口。RESTful API设计遵循REST风格设计接口。GET /api/attractions- 获取景点列表可分页、筛选GET /api/attractions/{id}- 获取单个景点详情POST /api/attractions- 新增景点需管理员权限PUT /api/attractions/{id}- 更新景点信息DELETE /api/attractions/{id}- 删除景点分页查询使用Spring Data JPA的Pageable或MyBatis-Plus的Page对象轻松实现分页。前端传递page页码和size每页条数参数。GetMapping(/attractions) public PageAttractionDTO getAttractions( RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size) { Pageable pageable PageRequest.of(page, size); return attractionService.findAll(pageable); }3.3 文件上传景点图片旅游网站少不了图片上传功能用于景点封面、用户头像等。配置文件上传在application.yml中设置文件大小限制和存储路径。spring: servlet: multipart: max-file-size: 5MB max-request-size: 10MB file: upload-dir: ./uploads/ # 本地存储路径生产环境建议用OSS上传接口使用MultipartFile接收文件。PostMapping(/upload) public String uploadFile(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { throw new RuntimeException(请选择文件); } String fileName UUID.randomUUID() _ file.getOriginalFilename(); Path filePath Paths.get(uploadDir, fileName); Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING); // 返回文件的访问URL如 /uploads/filename.jpg return /uploads/ fileName; }静态资源映射为了让上传的图片能被前端访问需要配置静态资源映射。Configuration public class WebConfig implements WebMvcConfigurer { Value(${file.upload-dir}) private String uploadDir; Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/uploads/**) .addResourceLocations(file: uploadDir); } }3.4 解决跨域问题CORS前后端分离开发本地前端如localhost:8080访问后端API如localhost:8081时浏览器会因同源策略阻止请求。必须在后端全局配置CORS。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) // 针对所有/api开头的接口 .allowedOrigins(http://localhost:8080) // 允许的前端地址生产环境需替换 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) // 允许携带Cookie等凭证 .maxAge(3600); } }4. 前端核心组织与请求封装4.1 封装axios请求在前端项目中创建一个request.js或api/index.js文件来统一管理axios实例设置基础URL、请求/响应拦截器用于自动添加JWT Token、处理错误等。// src/api/request.js import axios from axios import { Message } from element-ui // 假设使用Element UI import router from /router const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 对应后端地址在.env.development中配置 timeout: 10000 }) // 请求拦截器在请求头中添加token service.interceptors.request.use( config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }, error { return Promise.reject(error) } ) // 响应拦截器统一处理错误如token过期跳转登录 service.interceptors.response.use( response { const res response.data if (res.code ! 200) { // 假设后端返回格式为 {code, data, msg} Message.error(res.msg || Error) // 如果是401未授权清除token并跳转登录页 if (res.code 401) { localStorage.removeItem(token) router.push(/login) } return Promise.reject(new Error(res.msg || Error)) } else { return res.data // 直接返回业务数据 } }, error { Message.error(error.message || 请求失败) return Promise.reject(error) } ) export default service4.2 页面与组件组织首页 (HomeView.vue)展示景点列表轮播图、推荐景点等。使用axios调用/api/attractions接口获取数据并用v-for渲染景点卡片组件。景点详情页 (AttractionDetail.vue)根据路由参数id调用/api/attractions/{id}获取详情并展示。用户中心 (UserCenter.vue)展示用户信息、订单历史。需要从Vuex或本地存储获取登录状态并在请求头中携带Token。可复用组件 (AttractionCard.vue)将景点的图片、名称、简介封装成卡片组件在首页和列表页复用。5. 安全性考量XSS防护Vue.js默认对模板渲染进行了HTML转义有效防止了XSS。但在v-html指令或后端直接向前端返回HTML片段时要格外小心。后端在接收用户输入如评论内容时也应进行过滤或转义。密码加密如前所述务必使用BCryptPasswordEncoder等强哈希算法加密密码切勿使用MD5、SHA-1等已被证明不安全的算法或在客户端加密。JWT过期与刷新为JWT设置合理的过期时间如24小时。可以考虑实现refresh token机制当access token过期后使用refresh token获取新的access token无需用户重新登录。SQL注入防护使用Spring Data JPA或MyBatis配合#{}预编译等ORM框架基本可以避免。切勿手动拼接SQL字符串。6. 本地运行与云服务器部署本地运行启动后端运行TravelApplication的main方法或使用mvn spring-boot:run。启动前端进入前端目录运行npm run serve。访问http://localhost:8080即可。云服务器部署以LinuxNginx为例后端部署使用mvn clean package打包后端为jar文件。将jar文件上传至服务器。使用nohup java -jar your-app.jar 在后台运行。更推荐使用systemd或Docker容器化部署便于管理。前端部署运行npm run build生成静态文件在dist目录。将dist文件夹内的所有文件上传到服务器某个目录例如/var/www/travel-frontend。配置Nginx编辑Nginx配置文件如/etc/nginx/conf.d/travel.conf核心是处理静态文件和反向代理API请求。server { listen 80; server_name your-domain.com; # 你的域名或服务器IP # 前端静态文件 location / { root /var/www/travel-frontend; index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 反向代理后端API location /api/ { proxy_pass http://localhost:8081; # 后端SpringBoot应用运行的地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 代理上传的静态文件如果图片存在本地 location /uploads/ { alias /path/to/your/upload/dir/; } }检查配置并重启Nginxsudo nginx -t sudo systemctl restart nginx。7. 生产环境避坑指南这里总结几个部署后最容易踩的坑前端路由刷新404History模式Vue Router默认是hash模式URL带#如果使用history模式URL更美观在Nginx中必须配置try_files $uri $uri/ /index.html;如上例所示否则刷新非首页路由会报404。后端热更新失效生产环境的application.yml中确保spring.devtools.restart.enabled: false热更新功能在生产环境应关闭。路径大小写敏感问题Linux系统是大小写敏感的。确保你的代码中引用的文件路径、数据库表名/字段名与实际情况完全一致避免因大小写不一致导致“文件找不到”或“列名无效”的错误。数据库连接池配置Spring Boot默认使用HikariCP连接池。在生产环境下务必根据服务器性能和数据库负载调整连接池参数如最大连接数、最小空闲连接、连接超时时间等配置在application.yml中。spring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 1800000文件上传路径权限确保运行Java应用的用户如www-data或你创建的用户对文件上传目录./uploads/有读写权限否则会上传失败。JWT Secret Key管理生产环境的JWT密钥SECRET_KEY必须足够复杂且不能硬编码在代码中。应通过环境变量或配置中心注入。前端环境变量前端构建时process.env.VUE_APP_BASE_API这类变量是在构建时刻被替换的。部署后如果需要改变API地址需要重新构建。可以考虑使用运行时配置但更复杂。8. 总结与扩展建议通过以上步骤一个具备用户管理、景点展示、图片上传等核心功能的旅游网站毕设骨架就搭建完成了。整个过程涵盖了从技术选型、项目结构设计、前后端核心功能实现、安全防护到最终部署上线的完整闭环。这个项目作为毕设已经足够但如果想拿更高分可以考虑在此基础上进行功能扩展这也能很好地体现你的系统设计能力订单与支付模块实现用户选择景点、填写信息、生成订单。可以集成模拟支付接口如支付宝沙箱。评论与评分系统允许用户对景点发表评论和打分并展示平均分。搜索与筛选实现更复杂的景点搜索按名称、地点、标签和高级筛选功能。后台管理系统使用一套Admin模板如Vue Element Admin为管理员提供景点、用户、订单的管理界面。引入Redis缓存将热门景点信息、首页数据缓存到Redis中减轻数据库压力提升响应速度。希望这篇笔记能为你扫清SpringBootVue.js毕设路上的主要障碍。技术学习的本质是动手建议你按照这个流程亲自敲一遍代码遇到问题多查文档和社区。当你看到自己搭建的网站成功跑起来的那一刻所有的努力都是值得的。祝你毕业设计顺利通过