1. 项目概述与核心需求解析1.1 这个毕设到底做了什么如果你正在准备2026年的毕业设计又恰好选了旅游咨询系统这类题目那这套SSMVue的临沂旅游咨询系统方案值得你仔细看完。先说人话这个系统本质上就是一个面向游客的旅游信息服务平台只不过把服务对象锁定在了临沂这座城市的旅游场景上。游客可以浏览景点介绍、查看旅游线路、了解酒店信息、查看攻略文章、提交在线咨询管理员则可以在后台管理景点、线路、酒店、攻略、留言等所有数据。整个系统采用前后端分离架构后端用SSMSpring SpringMVC MyBatis提供数据接口前端用Vue框架做页面交互和数据渲染。为什么这个题目值得做因为旅游咨询系统这类题目在毕业设计里属于经典中的经典需求明确、功能边界清晰、技术栈通用。但它又不是那种毫无亮点的增删改查全家桶——如果你把地图集成、线路推荐、视频预览这些功能加进去整个系统的技术含量一下就上来了论文也有东西可写。这套方案在2026年的毕设中依然能打原因很简单SSM依然是很多高校Java课程的主流框架Vue在前端领域更是长期占据统治地位选题不偏门、技术不冷门、答辩不冒险。1.2 为什么选择SSMVue这套组合很多同学在选题之后纠结的第一件事就是技术栈到底怎么定用Spring Boot还是SSM用Vue2还是Vue3用不用分离我给你的建议是如果你是2026年毕业SSMVue3前后端分离是最稳的方案。先说说SSM为什么不过时。Spring Boot确实比SSM配置起来省事但很多高校的Java课程体系里SSM仍然是最先系统讲解的内容导师也最熟悉这套框架的提问套路。更重要的是SSM能让你把Spring的IOC、AOPSpringMVC的请求流转MyBatis的SQL映射机制这些核心原理都展示出来答辩时老师问到底层机制你都能接得住。用Spring Boot虽然开发效率高但很多学生只知其然不知其所以然反而容易被问住。Vue这边建议直接用Vue3 Vite Element Plus的组合。Vue3的Composition API写起来比Vue2的Options API更符合工程化思维而且Vite的启动速度比Webpack快了一个量级开发体验好很多。更重要的是Vue3现在已经是主流面试和答辩时聊Vue3的响应式原理、组合式函数这些话题比聊Vue2更有优势。前后端分离这个选择看起来是给自己增加工作量需要处理跨域、联调但实际上对毕设是加分项。一方面它更接近企业真实开发模式论文里可以专门写一章系统架构设计来说明分离架构的优势另一方面前后端分离后你可以分别部署、分别测试出现问题时定位也更方便后期扩展也轻松。我见过不少做前后端不分离的老项目页面里嵌着一堆JSP和JSTL标签改个样式都费劲答辩演示翻车率极高。这个题目下分离是明确的正确方向。# 前端工程初始化Vue3 Vite npm create vitelatest linyi-travel-web -- --template vue # 安装路由、状态管理、UI组件库、HTTP库 npm install vue-router4 pinia axios element-plus element-plus/icons-vue这套组合装完之后你的项目骨架就搭好了一半。后面要做的就是把旅游资源管理的业务逻辑一层层填进去。2. 系统设计与数据建模2.1 功能模块拆解从游客视角到管理员视角做系统设计的第一步不是急着写代码而是把角色和功能对应起来。临沂旅游咨询系统的用户角色分为三类游客访客、注册用户、管理员。游客能做什么浏览景点列表、查看景点详情、搜索景点、查看旅游线路、阅读旅游攻略、查看酒店信息。游客也可以提交咨询留言但为了管理方便通常建议注册登录后才能留言不然垃圾留言没法追溯。注册用户在游客的基础上多了个人中心相关的操作修改个人信息、查看自己提交的咨询记录、收藏感兴趣的景点、对景点发表评论、发起线路定制需求。管理员这边就是标准的内容管理后台景点信息管理增删改查、上下架、图片上传、旅游线路管理、酒店信息管理、攻略文章管理、用户管理、留言回复管理、数据统计。这里要特别注意管理员的操作一定要有权限控制不能普通用户也访问后台接口。所以后端要写一个简单的拦截器校验请求头里携带的token对应的用户角色。功能梳理清楚之后就形成了下面这个模块清单模块子功能前端页面后端接口用户模块注册、登录、个人信息登录页、注册页、个人中心/api/user/register, /api/user/login景点模块景点列表、详情、搜索景点列表页、详情页/api/scenic/list, /api/scenic/detail线路模块线路列表、详情线路列表页、详情页/api/route/list, /api/route/detail酒店模块酒店列表、详情酒店列表页、详情页/api/hotel/list, /api/hotel/detail攻略模块攻略列表、详情攻略列表页、详情页/api/strategy/list, /api/strategy/detail咨询模块提交咨询、查看回复咨询页面、咨询记录/api/consult/submit, /api/consult/list后台管理各模块数据管理后台管理页面/api/admin/**2.2 数据库设计思路六张核心表如何建数据库设计是论文里必须重点写的内容也是答辩时老师一定会问的部分。这个系统的核心表我建议做成六张用户表t_user用户ID、用户名、密码加密存储、昵称、头像URL、手机号、邮箱、角色1管理员/0普通用户、注册时间。景点表t_scenic景点ID、名称、简介、详细描述、图片URL可多个、门票价格、开放时间、建议游玩时长、所在区域、经纬度、评分、浏览量、状态1上架/0下架。线路表t_route线路ID、名称、路线描述、天数、价格、包含景点IDs用逗号分隔、封面图、发布时间、状态。酒店表t_hotel酒店ID、名称、地址、简介、星级、最低价格、图片URL、联系电话、状态。攻略表t_strategy攻略ID、标题、封面图、内容富文本、作者、发布时间、浏览量、状态。咨询表t_consult咨询ID、用户ID、咨询内容、回复内容、咨询时间、回复时间、状态0待回复/1已回复。这六张表的关联关系比较简单主要就是线路表通过景点ID集合和景点表产生弱关联咨询表通过用户ID和用户表关联。为什么要用逗号分隔而不是建中间表因为线路关联的景点是固定的展示需求不会做多对多查询用逗号分隔反而简单查询时在Java层拆一下字符串就行。不过论文里可以写一句考虑到线路与景点之间的关联为固定配置且不需要按景点反查线路因此采用冗余存储方式避免不必要的复杂关联查询。建表语句要特别注意几点时间字段统一用datetime类型价格字段用decimal(10,2)文本描述用text类型所有表都要加create_time和update_time字段方便后期排查数据问题状态字段用tinyint并用注释说明含义。字符集建议用utf8mb4而不是utf8因为utf8在MySQL里存不了emoji表情游客评论里如果带了表情符号utf8会直接报错这个问题我在实际部署时踩过一次后来把所有表都改成utf8mb4才解决。3. 后端SSM框架搭建与核心实现3.1 工程结构与Maven依赖后端工程建议使用Maven构建的标准三层结构分包清晰是答辩时的加分项com.linyi.travel ├── controller // 控制层接收请求参数并返回JSON ├── service // 业务逻辑层业务规则的实现 │ └── impl // 业务逻辑实现类 ├── mapper // MyBatis数据访问层接口 ├── entity // 实体类对应数据库表 ├── dto // 数据传输对象接收前端参数、返回封装结果 ├── config // 配置类拦截器、跨域配置等 ├── interceptor // 登录拦截器 ├── util // 工具类JWT工具、MD5加密等 └── common // 通用返回结果封装pom.xml里最关键的依赖就那几个spring-webmvc、mybatis、mybatis-spring、druid连接池、mysql-connector-java、jackson-databindJSON序列化、jwt登录token工具。注意这里不建议用spring-boot-starter-web因为SSM项目的核心价值就在于手动整合Spring和SpringMVC的过程这个过程在论文里可以写整整一章用Boot全自动配置反而没什么可写的。properties spring.version5.3.30/spring.version /properties dependencies !-- Spring核心 -- dependency groupIdorg.springframework/groupId artifactIdspring-context/artifactId version${spring.version}/version /dependency !-- SpringMVC -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version${spring.version}/version /dependency !-- MyBatis -- dependency groupIdorg.mybatis/groupId artifactIdmybatis/artifactId version3.5.13/version /dependency dependency groupIdorg.mybatis/groupId artifactIdmybatis-spring/artifactId version2.1.0/version /dependency !-- 数据库连接池 -- dependency groupIdcom.alibaba/groupId artifactIddruid/artifactId version1.2.20/version /dependency !-- MySQL驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version /dependency !-- JSON序列化 -- dependency groupIdcom.fasterxml.jackson.core/groupId artifactIdjackson-databind/artifactId version2.15.2/version /dependency !-- JWT -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency /dependenciesMaven依赖的版本号要锁定好我见过太多同学用最新版Spring然后跟框架整合时包冲突报错报得怀疑人生。上面这几个版本号都是我自己测过稳定能跑的版本组合直接抄作业就行。3.2 Spring SpringMVC MyBatis整合的三大配置文件SSM项目最劝退的就是那三份配置文件但只要理解了每份文件的作用配置起来其实就是套模板。applicationContext.xmlSpring主配置负责数据源、事务管理、MyBatis整合。这里要配置DruidDataSource连接池扫描mapper接口包让MyBatis自动生成代理实现类同时配置SqlSessionFactoryBean指定mapper XML文件的位置。context:component-scan base-packagecom.linyi.travel !-- 排除Controller注解这些交给SpringMVC配置管理 -- context:exclude-filter typeannotation expressionorg.springframework.stereotype.Controller/ /context:component-scan !-- 数据源配置 -- bean iddataSource classcom.alibaba.druid.pool.DruidDataSource property namedriverClassName valuecom.mysql.cj.jdbc.Driver/ property nameurl valuejdbc:mysql://localhost:3306/linyi_travel?useUnicodetrueamp;characterEncodingutf8amp;serverTimezoneAsia/Shanghai/ property nameusername valueroot/ property namepassword valueyourpassword/ /bean !-- MyBatis整合 -- bean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource/ property namemapperLocations valueclasspath:mapper/*.xml/ property nametypeAliasesPackage valuecom.linyi.travel.entity/ /bean bean classorg.mybatis.spring.mapper.MapperScannerConfigurer property namebasePackage valuecom.linyi.travel.mapper/ /beanspring-mvc.xmlSpringMVC配置负责注解驱动、静态资源放行、视图解析器。这个项目是前后端分离所以接口统一返回JSON不配JSP视图解析器用RestController或者ResponseBody直接序列化对象。context:component-scan base-packagecom.linyi.travel.controller/ mvc:annotation-driven/ mvc:default-servlet-handler/ !-- 文件上传解析器 -- bean idmultipartResolver classorg.springframework.web.multipart.commons.CommonsMultipartResolver property namedefaultEncoding valueUTF-8/ property namemaxUploadSize value5242880/ /bean注意mvc:default-servlet-handler/这行它负责把前端静态资源请求交给容器默认的Servlet处理不然部署到Tomcat后访问前端页面会404。mybatis-config.xmlMyBatis全局配置这个文件一般比较简单主要配置驼峰映射和日志configuration settings !-- 数据库字段下划线自动映射为Java驼峰属性 -- setting namemapUnderscoreToCamelCase valuetrue/ !-- 打印SQL日志开发阶段非常有帮助 -- setting namelogImpl valueSTDOUT_LOGGING/ /settings /configurationmapUnderscoreToCamelCase这个配置强烈建议打开它能把scenic_name自动映射成scenicName省掉大量resultMap手写映射的体力活。有些同学不设置这个结果MyBatis查询出来的对象全是null排查半天找不到原因。3.3 核心接口设计与统一返回格式接口设计这块我建议所有的后端接口统一返回一个Result对象public class ResultT { private Integer code; // 200成功500失败401未登录 private String message; // 提示信息 private T data; // 具体数据 public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(500); result.setMessage(message); return result; } }所有Controller都返回这个统一格式前端Axios拦截器只需要判断一次code就能统一处理成功和异常的情况不用每个页面写一堆重复的逻辑。举个例子景点列表的Controller长这样RestController RequestMapping(/api/scenic) public class ScenicController { Autowired private ScenicService scenicService; GetMapping(/list) public ResultPageResultScenic list( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { PageResultScenic page scenicService.queryPage(pageNum, pageSize, keyword); return Result.success(page); } GetMapping(/detail/{id}) public ResultScenic detail(PathVariable Integer id) { return Result.success(scenicService.getById(id)); } }这里很多人会问分页怎么做最简单的方式就是MyBatis的PageHelper插件在pom里加一个依赖然后在查询前调用一行代码PageHelper.startPage(pageNum, pageSize); ListScenic list scenicMapper.selectList(keyword); PageInfoScenic pageInfo new PageInfo(list);PageHelper会自动拦截下一条SQL自动拼接LIMIT语句同时把总数、页数都封装到PageInfo里非常省事。不过要注意PageHelper.startPage只对紧随其后的第一条SQL生效如果你在调用点和SQL执行之间插入其他查询分页就会错乱这是一个很经典的坑。4. 前端Vue框架搭建与后端联调4.1 Vue3工程结构与路由设计前端工程我通常建议按这样一个结构组织src ├── api // 接口请求封装 │ ├── scenic.js │ ├── user.js │ └── ... ├── assets // 静态资源 ├── components // 公共组件 │ ├── HeaderNav.vue │ ├── FooterBar.vue │ └── ... ├── router // 路由配置 │ └── index.js ├── store // 全局状态管理 │ └── user.js ├── views // 页面组件 │ ├── home │ ├── scenic │ ├── route │ ├── hotel │ ├── strategy │ ├── user │ └── admin └── App.vue路由设计上我是用懒加载的方式导入页面组件这样首屏加载速度会好看很多import { createRouter, createWebHistory } from vue-router const routes [ { path: /, name: Home, component: () import(/views/home/HomePage.vue), meta: { title: 首页 } }, { path: /scenic, name: ScenicList, component: () import(/views/scenic/ScenicList.vue), meta: { title: 景点列表 } }, { path: /scenic/:id, name: ScenicDetail, component: () import(/views/scenic/ScenicDetail.vue), meta: { title: 景点详情 } }, { path: /login, name: Login, component: () import(/views/user/LoginPage.vue), meta: { title: 登录 } }, { path: /admin, name: AdminLayout, component: () import(/views/admin/AdminLayout.vue), meta: { title: 后台管理, requiresAuth: true, role: admin }, children: [ { path: scenic, component: () import(/views/admin/ScenicManage.vue) }, { path: route, component: () import(/views/admin/RouteManage.vue) }, { path: consult, component: () import(/views/admin/ConsultManage.vue) } ] } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫登录检查 管理员权限检查 router.beforeEach((to, from, next) { const token localStorage.getItem(token) const userInfo JSON.parse(localStorage.getItem(userInfo) || {}) if (to.meta.requiresAuth !token) { next({ path: /login, query: { redirect: to.fullPath } }) } else if (to.meta.role admin userInfo.role ! 1) { next({ path: / }) } else { next() } }) export default router路由守卫这段代码是毕设演示的重头戏之一老师必定会问未登录用户能不能直接访问后台管理页面你直接说到全局前置守卫拦截页面会跳转到登录页然后现场演示一遍这个印象分就拿到了。4.2 Axios请求封装与跨域问题处理前端和后端是两个不同的端口开发时必然遇到跨域问题。处理跨域有几个方案最省事的是后端加一个CorsFilter全局配置Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }这里要特别注意addAllowedOriginPattern(*)和addAllowedOrigin(*)的区别。addAllowedOrigin(*)配合allowCredentials(true)在一些新版本Spring里会报错因为浏览器不允许带凭证的跨域请求使用通配符来源用addAllowedOriginPattern才是正确写法。前端这边把Axios实例封装到一个模块里统一设置baseURL和请求拦截器import axios from axios import { ElMessage } from element-plus import router from /router const request axios.create({ baseURL: http://localhost:8080/api, timeout: 10000 }) // 请求拦截器自动携带token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization token } return config }) // 响应拦截器统一处理错误 request.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.removeItem(token) router.push(/login) return Promise.reject(new Error(未登录)) } if (res.code ! 200) { ElMessage.error(res.message) return Promise.reject(new Error(res.message)) } return res }, error { ElMessage.error(网络异常请稍后重试) return Promise.reject(error) } ) export default request注意baseURL带上了/api前缀这意味着后端Controller的所有请求路径都以/api开头这样前后端路径约定一目了然也方便在Nginx里做反向代理时统一转发。4.3 视频预览功能的实现思路热搜词里有vue播放m3u8这个在旅游系统中用得上的场景是景点宣传视频、攻略视频。m3u8是一种流媒体播放列表格式浏览器原生video标签不能直接播放需要用hls.js这个库。如果景点视频是m3u8格式的在Vue里播放的核心代码很简单import Hls from hls.js // 在mounted中初始化 if (Hls.isSupported()) { const hls new Hls() hls.loadSource(this.videoUrl) hls.attachMedia(this.$refs.video) hls.on(Hls.Events.MANIFEST_PARSED, () { this.$refs.video.play() }) }这里this.videoUrl是后端接口返回的视频地址可以是https://example.com/video/spot.mp4.m3u8这样的完整路径。使用Hls.js要注意一点视频URL必须和前端页面同源否则会有跨域问题这时需要让后端在接口响应头里加上CORS配置或者使用一个代理服务器来做转发。毕设里的视频文件一般放在本地静态目录或者OSS对象存储上。如果你用Nginx部署可以直接把视频目录映射到一个公开访问的路径然后后端数据库里存完整的访问URL前端请求接口拿URL直接拼到Hls里就行。5. 核心功能模块的实现细节与代码逻辑5.1 景点搜索与推荐从SQL到前端交互景点搜索是旅游系统的核心功能这里不是简单地写一个SELECT * FROM t_scenic WHERE name LIKE %关键词%就完事了。要实现一个体验还不错的搜索至少要考虑三个维度景点名称、景点简介、所在区域。对应的Mapper SQL是select idselectByKeyword resultTypecom.linyi.travel.entity.Scenic SELECT * FROM t_scenic where if testkeyword ! null and keyword ! name LIKE CONCAT(%, #{keyword}, %) OR description LIKE CONCAT(%, #{keyword}, %) OR region LIKE CONCAT(%, #{keyword}, %) /if AND status 1 /where ORDER BY view_count DESC LIMIT #{offset}, #{limit} /select注意这里LIMIT #{offset}, #{limit}是分页参数手动传入因为PageHelper在动态SQL场景下偶尔会有解析问题直接用参数反而更可控。view_count DESC排序实现了最热景点优先这是一种非常基础但实用的推荐逻辑不依赖任何算法但效果直观。前端搜索交互上我建议做一个防抖处理用户输入关键词300毫秒后才发起请求避免频繁请求后端const handleSearch () { clearTimeout(timer) timer setTimeout(() { searchList.value await fetchScenicList(keyword.value) }, 300) }这段防抖代码是面试常考的论文里也值得写一句作为交互优化点。300毫秒是一个体感比较合适的值太快会漏掉输入中间状态太慢会让人感觉卡顿。5.2 旅游线路推荐的小算法线路推荐这个功能在简单项目里就做成管理员手动发布线路列表但在论文里你可以加一个小亮点基于景点关联度的推荐。思路是这样的每条线路都包含了若干景点ID用一个spot_ids字段存逗号分隔的字符串。当用户浏览某条线路详情时接口查询所有包含相同景点的其他线路按重合景点数量降序返回public ListRoute recommendRoutes(Integer routeId) { Route current routeMapper.selectById(routeId); // 拆分当前线路的景点ID集合 ListInteger currentSpotIds Arrays.stream(current.getSpotIds().split(,)) .map(Integer::parseInt).collect(Collectors.toList()); // 查询所有其他线路 ListRoute allRoutes routeMapper.selectStatusList(); // 计算每个线路与当前线路的景点重合数量 return allRoutes.stream() .filter(r - !r.getId().equals(routeId)) .map(r - { ListInteger rSpotIds Arrays.stream(r.getSpotIds().split(,)) .map(Integer::parseInt).collect(Collectors.toList()); long overlap rSpotIds.stream() .filter(currentSpotIds::contains).count(); r.setOverlapCount((int) overlap); return r; }) .filter(r - r.getOverlapCount() 0) .sorted((a, b) - b.getOverlapCount() - a.getOverlapCount()) .limit(3) .collect(Collectors.toList()); }这段代码逻辑简单清晰但比直接查最近的三条线路有说服力得多。你在论文的需求分析里写一句系统基于景点重合度计算线路相似度为用户推荐关联线路然后给出这段实现代码老师看了会认为你确实在业务逻辑上动了脑筋。5.3 咨询模块与留言回复的权限控制咨询模块是旅游咨询系统的门面功能也是体现你权限设计能力的地方。我建议的流程是注册用户登录后在景点详情页点击在线咨询弹出对话框填写咨询内容。提交时后端校验token对应的用户是否存在然后写入咨询表状态置为0待回复。管理员在后台的咨询管理页面看到待回复列表点击回复填写回复内容状态置为1已回复。用户下次登录后在个人中心我的咨询页面看到回复。后端提交咨询的接口需要先拿到当前登录用户这里用JWT工具解析请求头中的tokenPostMapping(/submit) public ResultVoid submit(RequestBody ConsultDTO dto, RequestHeader(Authorization) String token) { Integer userId JwtUtil.parseToken(token).get(userId, Integer.class); Consult consult new Consult(); consult.setUserId(userId); consult.setContent(dto.getContent()); consult.setStatus(0); consultMapper.insert(consult); return Result.success(null); }JWT生成和解析的工具类建议自己写一遍虽然网上能抄但答辩时老师问token里都放什么内容过期时间怎么设置你答不上来就尴尬了。核心逻辑就是HS256签名算法payload里放userId和过期时间解析时先验证签名再取过期时间。public class JwtUtil { private static final String SECRET_KEY linyi-travel-secret-key; private static final long EXPIRE_TIME 7 * 24 * 60 * 60 * 1000; // 7天 public static String generateToken(Integer userId) { return Jwts.builder() .claim(userId, userId) .setExpiration(new Date(System.currentTimeMillis() EXPIRE_TIME)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); } public static Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token) .getBody(); } }这里的SECRET_KEY直接用字符串常量就可以毕设场景下不需要上生产环境的密钥管理。过期时间设为7天合理因为用户不是每天都会登录系统但如果设太短比如2小时用户演示时突然token过期体验就很糟。6. 常见问题排查与环境部署实录6.1 前后端联调最常见的五个报错我在做这个项目的过程中最浪费时间的就是前后端联调阶段的报错。把高频问题整理成一个速查表遇到问题直接对照排查报错现象根本原因解决方案前端请求404后端接口路径和前端请求路径不一致检查Controller的RequestMapping和前端api文件的URL拼接注意是否遗漏了/api前缀后端返回415前端没有设置Content-Type: application/json在Axios封装的post请求中明确指定headers: {Content-Type: application/json}跨域报错后端没有配置CORS或配置了addAllowedOrigin(*)却带了credentials改用addAllowedOriginPattern(*)并确认allowCredentials(true)中文乱码数据库连接串缺少characterEncodingutf8URL中加上characterEncodingutf8和useUnicodetrue数据查出来为null数据库字段下划线和Java驼峰没有映射打开MyBatis的mapUnderscoreToCamelCase还有一个非常隐蔽的问题部署到服务器后前端页面白屏打开控制台发现加载JS资源404。这是因为Vue默认的createWebHistory模式在Nginx下需要额外的配置把所有路由都重定向到index.htmllocation / { try_files $uri $uri/ /index.html; }如果你不想在Nginx配置上花时间可以直接用createWebHashHistory模式URL里带个#号丑一点但胜在省事。6.2 论文写作的核心思路与结构安排论文其实是整个毕设最花时间的部分建议边写代码边写论文不要等到代码做完了再临时抱佛脚。针对这个题目的论文我建议结构安排如下第一章绪论写研究背景临沂旅游信息化现状、国内外研究现状国外旅游信息系统、国内智慧旅游平台、研究内容与方法。这一章要写出为什么做。第二章相关技术介绍SSM框架介绍、Vue框架介绍、前后端分离架构介绍、MySQL数据库介绍。这一章每个技术写清楚是什么为什么选它配上简单的架构图但不要整段贴代码。第三章需求分析从功能性需求、非功能性需求、可行性分析三个层面来写。功能性需求细化到用例图描述的角色操作非功能性需求写性能页面响应时间小于2秒、安全性密码加密、权限控制、兼容性适配主流浏览器。第四章系统设计总体架构设计B/S架构、前后端分离架构、功能模块设计各模块的功能清单、数据库设计ER图、表结构说明。这是论文里图表最多的一章建议画清楚架构图、功能模块图、E-R图。第五章系统实现按功能模块逐一实现和页面截图每个模块包含实现思路、核心代码、页面展示。这一章截图一定要多每个功能至少配两张截图页面截图在答辩中是加分利器。第六章系统测试功能测试用例表、测试结果分析、性能测试结果。这里重点写测试用例的设计思路正常场景、异常场景、边界值。论文的参考文献建议不少于15篇其中期刊论文和毕业论文参考文献要占一半以上纯网络资源太多会显得不够严谨。6.3 项目部署全流程从本地到云服务器最后说部署。这个项目部署其实也不复杂分三步第一步后端打包成WAR包用IDEA的Maven面板执行clean package。如果用的是spring-mvc传统工程需要打成WAR包部署到Tomcat的webapps目录或者用外部Tomcat指定目录部署。第二步前端执行npm run build生成dist目录。把dist目录下的文件上传到Nginx的html/目录或者直接上传到服务器用nginx托管。第三步在Nginx里配置反向代理把/api开头的请求转发到Tomcat的8080端口server { listen 80; server_name your-domain.com; root /usr/share/nginx/html; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080/api/; 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 / { try_files $uri $uri/ /index.html; } }这里有一个容易踩坑的细节proxy_pass http://127.0.0.1:8080/api/;后面的/api/一定要保留否则会把/api前缀吃掉请求会转发到http://127.0.0.1:8080/scenic/list而后端接口的RequestMapping(/api/scenic)就找不到路由了。很多同学部署后接口全404十有八九是这里丢了一个api路径。数据库迁移时注意先用mysqldump导出本地数据库再到服务器上导入。如果数据量不大也可以直接用Navicat的数据同步功能更省事。服务器上MySQL的账号密码和本地不一样时记得改applicationContext.xml里的连接配置然后重新打包。7. 项目测试方案与效果验证7.1 功能测试用例怎么写才专业很多同学到了测试章节就水过去随手列几个点一下能用就完了。实际上测试章节是你论文里最好展示严谨性的地方也最省力——因为功能测试不需要写代码只要按用例跑一遍就行。我建议按功能模块写测试用例表每个模块至少覆盖正常流程、异常流程和边界值三个维度用例编号功能模块测试步骤预期结果实际结果TC-01用户登录输入正确的用户名密码登录成功跳转首页通过TC-02用户登录输入错误的密码提示用户名或密码错误通过TC-03用户注册输入已存在的用户名提示用户名已存在通过TC-04景点搜索关键词为空展示全部景点通过TC-05景点搜索关键词为蒙山展示包含蒙山的景点通过TC-06线路推荐查看一条线路详情展示3条关联线路通过TC-07提交咨询未登录直接提交前端跳转登录页通过TC-08管理员回复回复内容为空提示回复内容不能为空通过TC-09分页查询第1页每页5条展示5条记录且总页数正确通过TC-10并发访问同一时刻100个请求系统稳定无报错通过这十来个用例跑下来测试章节的内容就充实了。注意引用Postman接口测试和JMeter压力测试来做测试工具介绍前者测接口正确性后者测并发性能这两个工具都能截图截图放论文里又充实又专业。7.2 性能优化从响应速度到体验细节虽然毕设不要求达到生产级性能但能做到几点优化在答辩时就能成为加分亮点数据库层面的索引优化。景点表经常按status和view_count查询建议给这两个字段建联合索引。用户登录时按username查询用户名要建唯一索引。咨询表按user_id和status查询建普通索引即可。建索引的SQL在论文的数据库设计部分写上一段体现你考虑到了查询效率。ALTER TABLE t_scenic ADD INDEX idx_status_view (status, view_count); ALTER TABLE t_user ADD UNIQUE KEY uk_username (username); ALTER TABLE t_consult ADD INDEX idx_user_status (user_id, status);前端图片懒加载。景点列表页通常有大量图片如果一次性加载全部会拖慢首屏。用Element Plus的el-image组件自带懒加载属性或者用Vue的v-lazy指令只让视口内的图片加载滚动到哪加载到哪效果非常明显。页面响应时间优化。在后端做一个简单的API耗时日志拦截器或者直接用Spring的HandlerInterceptor记录每个接口的执行时间性能瓶颈一眼就能看出来。答辩时你可以说系统通过懒加载和分页查询将景点列表页响应时间控制在200ms以内这比空谈系统运行流畅有说服力得多。8. 个人实操体会与避坑经验做这个项目我前后花了大概三周时间第一周搭框架和写后端第二周写前端页面和联调第三周补论文和测试。整个过程最有价值的体会是做毕设的核心不是把功能做出来而是把每一步为什么这么做想明白。代码可以抄但答辩时老师问的问题都是为什么你想不清楚就答不上来。分享几个我踩过的、也是你们大概率会遇到的坑第一个坑是MyBatis的foreach批量插入的语法问题。如果管理员要批量添加景点foreach标签里collection参数名的对应关系容易搞错。如果Mapper接口的入参是ListSceniccollection要写成list如果是Param(scenicList)注解指定的collection要写成scenicList。写错了SQL会报无效的列类型排查起来很费劲。第二个坑是Vue3的响应式数据丢失问题。用reactive定义对象后直接给整个对象重新赋值页面不会更新。你需要在定义时用ref或者用Object.assign方式更新。很多人写Vue3时用的是Vue2的习惯这里特别容易翻车。第三个坑是Element Plus组件的按需引入。如果全量引入虽然省事但打包体积动辄好几MB部署到云服务器上首屏加载会很慢。建议在main.js里用app.use(ElementPlus)全量引入省心演示环境根本不在乎那点体积按需引入反而是给自己增加工作量。第四个坑是Tomcat版本和JDK版本的兼容问题。SSM项目建议用JDK8 Tomcat9的组合稳定且兼容性好。如果你用JDK17很多旧版框架的反射机制会直接报错比如Spring 5.3以下版本在JDK17上运行就会有IllegalAccessError。实测下来JDK8Tomcat9MySQL8是SSM项目最稳的组合。最后再说一个小技巧在整个项目开发过程中一定要用Git管理代码。不要等做完了再备份每完成一个模块就提交一次配合远程仓库比如Gitee或GitHub私有仓库这样哪天代码改坏了也能一键回滚到之前能跑的版本。这个习惯在答辩前的冲刺阶段能救你命我当时就是靠回滚旧版本才在临提交前恢复了被改坏的分页逻辑。如果你正在做这个题目照着上面的思路一步步来系统能跑通、论文能写满、答辩能答上这三个目标就都能实现。整个项目做完你对SSM和Vue的理解深度绝对比单纯照着视频敲一遍代码要扎实得多。 SSM+Vue3前后端分离旅游咨询系统毕设开发全指南
1. 项目概述与核心需求解析1.1 这个毕设到底做了什么如果你正在准备2026年的毕业设计又恰好选了旅游咨询系统这类题目那这套SSMVue的临沂旅游咨询系统方案值得你仔细看完。先说人话这个系统本质上就是一个面向游客的旅游信息服务平台只不过把服务对象锁定在了临沂这座城市的旅游场景上。游客可以浏览景点介绍、查看旅游线路、了解酒店信息、查看攻略文章、提交在线咨询管理员则可以在后台管理景点、线路、酒店、攻略、留言等所有数据。整个系统采用前后端分离架构后端用SSMSpring SpringMVC MyBatis提供数据接口前端用Vue框架做页面交互和数据渲染。为什么这个题目值得做因为旅游咨询系统这类题目在毕业设计里属于经典中的经典需求明确、功能边界清晰、技术栈通用。但它又不是那种毫无亮点的增删改查全家桶——如果你把地图集成、线路推荐、视频预览这些功能加进去整个系统的技术含量一下就上来了论文也有东西可写。这套方案在2026年的毕设中依然能打原因很简单SSM依然是很多高校Java课程的主流框架Vue在前端领域更是长期占据统治地位选题不偏门、技术不冷门、答辩不冒险。1.2 为什么选择SSMVue这套组合很多同学在选题之后纠结的第一件事就是技术栈到底怎么定用Spring Boot还是SSM用Vue2还是Vue3用不用分离我给你的建议是如果你是2026年毕业SSMVue3前后端分离是最稳的方案。先说说SSM为什么不过时。Spring Boot确实比SSM配置起来省事但很多高校的Java课程体系里SSM仍然是最先系统讲解的内容导师也最熟悉这套框架的提问套路。更重要的是SSM能让你把Spring的IOC、AOPSpringMVC的请求流转MyBatis的SQL映射机制这些核心原理都展示出来答辩时老师问到底层机制你都能接得住。用Spring Boot虽然开发效率高但很多学生只知其然不知其所以然反而容易被问住。Vue这边建议直接用Vue3 Vite Element Plus的组合。Vue3的Composition API写起来比Vue2的Options API更符合工程化思维而且Vite的启动速度比Webpack快了一个量级开发体验好很多。更重要的是Vue3现在已经是主流面试和答辩时聊Vue3的响应式原理、组合式函数这些话题比聊Vue2更有优势。前后端分离这个选择看起来是给自己增加工作量需要处理跨域、联调但实际上对毕设是加分项。一方面它更接近企业真实开发模式论文里可以专门写一章系统架构设计来说明分离架构的优势另一方面前后端分离后你可以分别部署、分别测试出现问题时定位也更方便后期扩展也轻松。我见过不少做前后端不分离的老项目页面里嵌着一堆JSP和JSTL标签改个样式都费劲答辩演示翻车率极高。这个题目下分离是明确的正确方向。# 前端工程初始化Vue3 Vite npm create vitelatest linyi-travel-web -- --template vue # 安装路由、状态管理、UI组件库、HTTP库 npm install vue-router4 pinia axios element-plus element-plus/icons-vue这套组合装完之后你的项目骨架就搭好了一半。后面要做的就是把旅游资源管理的业务逻辑一层层填进去。2. 系统设计与数据建模2.1 功能模块拆解从游客视角到管理员视角做系统设计的第一步不是急着写代码而是把角色和功能对应起来。临沂旅游咨询系统的用户角色分为三类游客访客、注册用户、管理员。游客能做什么浏览景点列表、查看景点详情、搜索景点、查看旅游线路、阅读旅游攻略、查看酒店信息。游客也可以提交咨询留言但为了管理方便通常建议注册登录后才能留言不然垃圾留言没法追溯。注册用户在游客的基础上多了个人中心相关的操作修改个人信息、查看自己提交的咨询记录、收藏感兴趣的景点、对景点发表评论、发起线路定制需求。管理员这边就是标准的内容管理后台景点信息管理增删改查、上下架、图片上传、旅游线路管理、酒店信息管理、攻略文章管理、用户管理、留言回复管理、数据统计。这里要特别注意管理员的操作一定要有权限控制不能普通用户也访问后台接口。所以后端要写一个简单的拦截器校验请求头里携带的token对应的用户角色。功能梳理清楚之后就形成了下面这个模块清单模块子功能前端页面后端接口用户模块注册、登录、个人信息登录页、注册页、个人中心/api/user/register, /api/user/login景点模块景点列表、详情、搜索景点列表页、详情页/api/scenic/list, /api/scenic/detail线路模块线路列表、详情线路列表页、详情页/api/route/list, /api/route/detail酒店模块酒店列表、详情酒店列表页、详情页/api/hotel/list, /api/hotel/detail攻略模块攻略列表、详情攻略列表页、详情页/api/strategy/list, /api/strategy/detail咨询模块提交咨询、查看回复咨询页面、咨询记录/api/consult/submit, /api/consult/list后台管理各模块数据管理后台管理页面/api/admin/**2.2 数据库设计思路六张核心表如何建数据库设计是论文里必须重点写的内容也是答辩时老师一定会问的部分。这个系统的核心表我建议做成六张用户表t_user用户ID、用户名、密码加密存储、昵称、头像URL、手机号、邮箱、角色1管理员/0普通用户、注册时间。景点表t_scenic景点ID、名称、简介、详细描述、图片URL可多个、门票价格、开放时间、建议游玩时长、所在区域、经纬度、评分、浏览量、状态1上架/0下架。线路表t_route线路ID、名称、路线描述、天数、价格、包含景点IDs用逗号分隔、封面图、发布时间、状态。酒店表t_hotel酒店ID、名称、地址、简介、星级、最低价格、图片URL、联系电话、状态。攻略表t_strategy攻略ID、标题、封面图、内容富文本、作者、发布时间、浏览量、状态。咨询表t_consult咨询ID、用户ID、咨询内容、回复内容、咨询时间、回复时间、状态0待回复/1已回复。这六张表的关联关系比较简单主要就是线路表通过景点ID集合和景点表产生弱关联咨询表通过用户ID和用户表关联。为什么要用逗号分隔而不是建中间表因为线路关联的景点是固定的展示需求不会做多对多查询用逗号分隔反而简单查询时在Java层拆一下字符串就行。不过论文里可以写一句考虑到线路与景点之间的关联为固定配置且不需要按景点反查线路因此采用冗余存储方式避免不必要的复杂关联查询。建表语句要特别注意几点时间字段统一用datetime类型价格字段用decimal(10,2)文本描述用text类型所有表都要加create_time和update_time字段方便后期排查数据问题状态字段用tinyint并用注释说明含义。字符集建议用utf8mb4而不是utf8因为utf8在MySQL里存不了emoji表情游客评论里如果带了表情符号utf8会直接报错这个问题我在实际部署时踩过一次后来把所有表都改成utf8mb4才解决。3. 后端SSM框架搭建与核心实现3.1 工程结构与Maven依赖后端工程建议使用Maven构建的标准三层结构分包清晰是答辩时的加分项com.linyi.travel ├── controller // 控制层接收请求参数并返回JSON ├── service // 业务逻辑层业务规则的实现 │ └── impl // 业务逻辑实现类 ├── mapper // MyBatis数据访问层接口 ├── entity // 实体类对应数据库表 ├── dto // 数据传输对象接收前端参数、返回封装结果 ├── config // 配置类拦截器、跨域配置等 ├── interceptor // 登录拦截器 ├── util // 工具类JWT工具、MD5加密等 └── common // 通用返回结果封装pom.xml里最关键的依赖就那几个spring-webmvc、mybatis、mybatis-spring、druid连接池、mysql-connector-java、jackson-databindJSON序列化、jwt登录token工具。注意这里不建议用spring-boot-starter-web因为SSM项目的核心价值就在于手动整合Spring和SpringMVC的过程这个过程在论文里可以写整整一章用Boot全自动配置反而没什么可写的。properties spring.version5.3.30/spring.version /properties dependencies !-- Spring核心 -- dependency groupIdorg.springframework/groupId artifactIdspring-context/artifactId version${spring.version}/version /dependency !-- SpringMVC -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version${spring.version}/version /dependency !-- MyBatis -- dependency groupIdorg.mybatis/groupId artifactIdmybatis/artifactId version3.5.13/version /dependency dependency groupIdorg.mybatis/groupId artifactIdmybatis-spring/artifactId version2.1.0/version /dependency !-- 数据库连接池 -- dependency groupIdcom.alibaba/groupId artifactIddruid/artifactId version1.2.20/version /dependency !-- MySQL驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version /dependency !-- JSON序列化 -- dependency groupIdcom.fasterxml.jackson.core/groupId artifactIdjackson-databind/artifactId version2.15.2/version /dependency !-- JWT -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency /dependenciesMaven依赖的版本号要锁定好我见过太多同学用最新版Spring然后跟框架整合时包冲突报错报得怀疑人生。上面这几个版本号都是我自己测过稳定能跑的版本组合直接抄作业就行。3.2 Spring SpringMVC MyBatis整合的三大配置文件SSM项目最劝退的就是那三份配置文件但只要理解了每份文件的作用配置起来其实就是套模板。applicationContext.xmlSpring主配置负责数据源、事务管理、MyBatis整合。这里要配置DruidDataSource连接池扫描mapper接口包让MyBatis自动生成代理实现类同时配置SqlSessionFactoryBean指定mapper XML文件的位置。context:component-scan base-packagecom.linyi.travel !-- 排除Controller注解这些交给SpringMVC配置管理 -- context:exclude-filter typeannotation expressionorg.springframework.stereotype.Controller/ /context:component-scan !-- 数据源配置 -- bean iddataSource classcom.alibaba.druid.pool.DruidDataSource property namedriverClassName valuecom.mysql.cj.jdbc.Driver/ property nameurl valuejdbc:mysql://localhost:3306/linyi_travel?useUnicodetrueamp;characterEncodingutf8amp;serverTimezoneAsia/Shanghai/ property nameusername valueroot/ property namepassword valueyourpassword/ /bean !-- MyBatis整合 -- bean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource/ property namemapperLocations valueclasspath:mapper/*.xml/ property nametypeAliasesPackage valuecom.linyi.travel.entity/ /bean bean classorg.mybatis.spring.mapper.MapperScannerConfigurer property namebasePackage valuecom.linyi.travel.mapper/ /beanspring-mvc.xmlSpringMVC配置负责注解驱动、静态资源放行、视图解析器。这个项目是前后端分离所以接口统一返回JSON不配JSP视图解析器用RestController或者ResponseBody直接序列化对象。context:component-scan base-packagecom.linyi.travel.controller/ mvc:annotation-driven/ mvc:default-servlet-handler/ !-- 文件上传解析器 -- bean idmultipartResolver classorg.springframework.web.multipart.commons.CommonsMultipartResolver property namedefaultEncoding valueUTF-8/ property namemaxUploadSize value5242880/ /bean注意mvc:default-servlet-handler/这行它负责把前端静态资源请求交给容器默认的Servlet处理不然部署到Tomcat后访问前端页面会404。mybatis-config.xmlMyBatis全局配置这个文件一般比较简单主要配置驼峰映射和日志configuration settings !-- 数据库字段下划线自动映射为Java驼峰属性 -- setting namemapUnderscoreToCamelCase valuetrue/ !-- 打印SQL日志开发阶段非常有帮助 -- setting namelogImpl valueSTDOUT_LOGGING/ /settings /configurationmapUnderscoreToCamelCase这个配置强烈建议打开它能把scenic_name自动映射成scenicName省掉大量resultMap手写映射的体力活。有些同学不设置这个结果MyBatis查询出来的对象全是null排查半天找不到原因。3.3 核心接口设计与统一返回格式接口设计这块我建议所有的后端接口统一返回一个Result对象public class ResultT { private Integer code; // 200成功500失败401未登录 private String message; // 提示信息 private T data; // 具体数据 public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(500); result.setMessage(message); return result; } }所有Controller都返回这个统一格式前端Axios拦截器只需要判断一次code就能统一处理成功和异常的情况不用每个页面写一堆重复的逻辑。举个例子景点列表的Controller长这样RestController RequestMapping(/api/scenic) public class ScenicController { Autowired private ScenicService scenicService; GetMapping(/list) public ResultPageResultScenic list( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { PageResultScenic page scenicService.queryPage(pageNum, pageSize, keyword); return Result.success(page); } GetMapping(/detail/{id}) public ResultScenic detail(PathVariable Integer id) { return Result.success(scenicService.getById(id)); } }这里很多人会问分页怎么做最简单的方式就是MyBatis的PageHelper插件在pom里加一个依赖然后在查询前调用一行代码PageHelper.startPage(pageNum, pageSize); ListScenic list scenicMapper.selectList(keyword); PageInfoScenic pageInfo new PageInfo(list);PageHelper会自动拦截下一条SQL自动拼接LIMIT语句同时把总数、页数都封装到PageInfo里非常省事。不过要注意PageHelper.startPage只对紧随其后的第一条SQL生效如果你在调用点和SQL执行之间插入其他查询分页就会错乱这是一个很经典的坑。4. 前端Vue框架搭建与后端联调4.1 Vue3工程结构与路由设计前端工程我通常建议按这样一个结构组织src ├── api // 接口请求封装 │ ├── scenic.js │ ├── user.js │ └── ... ├── assets // 静态资源 ├── components // 公共组件 │ ├── HeaderNav.vue │ ├── FooterBar.vue │ └── ... ├── router // 路由配置 │ └── index.js ├── store // 全局状态管理 │ └── user.js ├── views // 页面组件 │ ├── home │ ├── scenic │ ├── route │ ├── hotel │ ├── strategy │ ├── user │ └── admin └── App.vue路由设计上我是用懒加载的方式导入页面组件这样首屏加载速度会好看很多import { createRouter, createWebHistory } from vue-router const routes [ { path: /, name: Home, component: () import(/views/home/HomePage.vue), meta: { title: 首页 } }, { path: /scenic, name: ScenicList, component: () import(/views/scenic/ScenicList.vue), meta: { title: 景点列表 } }, { path: /scenic/:id, name: ScenicDetail, component: () import(/views/scenic/ScenicDetail.vue), meta: { title: 景点详情 } }, { path: /login, name: Login, component: () import(/views/user/LoginPage.vue), meta: { title: 登录 } }, { path: /admin, name: AdminLayout, component: () import(/views/admin/AdminLayout.vue), meta: { title: 后台管理, requiresAuth: true, role: admin }, children: [ { path: scenic, component: () import(/views/admin/ScenicManage.vue) }, { path: route, component: () import(/views/admin/RouteManage.vue) }, { path: consult, component: () import(/views/admin/ConsultManage.vue) } ] } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫登录检查 管理员权限检查 router.beforeEach((to, from, next) { const token localStorage.getItem(token) const userInfo JSON.parse(localStorage.getItem(userInfo) || {}) if (to.meta.requiresAuth !token) { next({ path: /login, query: { redirect: to.fullPath } }) } else if (to.meta.role admin userInfo.role ! 1) { next({ path: / }) } else { next() } }) export default router路由守卫这段代码是毕设演示的重头戏之一老师必定会问未登录用户能不能直接访问后台管理页面你直接说到全局前置守卫拦截页面会跳转到登录页然后现场演示一遍这个印象分就拿到了。4.2 Axios请求封装与跨域问题处理前端和后端是两个不同的端口开发时必然遇到跨域问题。处理跨域有几个方案最省事的是后端加一个CorsFilter全局配置Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }这里要特别注意addAllowedOriginPattern(*)和addAllowedOrigin(*)的区别。addAllowedOrigin(*)配合allowCredentials(true)在一些新版本Spring里会报错因为浏览器不允许带凭证的跨域请求使用通配符来源用addAllowedOriginPattern才是正确写法。前端这边把Axios实例封装到一个模块里统一设置baseURL和请求拦截器import axios from axios import { ElMessage } from element-plus import router from /router const request axios.create({ baseURL: http://localhost:8080/api, timeout: 10000 }) // 请求拦截器自动携带token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization token } return config }) // 响应拦截器统一处理错误 request.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.removeItem(token) router.push(/login) return Promise.reject(new Error(未登录)) } if (res.code ! 200) { ElMessage.error(res.message) return Promise.reject(new Error(res.message)) } return res }, error { ElMessage.error(网络异常请稍后重试) return Promise.reject(error) } ) export default request注意baseURL带上了/api前缀这意味着后端Controller的所有请求路径都以/api开头这样前后端路径约定一目了然也方便在Nginx里做反向代理时统一转发。4.3 视频预览功能的实现思路热搜词里有vue播放m3u8这个在旅游系统中用得上的场景是景点宣传视频、攻略视频。m3u8是一种流媒体播放列表格式浏览器原生video标签不能直接播放需要用hls.js这个库。如果景点视频是m3u8格式的在Vue里播放的核心代码很简单import Hls from hls.js // 在mounted中初始化 if (Hls.isSupported()) { const hls new Hls() hls.loadSource(this.videoUrl) hls.attachMedia(this.$refs.video) hls.on(Hls.Events.MANIFEST_PARSED, () { this.$refs.video.play() }) }这里this.videoUrl是后端接口返回的视频地址可以是https://example.com/video/spot.mp4.m3u8这样的完整路径。使用Hls.js要注意一点视频URL必须和前端页面同源否则会有跨域问题这时需要让后端在接口响应头里加上CORS配置或者使用一个代理服务器来做转发。毕设里的视频文件一般放在本地静态目录或者OSS对象存储上。如果你用Nginx部署可以直接把视频目录映射到一个公开访问的路径然后后端数据库里存完整的访问URL前端请求接口拿URL直接拼到Hls里就行。5. 核心功能模块的实现细节与代码逻辑5.1 景点搜索与推荐从SQL到前端交互景点搜索是旅游系统的核心功能这里不是简单地写一个SELECT * FROM t_scenic WHERE name LIKE %关键词%就完事了。要实现一个体验还不错的搜索至少要考虑三个维度景点名称、景点简介、所在区域。对应的Mapper SQL是select idselectByKeyword resultTypecom.linyi.travel.entity.Scenic SELECT * FROM t_scenic where if testkeyword ! null and keyword ! name LIKE CONCAT(%, #{keyword}, %) OR description LIKE CONCAT(%, #{keyword}, %) OR region LIKE CONCAT(%, #{keyword}, %) /if AND status 1 /where ORDER BY view_count DESC LIMIT #{offset}, #{limit} /select注意这里LIMIT #{offset}, #{limit}是分页参数手动传入因为PageHelper在动态SQL场景下偶尔会有解析问题直接用参数反而更可控。view_count DESC排序实现了最热景点优先这是一种非常基础但实用的推荐逻辑不依赖任何算法但效果直观。前端搜索交互上我建议做一个防抖处理用户输入关键词300毫秒后才发起请求避免频繁请求后端const handleSearch () { clearTimeout(timer) timer setTimeout(() { searchList.value await fetchScenicList(keyword.value) }, 300) }这段防抖代码是面试常考的论文里也值得写一句作为交互优化点。300毫秒是一个体感比较合适的值太快会漏掉输入中间状态太慢会让人感觉卡顿。5.2 旅游线路推荐的小算法线路推荐这个功能在简单项目里就做成管理员手动发布线路列表但在论文里你可以加一个小亮点基于景点关联度的推荐。思路是这样的每条线路都包含了若干景点ID用一个spot_ids字段存逗号分隔的字符串。当用户浏览某条线路详情时接口查询所有包含相同景点的其他线路按重合景点数量降序返回public ListRoute recommendRoutes(Integer routeId) { Route current routeMapper.selectById(routeId); // 拆分当前线路的景点ID集合 ListInteger currentSpotIds Arrays.stream(current.getSpotIds().split(,)) .map(Integer::parseInt).collect(Collectors.toList()); // 查询所有其他线路 ListRoute allRoutes routeMapper.selectStatusList(); // 计算每个线路与当前线路的景点重合数量 return allRoutes.stream() .filter(r - !r.getId().equals(routeId)) .map(r - { ListInteger rSpotIds Arrays.stream(r.getSpotIds().split(,)) .map(Integer::parseInt).collect(Collectors.toList()); long overlap rSpotIds.stream() .filter(currentSpotIds::contains).count(); r.setOverlapCount((int) overlap); return r; }) .filter(r - r.getOverlapCount() 0) .sorted((a, b) - b.getOverlapCount() - a.getOverlapCount()) .limit(3) .collect(Collectors.toList()); }这段代码逻辑简单清晰但比直接查最近的三条线路有说服力得多。你在论文的需求分析里写一句系统基于景点重合度计算线路相似度为用户推荐关联线路然后给出这段实现代码老师看了会认为你确实在业务逻辑上动了脑筋。5.3 咨询模块与留言回复的权限控制咨询模块是旅游咨询系统的门面功能也是体现你权限设计能力的地方。我建议的流程是注册用户登录后在景点详情页点击在线咨询弹出对话框填写咨询内容。提交时后端校验token对应的用户是否存在然后写入咨询表状态置为0待回复。管理员在后台的咨询管理页面看到待回复列表点击回复填写回复内容状态置为1已回复。用户下次登录后在个人中心我的咨询页面看到回复。后端提交咨询的接口需要先拿到当前登录用户这里用JWT工具解析请求头中的tokenPostMapping(/submit) public ResultVoid submit(RequestBody ConsultDTO dto, RequestHeader(Authorization) String token) { Integer userId JwtUtil.parseToken(token).get(userId, Integer.class); Consult consult new Consult(); consult.setUserId(userId); consult.setContent(dto.getContent()); consult.setStatus(0); consultMapper.insert(consult); return Result.success(null); }JWT生成和解析的工具类建议自己写一遍虽然网上能抄但答辩时老师问token里都放什么内容过期时间怎么设置你答不上来就尴尬了。核心逻辑就是HS256签名算法payload里放userId和过期时间解析时先验证签名再取过期时间。public class JwtUtil { private static final String SECRET_KEY linyi-travel-secret-key; private static final long EXPIRE_TIME 7 * 24 * 60 * 60 * 1000; // 7天 public static String generateToken(Integer userId) { return Jwts.builder() .claim(userId, userId) .setExpiration(new Date(System.currentTimeMillis() EXPIRE_TIME)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); } public static Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token) .getBody(); } }这里的SECRET_KEY直接用字符串常量就可以毕设场景下不需要上生产环境的密钥管理。过期时间设为7天合理因为用户不是每天都会登录系统但如果设太短比如2小时用户演示时突然token过期体验就很糟。6. 常见问题排查与环境部署实录6.1 前后端联调最常见的五个报错我在做这个项目的过程中最浪费时间的就是前后端联调阶段的报错。把高频问题整理成一个速查表遇到问题直接对照排查报错现象根本原因解决方案前端请求404后端接口路径和前端请求路径不一致检查Controller的RequestMapping和前端api文件的URL拼接注意是否遗漏了/api前缀后端返回415前端没有设置Content-Type: application/json在Axios封装的post请求中明确指定headers: {Content-Type: application/json}跨域报错后端没有配置CORS或配置了addAllowedOrigin(*)却带了credentials改用addAllowedOriginPattern(*)并确认allowCredentials(true)中文乱码数据库连接串缺少characterEncodingutf8URL中加上characterEncodingutf8和useUnicodetrue数据查出来为null数据库字段下划线和Java驼峰没有映射打开MyBatis的mapUnderscoreToCamelCase还有一个非常隐蔽的问题部署到服务器后前端页面白屏打开控制台发现加载JS资源404。这是因为Vue默认的createWebHistory模式在Nginx下需要额外的配置把所有路由都重定向到index.htmllocation / { try_files $uri $uri/ /index.html; }如果你不想在Nginx配置上花时间可以直接用createWebHashHistory模式URL里带个#号丑一点但胜在省事。6.2 论文写作的核心思路与结构安排论文其实是整个毕设最花时间的部分建议边写代码边写论文不要等到代码做完了再临时抱佛脚。针对这个题目的论文我建议结构安排如下第一章绪论写研究背景临沂旅游信息化现状、国内外研究现状国外旅游信息系统、国内智慧旅游平台、研究内容与方法。这一章要写出为什么做。第二章相关技术介绍SSM框架介绍、Vue框架介绍、前后端分离架构介绍、MySQL数据库介绍。这一章每个技术写清楚是什么为什么选它配上简单的架构图但不要整段贴代码。第三章需求分析从功能性需求、非功能性需求、可行性分析三个层面来写。功能性需求细化到用例图描述的角色操作非功能性需求写性能页面响应时间小于2秒、安全性密码加密、权限控制、兼容性适配主流浏览器。第四章系统设计总体架构设计B/S架构、前后端分离架构、功能模块设计各模块的功能清单、数据库设计ER图、表结构说明。这是论文里图表最多的一章建议画清楚架构图、功能模块图、E-R图。第五章系统实现按功能模块逐一实现和页面截图每个模块包含实现思路、核心代码、页面展示。这一章截图一定要多每个功能至少配两张截图页面截图在答辩中是加分利器。第六章系统测试功能测试用例表、测试结果分析、性能测试结果。这里重点写测试用例的设计思路正常场景、异常场景、边界值。论文的参考文献建议不少于15篇其中期刊论文和毕业论文参考文献要占一半以上纯网络资源太多会显得不够严谨。6.3 项目部署全流程从本地到云服务器最后说部署。这个项目部署其实也不复杂分三步第一步后端打包成WAR包用IDEA的Maven面板执行clean package。如果用的是spring-mvc传统工程需要打成WAR包部署到Tomcat的webapps目录或者用外部Tomcat指定目录部署。第二步前端执行npm run build生成dist目录。把dist目录下的文件上传到Nginx的html/目录或者直接上传到服务器用nginx托管。第三步在Nginx里配置反向代理把/api开头的请求转发到Tomcat的8080端口server { listen 80; server_name your-domain.com; root /usr/share/nginx/html; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080/api/; 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 / { try_files $uri $uri/ /index.html; } }这里有一个容易踩坑的细节proxy_pass http://127.0.0.1:8080/api/;后面的/api/一定要保留否则会把/api前缀吃掉请求会转发到http://127.0.0.1:8080/scenic/list而后端接口的RequestMapping(/api/scenic)就找不到路由了。很多同学部署后接口全404十有八九是这里丢了一个api路径。数据库迁移时注意先用mysqldump导出本地数据库再到服务器上导入。如果数据量不大也可以直接用Navicat的数据同步功能更省事。服务器上MySQL的账号密码和本地不一样时记得改applicationContext.xml里的连接配置然后重新打包。7. 项目测试方案与效果验证7.1 功能测试用例怎么写才专业很多同学到了测试章节就水过去随手列几个点一下能用就完了。实际上测试章节是你论文里最好展示严谨性的地方也最省力——因为功能测试不需要写代码只要按用例跑一遍就行。我建议按功能模块写测试用例表每个模块至少覆盖正常流程、异常流程和边界值三个维度用例编号功能模块测试步骤预期结果实际结果TC-01用户登录输入正确的用户名密码登录成功跳转首页通过TC-02用户登录输入错误的密码提示用户名或密码错误通过TC-03用户注册输入已存在的用户名提示用户名已存在通过TC-04景点搜索关键词为空展示全部景点通过TC-05景点搜索关键词为蒙山展示包含蒙山的景点通过TC-06线路推荐查看一条线路详情展示3条关联线路通过TC-07提交咨询未登录直接提交前端跳转登录页通过TC-08管理员回复回复内容为空提示回复内容不能为空通过TC-09分页查询第1页每页5条展示5条记录且总页数正确通过TC-10并发访问同一时刻100个请求系统稳定无报错通过这十来个用例跑下来测试章节的内容就充实了。注意引用Postman接口测试和JMeter压力测试来做测试工具介绍前者测接口正确性后者测并发性能这两个工具都能截图截图放论文里又充实又专业。7.2 性能优化从响应速度到体验细节虽然毕设不要求达到生产级性能但能做到几点优化在答辩时就能成为加分亮点数据库层面的索引优化。景点表经常按status和view_count查询建议给这两个字段建联合索引。用户登录时按username查询用户名要建唯一索引。咨询表按user_id和status查询建普通索引即可。建索引的SQL在论文的数据库设计部分写上一段体现你考虑到了查询效率。ALTER TABLE t_scenic ADD INDEX idx_status_view (status, view_count); ALTER TABLE t_user ADD UNIQUE KEY uk_username (username); ALTER TABLE t_consult ADD INDEX idx_user_status (user_id, status);前端图片懒加载。景点列表页通常有大量图片如果一次性加载全部会拖慢首屏。用Element Plus的el-image组件自带懒加载属性或者用Vue的v-lazy指令只让视口内的图片加载滚动到哪加载到哪效果非常明显。页面响应时间优化。在后端做一个简单的API耗时日志拦截器或者直接用Spring的HandlerInterceptor记录每个接口的执行时间性能瓶颈一眼就能看出来。答辩时你可以说系统通过懒加载和分页查询将景点列表页响应时间控制在200ms以内这比空谈系统运行流畅有说服力得多。8. 个人实操体会与避坑经验做这个项目我前后花了大概三周时间第一周搭框架和写后端第二周写前端页面和联调第三周补论文和测试。整个过程最有价值的体会是做毕设的核心不是把功能做出来而是把每一步为什么这么做想明白。代码可以抄但答辩时老师问的问题都是为什么你想不清楚就答不上来。分享几个我踩过的、也是你们大概率会遇到的坑第一个坑是MyBatis的foreach批量插入的语法问题。如果管理员要批量添加景点foreach标签里collection参数名的对应关系容易搞错。如果Mapper接口的入参是ListSceniccollection要写成list如果是Param(scenicList)注解指定的collection要写成scenicList。写错了SQL会报无效的列类型排查起来很费劲。第二个坑是Vue3的响应式数据丢失问题。用reactive定义对象后直接给整个对象重新赋值页面不会更新。你需要在定义时用ref或者用Object.assign方式更新。很多人写Vue3时用的是Vue2的习惯这里特别容易翻车。第三个坑是Element Plus组件的按需引入。如果全量引入虽然省事但打包体积动辄好几MB部署到云服务器上首屏加载会很慢。建议在main.js里用app.use(ElementPlus)全量引入省心演示环境根本不在乎那点体积按需引入反而是给自己增加工作量。第四个坑是Tomcat版本和JDK版本的兼容问题。SSM项目建议用JDK8 Tomcat9的组合稳定且兼容性好。如果你用JDK17很多旧版框架的反射机制会直接报错比如Spring 5.3以下版本在JDK17上运行就会有IllegalAccessError。实测下来JDK8Tomcat9MySQL8是SSM项目最稳的组合。最后再说一个小技巧在整个项目开发过程中一定要用Git管理代码。不要等做完了再备份每完成一个模块就提交一次配合远程仓库比如Gitee或GitHub私有仓库这样哪天代码改坏了也能一键回滚到之前能跑的版本。这个习惯在答辩前的冲刺阶段能救你命我当时就是靠回滚旧版本才在临提交前恢复了被改坏的分页逻辑。如果你正在做这个题目照着上面的思路一步步来系统能跑通、论文能写满、答辩能答上这三个目标就都能实现。整个项目做完你对SSM和Vue的理解深度绝对比单纯照着视频敲一遍代码要扎实得多。