1. 项目概述一套面向喀什旅游场景的完整前后端分离系统做web开发这么多年前后端分离的项目接触了不少但真正把一个旅游网站从零到一完整落地还要兼顾业务特点和教学价值其实并不多见。这篇要拆解的是一套2025年基于SpringBoot Vue MyBatis MySQL的喀什旅游网站管理系统源码一套正经的课程设计/毕业设计级别的完整项目。之所以说它有代表性是因为它几乎覆盖了Java后端开发最核心的几个关键词SpringBoot的自动配置和启动流程、MyBatis的SQL映射和动态SQL、MySQL的表设计与事务控制以及Vue前端的数据绑定和组件化开发。这套系统主要解决什么问题简单说就是一个面向喀什地区旅游资源的在线展示与管理平台前端面向普通游客提供旅游线路浏览、景点介绍、酒店预订信息查询、旅游攻略阅读等功能后台面向管理员提供线路管理、景点管理、用户管理、订单管理、公告发布等核心操作。整套系统实现了从游客浏览到管理员维护的完整闭环非常适合拿来学习SpringBootVue的项目结构、接口设计与数据库建模思路。什么人适合参考这套源码第一类是正在做Java课程设计的学生特别是需要一套能跑通、能答辩、代码注释完整的项目第二类是刚开始接触前后端分离开发的自学者想看看一个真实的SpringBoot项目是怎么分层、怎么调接口、怎么处理跨域第三类是准备找工作、需要快速积累项目经验的初级开发你可以从这个项目里学到的不是某个酷炫的框架特性而是一整套规范的、可以实际演示的业务系统开发流程。先给一个总览这套系统的技术栈组合是后端使用Spring Boot作为核心框架内置嵌入式Tomcat省去了外置容器的麻烦持久层使用MyBatis通过XML文件管理SQL语句也就是搜索热词里经常出现的“mybatis xml高亮”的编辑体验数据库使用MySQL 5.7或8.0默认字符集utf8mb4兼容性好前端使用Vue 2.x Element UI搭建单页应用配合Vue Router实现路由跳转Axios实现HTTP请求。整体架构清晰没有引入过多的中间件降低了学习和部署成本。2. 整体设计与技术选型思路拆解2.1 为什么是SpringBoot Vue这套组合先聊选型。很多人问做旅游网站这种业务系统用JSP Servlet JDBC不也能做吗答案是可以但那属于老一代技术栈了。现在的课程设计和实际开发SpringBoot Vue已经成了事实标准。SpringBoot的价值在于“约定大于配置”。你不需要像SSM时代那样写大量的XML配置文件不需要手动配置事务管理器、数据源、包扫描一个spring-boot-starter-web依赖加进去自动配置就把大部分工作完成了。这在开发效率上的提升是巨大的特别是对于学生项目解释成本低答辩时也能说清楚“SpringBoot是如何通过自动配置来简化开发的”。Vue这边采用前后端分离前端和后端通过JSON格式的数据交互彻底解决了过去JSP页面和后端代码耦合在一起的问题。前端静态资源可以单独部署到Nginx后端只要对接口负责即可。这不仅是技术上的进步也符合现在企业级开发的普遍模式。2.2 MyBatis与MySQL的组合逻辑持久层选择MyBatis而不是Spring Data JPA核心原因是可控性。MyBatis让你手写SQL这对于景区查询、酒店搜索这类需要精确控制查询逻辑的业务来说非常必要。比如查询旅游线路时需要根据价格、天数、是否推荐等多个条件组合过滤用MyBatis的动态SQL写起来逻辑非常清晰而在JPA中做复杂多条件查询则比较绕。MySQL作为数据库性价比高、部署简单、资料丰富是绝大多数Java后端项目的首选。和Oracle比起来MySQL完全够用和PostgreSQL相比MySQL的生态资料在学生群体中更普及。在喀什旅游网站这个业务场景下数据量撑死几万条MySQL的性能完全不是问题。2.3 项目目录结构与分层思想这套源码的目录结构遵循了标准的SpringBoot分层架构我拆开看了一遍大致是这样com.kashi.travel ├── controller // 控制层接收前端请求返回JSON ├── service // 服务层业务逻辑处理 │ └── impl // 服务实现类 ├── mapper // 持久层接口定义数据库操作方法 ├── entity // 实体类对应数据库表结构 ├── config // 配置类跨域配置、拦截器配置等 ├── common // 公共类统一返回结果、工具类 └── KashiTravelApplication.java // 启动类控制层只负责参数的接收和结果的封装不写业务逻辑业务逻辑集中在Service层数据访问通过Mapper接口定义SQL写在对应的XML文件中。这个分层的核心思想是单一职责——每一层只做自己的事。你问为什么要这么分层因为项目一旦变大不分层必死而且答辩老师最喜欢问的也是这个能讲清楚分层项目就成功了一半。2.4 前端项目结构与Vue的组织方式前端的目录结构同样是标准Vue工程src ├── api // 接口请求封装 ├── assets // 静态资源 ├── components // 公共组件 ├── router // 路由配置 ├── store // 状态管理Vuex ├── views // 页面组件 └── App.vue // 根组件其中api目录单独把所有的axios请求封装成方法页面里只需要调用this.$api.line.getList(params)这样的方法就好。这样做的最大好处是后端接口地址变了你只需要改一个文件而不是满项目找请求代码。这种设计在真实开发中是一个基本素养。3. 数据库设计核心表结构与业务关系解析3.1 数据表总览数据库设计是整个项目的基石。我看过太多课程设计代码写得还行一看数据库表结构就露馅了——字段命名随意、没有外键关系、该做索引的没做。这套源码的表设计算是比较规范的核心表如下表名说明关键字段t_user用户表id, username, password, nickname, phone, avatar, rolet_line旅游线路表id, line_name, line_price, days, start_city, end_city, line_desc, cover_imgt_scenic景点表id, scenic_name, open_time, ticket_price, scenic_desc, scenic_img, addresst_hotel酒店表id, hotel_name, hotel_star, price, address, hotel_desct_order订单表id, order_no, user_id, line_id, order_status, order_time, total_pricet_comment评论表id, user_id, target_type, target_id, content, create_timet_notice公告表id, title, content, create_timet_strategy攻略表id, title, content, author, create_time为什么要有role字段区分用户和管理员因为这套系统不是一个纯展示的静态网站它需要区分游客和管理员的操作权限。游客可以注册登录、下单预订、发表评论管理员登录后进入后台管理上述所有内容。一张表加个role字段比做两套用户体系要简单得多。3.2 订单表状态设计订单表是这套系统的核心业务表。设计的时候订单状态用整数存储而不是字符串0 待支付 1 已支付 2 已取消 3 已完成用数字而不是字符串的好处有三点一是节省存储空间二是比较效率高三是避免中文状态值在前后端交互时出现编码问题。前端拿到数字后通过枚举对象转换为对应的中文文案这是一个非常值得学习的小技巧。很多新手喜欢直接存“待支付”“已支付”字符串看起来直观但后续做统计和条件查询时就难受了。3.3 多表关联与查询字段设计景点、线路、酒店这三张表之间到底是什么关系很多初学者的理解是有误区的。三者的核心关系是一条旅游线路会经过多个景点同时线路信息中可能需要推荐附近的酒店。但考虑到这套系统是课程设计级别没有做复杂的多对多中间表而是让线路表通过line_desc文本字段来描述途径景点和推荐住宿景点和酒店各自维护独立的信息。这是业务简化处理合理不做过度设计。真正用到的外键关系是订单表和用户表的关系t_order.user_id关联t_user.id。查询用户订单时通过这个字段做join这就是多表查询最经典的场景。3.4 索引设计的实际考虑在MySQL表中主键默认建索引这个不用管。需要额外关注的是外键字段的索引ALTER TABLE t_order ADD INDEX idx_user_id (user_id); ALTER TABLE t_order ADD INDEX idx_line_id (line_id); ALTER TABLE t_comment ADD INDEX idx_target (target_type, target_id);为什么要给user_id建索引因为网站最常执行的SQL之一就是“查询某个用户的所有订单”没有索引的话MySQL只能全表扫描数据量大了查询会明显变慢。虽然课程设计数据量小全表扫描也无所谓但记录索引这个习惯是职业素养的表现。数据库的初始化SQL脚本在源码中都包含了包含建库语句、建表语句和一些基础测试数据。拿到源码后直接导入MySQL即可不需要手动建表这一点要注意。4. 核心功能实现与接口设计详解4.1 后端接口设计规范这套系统的接口设计采用了RESTful风格结合统一返回结果类Result所有接口返回的数据格式都是{ code: 200, message: 操作成功, data: { } }code为200表示请求成功500表示服务器异常401表示未认证。这个统一返回格式太重要了如果每个接口返回的JSON结构都不一样前端处理响应时就要写一堆判断逻辑。统一之后前端只需要判断res.code 200即可正常取数据。核心接口清单实际包含大约30个左右我列举一下主要模块模块接口路径方法说明用户/api/user/loginPOST用户登录用户/api/user/registerPOST用户注册线路/api/line/listGET线路分页查询线路/api/line/{id}GET线路详情线路/api/line/savePOST新增/修改线路管理端线路/api/line/delete/{id}DELETE删除线路管理端景点/api/scenic/listGET景点列表酒店/api/hotel/listGET酒店列表订单/api/order/addPOST创建订单订单/api/order/listGET查询当前用户订单公告/api/notice/listGET公告列表4.2 登录接口与密码加密实践登录接口是整套系统的入口几乎所有需要用户身份的功能都要经过它。源码中用户密码的处理方式是MD5加密启动时通过MD5Util工具类加密后存入数据库。这里我要提醒一句MD5并不安全专业的做法是使用BCrypt。但在课程设计中MD5足够而且好解释所以保留项目原设计即可。登录逻辑的伪代码Service public class UserServiceImpl implements UserService { Override public Result login(String username, String password) { QueryWrapperUser wrapper new QueryWrapper(); wrapper.eq(username, username); User user userMapper.selectOne(wrapper); if (user null) { return Result.error(用户不存在); } String md5Password MD5Util.md5(password); if (!md5Password.equals(user.getPassword())) { return Result.error(密码错误); } // 登录成功将用户信息存入session return Result.success(user); } }登录成功之后后端使用Session保存用户登录状态前端通过Cookie保持会话。这里有一个细节前后端分离模式下涉及跨域必须配置allowCredentials(true)允许携带Cookie否则登录状态根本存不住。4.3 MyBatis动态SQL的典型场景MyBatis在这套系统中的最大用武之地是查询条件的动态拼接。以线路查询为例游客端需要支持按照名称模糊搜索、按照价格区间筛选、按照出游天数筛选。如果每个条件都写一个Mapper方法那组合条件会爆炸。用MyBatis的where和if标签动态拼接SQL一份SQL就搞定select idsearchLine parameterTypemap resultTypecom.kashi.travel.entity.Line SELECT * FROM t_line where if testlineName ! null and lineName ! AND line_name LIKE CONCAT(%, #{lineName}, %) /if if testminPrice ! null AND line_price gt; #{minPrice} /if if testmaxPrice ! null AND line_price lt; #{maxPrice} /if if testdays ! null AND days #{days} /if /where ORDER BY create_time DESC /selectXML中为什么用的是gt;而不是因为在XML中和有特殊含义会被解析成标签开头必须用转义字符。这个坑我踩过一次用直接写结果MyBatis解析失败报了一堆莫名其妙语法错误。处理方式有两种第一是用gt;、lt;转义第二是用![CDATA[ ]]包裹整段比较逻辑。项目中采用的是转义方式我认为这是更通用的做法。4.4 文件上传与图片管理旅游网站的景点、线路都需要图片展示。源码中文件上传的实现是常规做法前端通过el-upload组件选择文件以multipart/form-data格式POST到后端后端将文件保存到本地磁盘目录再将磁盘路径拼接成URL存入数据库表。关键代码如下PostMapping(/upload) public Result upload(MultipartFile file) { if (file.isEmpty()) { return Result.error(文件不能为空); } String originalFilename file.getOriginalFilename(); String suffix originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName System.currentTimeMillis() suffix; String realPath D:/upload/ fileName; File dest new File(realPath); file.transferTo(dest); return Result.success(/images/ fileName); }文件名用当前时间戳做主名是为了避免同名文件相互覆盖。这是课程设计中经典且够用的图片上传方案。生产环境当然要上OSS或者MinIO但作为学习项目本地存储能帮你把整个流程链路跑通这个认知很重要。4.5 前端Vue核心页面实现前端部分的核心页面是Home、线路列表、线路详情、景点列表、登录注册、个人中心、管理后台等。这里以线路列表页为例看看Vue组件的组织方式。页面的template部分使用Element UI的卡片组件展示线路列表el-card v-foritem in lineList :keyitem.id classline-card img :srcitem.coverImg classline-img / h3{{ item.lineName }}/h3 p{{ item.lineDesc }}/p span classprice{{ item.linePrice }}/span el-button typeprimary clicktoDetail(item.id)查看详情/el-button /el-cardscript部分的请求调用export default { data() { return { lineList: [] }; }, created() { this.getLineList(); }, methods: { async getLineList() { const res await this.$api.line.getList({}); if (res.code 200) { this.lineList res.data; } }, toDetail(id) { this.$router.push({ path: /line/${id} }); } } };这里有一个vue初学者经常犯的错误在created生命周期中调用接口然后直接this.lineList res.data。问题是res.data是接口的data字段这个没问题问题在于后端返回的结构到底是{code, message, data:[]}还是直接返回数组。如果不和后端约定好前端写接口的时候会非常难受。这也是统一返回结果类Result存在的意义。4.6 路由守卫与登录拦截后台管理页面的路由需要登录且角色为管理员才能访问前端通过beforeEach路由守卫进行拦截router.beforeEach((to, from, next) { const user sessionStorage.getItem(user); if (to.path.startsWith(/admin) !user) { next(/login); } else { next(); } });对应的后端也要做一道拦截。这个项目的做法是写一个LoginInterceptor拦截器在preHandle中判断session中的user是否存在不存在则直接返回未登录状态不放行。为什么要前后端双重拦截因为接口是开放的任何懂技术的人都可以绕过前端直接调用后端接口。前端拦截只是改善用户体验后端拦截才是真正的安全防线。5. 环境配置与项目部署实操记录5.1 本地开发环境搭建很多同学拿到源码第一步就卡在环境上。一套标准的开发环境需要这些组件组件版本建议说明JDK1.8或11SpringBoot 2.x兼容性好Maven3.6管理项目依赖MySQL5.7或8.0存储业务数据Node.js14运行Vue前端工程IDEA2023Java后端开发IDEVSCode最新版前端代码编辑注意JDK版本别上来就用17或者21。SpringBoot 2.x版本默认基于JDK 8编译虽然高版本JDK也能运行但可能出现一些版本兼容怪问题。开发期间老老实实用JDK 8或11最稳。5.2 MySQL数据库导入全流程MySQL的安装教程网上很多这里不再重复只讲拿到该源码如何把数据库跑起来。我实测的流程是这样第一步启动MySQL服务用命令行登录或者直接用Navicat登录。命令行方式mysql -u root -p输入密码后进入MySQL命令行。第二步执行源码中提供的kashi_travel.sql脚本。推荐用命令行导入命令是mysql -u root -p kashi_travel.sql如果你用Navicat则是新建数据库然后右键“运行SQL文件”选择该脚本即可。导入成功后你会在数据库列表中看到名为kashi_travel的库里面包含了上面提到的所有表。第三步配置后端application.yml中的数据源信息server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/kashi_travel?useUnicodetruecharacterEncodingutf8mb4useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.kashi.travel.entity这里最容易出错的是serverTimezone参数如果不设置会报时区相关的错误异常。国内设置成Asia/Shanghai即可。useSSLfalse的作用是关闭SSL连接MySQL8.0默认要求SSL本地开发关掉能省掉一堆麻烦。5.3 前端环境配置与启动前端部分进入frontend目录依次执行npm install npm run serve这两个命令分别对应热词里的“vue安装依赖”和“vue安装及环境配置”。npm install会根据package.json安装项目所需的所有依赖包首次安装可能需要几分钟取决于网络。npm run serve启动开发服务器默认端口8080事例但实际上Vue CLI默认是8080和后端会冲突需要通过vue.config.js里的devServer.port修改为8081或者让后端换个端口。开发模式下前端请求后端接口会存在跨域问题解决方式是在vue.config.js中配置代理devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }配置之后前端请求/api/line/list就会被代理到http://localhost:8080/api/line/list浏览器层面不再是跨域请求困扰很多初学者的跨域问题就这样解决了。5.4 前后端联调的关键检查点两个服务都启动成功后打开浏览器访问前端地址如果能正常展示线路数据那么联调就通了。按照我的开发经验联调最容易出问题的几个位置分别是后端接口返回的字段名和前端实体属性对不上、数据库密码没配置对、端口被占用、MySQL服务没启动。字段名不一致的问题特别隐蔽。比如后端实体中有createTime数据库字段是create_time如果MyBatis没有开启驼峰映射查询结果中createTime就是null。解决问题的办法是在application.yml中加上mybatis: configuration: map-underscore-to-camel-case: true这一行配置的意思是自动将数据库字段create_time映射为实体的createTime属性。如果你不加那只能手动写resultMap非常麻烦。建议默认开启这是MyBatis开发中最实用的配置之一。6. 常见问题与排查技巧实录6.1 启动报错端口被占用这个是最高频的启动错误后端8080端口被占用。报错信息大概是Port 8080 was already in use。排查方式很简单使用命令行查看占用端口的进程netstat -ano | findstr 8080Windows下通过PID找到对应进程在任务管理器中结束掉或者直接把后端端口改成8081server: port: 8081前端代理配置同步修改即可。6.2 登录后显示用户数据为null这类问题基本都出在实体类字段和数据库字段映射上。比如t_user表中有user_name字段实体中是username如果没开启驼峰映射或者字段名不完全对应查出来就是null。遇到数据为null的时候不要急着改代码先看数据库字段名和实体类属性名是否精确匹配。数据库下划线风格对应实体驼峰风格这是最常见的命名规则开启map-underscore-to-camel-case: true后基本都能解决。6.3 跨域请求失败前后端分离模式下跨域是绕不开的话题。如果你没配置代理也没在后端加跨域处理浏览器控制台会报错No Access-Control-Allow-Origin header is present。解决的方式有两种第一是前端配置代理前面讲过了第二是在后端添加跨域配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8081) .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }我在实际开发中的习惯是前后端都处理后端配上CORS兜底前端开发环境用代理双保险。不管哪一边出现问题至少不会完全卡死。6.4 图片上传成功但前端无法显示这个问题的根本原因是图片的访问路径不对。后端把图片存到了本地磁盘D:/upload但浏览器访问的是http://localhost:8080/images/xxx.jpg如果SpringBoot没有把磁盘目录映射为静态资源访问必然会404。SpringBoot中把一个本地目录映射为静态资源路径的标准做法是Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/images/**) .addResourceLocations(file:D:/upload/); } }这段配置的意思是当请求路径为/images/文件名时后端从D:/upload/目录下寻找这个文件并返回给浏览器。这里最需要注意的是最后面的file:前缀必须带上否则框架会按classpath路径去寻找一直找不到就报404。6.5 MySQL8.0认证插件兼容如果你使用的是MySQL8.0用老旧的客户端连接可能会出现Authentication plugin caching_sha2_password cannot be loaded之类的错误。这是因为MySQL8.0默认使用了新的加密方式。如果遇到要么升级客户端驱动版本mysql-connector-java用8.0要么在MySQL命令行中将用户改为老的加密方式ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密码;项目源码里pom.xml中所用的MySQL驱动已经是8.x这个问题其实不多见但一旦出现会非常困惑特此记录一下。7. 实战心得与进一步扩展建议说实话从我打开这套源码到完整跑通整个过程大概用时不到半小时。门槛不高适合作为学习SpringBoot Vue前后端分离开发的入门实战项目。这种项目最大的价值在于它不只是一堆代码而是一套完整的业务链路前端页面怎么调接口、后端接口怎么查数据库、数据库表怎么设计环环相扣这是看书学不来的。拿这套源码做基础可以继续扩展的方向其实是很多的。第一个建议是加入Spring Security或者Sa-Token做认证授权替代现在的Session登录判断让权限体系更规范。第二个建议是将图片上传从本地磁盘迁移到对象存储比如阿里云OSS这样图片就不会随着磁盘清理而丢失。第三个建议是增加数据统计功能比如某个路线的浏览量统计、订单量的月度趋势图表前端用ECharts展示会很加分。第四个建议是引入Redis做缓存把热门线路、景点详情这类读多写少的数据缓存起来面试时可以讲清楚缓存穿透和缓存一致性的思路。踩过几次坑之后我个人的体会是课程设计级别的项目技术上不需要多深多新但一定要完整、能跑、能讲。一个完整的、每个环节都说得清楚的项目远比半吊子用了微服务但Explains不出来的项目有说服力。希望这篇文章能帮你把整个项目从源码层面到部署层面全部跑通拿到一个真正属于自己的完整作品。
基于SpringBoot+Vue+MyBatis的喀什旅游网站系统设计与实现
1. 项目概述一套面向喀什旅游场景的完整前后端分离系统做web开发这么多年前后端分离的项目接触了不少但真正把一个旅游网站从零到一完整落地还要兼顾业务特点和教学价值其实并不多见。这篇要拆解的是一套2025年基于SpringBoot Vue MyBatis MySQL的喀什旅游网站管理系统源码一套正经的课程设计/毕业设计级别的完整项目。之所以说它有代表性是因为它几乎覆盖了Java后端开发最核心的几个关键词SpringBoot的自动配置和启动流程、MyBatis的SQL映射和动态SQL、MySQL的表设计与事务控制以及Vue前端的数据绑定和组件化开发。这套系统主要解决什么问题简单说就是一个面向喀什地区旅游资源的在线展示与管理平台前端面向普通游客提供旅游线路浏览、景点介绍、酒店预订信息查询、旅游攻略阅读等功能后台面向管理员提供线路管理、景点管理、用户管理、订单管理、公告发布等核心操作。整套系统实现了从游客浏览到管理员维护的完整闭环非常适合拿来学习SpringBootVue的项目结构、接口设计与数据库建模思路。什么人适合参考这套源码第一类是正在做Java课程设计的学生特别是需要一套能跑通、能答辩、代码注释完整的项目第二类是刚开始接触前后端分离开发的自学者想看看一个真实的SpringBoot项目是怎么分层、怎么调接口、怎么处理跨域第三类是准备找工作、需要快速积累项目经验的初级开发你可以从这个项目里学到的不是某个酷炫的框架特性而是一整套规范的、可以实际演示的业务系统开发流程。先给一个总览这套系统的技术栈组合是后端使用Spring Boot作为核心框架内置嵌入式Tomcat省去了外置容器的麻烦持久层使用MyBatis通过XML文件管理SQL语句也就是搜索热词里经常出现的“mybatis xml高亮”的编辑体验数据库使用MySQL 5.7或8.0默认字符集utf8mb4兼容性好前端使用Vue 2.x Element UI搭建单页应用配合Vue Router实现路由跳转Axios实现HTTP请求。整体架构清晰没有引入过多的中间件降低了学习和部署成本。2. 整体设计与技术选型思路拆解2.1 为什么是SpringBoot Vue这套组合先聊选型。很多人问做旅游网站这种业务系统用JSP Servlet JDBC不也能做吗答案是可以但那属于老一代技术栈了。现在的课程设计和实际开发SpringBoot Vue已经成了事实标准。SpringBoot的价值在于“约定大于配置”。你不需要像SSM时代那样写大量的XML配置文件不需要手动配置事务管理器、数据源、包扫描一个spring-boot-starter-web依赖加进去自动配置就把大部分工作完成了。这在开发效率上的提升是巨大的特别是对于学生项目解释成本低答辩时也能说清楚“SpringBoot是如何通过自动配置来简化开发的”。Vue这边采用前后端分离前端和后端通过JSON格式的数据交互彻底解决了过去JSP页面和后端代码耦合在一起的问题。前端静态资源可以单独部署到Nginx后端只要对接口负责即可。这不仅是技术上的进步也符合现在企业级开发的普遍模式。2.2 MyBatis与MySQL的组合逻辑持久层选择MyBatis而不是Spring Data JPA核心原因是可控性。MyBatis让你手写SQL这对于景区查询、酒店搜索这类需要精确控制查询逻辑的业务来说非常必要。比如查询旅游线路时需要根据价格、天数、是否推荐等多个条件组合过滤用MyBatis的动态SQL写起来逻辑非常清晰而在JPA中做复杂多条件查询则比较绕。MySQL作为数据库性价比高、部署简单、资料丰富是绝大多数Java后端项目的首选。和Oracle比起来MySQL完全够用和PostgreSQL相比MySQL的生态资料在学生群体中更普及。在喀什旅游网站这个业务场景下数据量撑死几万条MySQL的性能完全不是问题。2.3 项目目录结构与分层思想这套源码的目录结构遵循了标准的SpringBoot分层架构我拆开看了一遍大致是这样com.kashi.travel ├── controller // 控制层接收前端请求返回JSON ├── service // 服务层业务逻辑处理 │ └── impl // 服务实现类 ├── mapper // 持久层接口定义数据库操作方法 ├── entity // 实体类对应数据库表结构 ├── config // 配置类跨域配置、拦截器配置等 ├── common // 公共类统一返回结果、工具类 └── KashiTravelApplication.java // 启动类控制层只负责参数的接收和结果的封装不写业务逻辑业务逻辑集中在Service层数据访问通过Mapper接口定义SQL写在对应的XML文件中。这个分层的核心思想是单一职责——每一层只做自己的事。你问为什么要这么分层因为项目一旦变大不分层必死而且答辩老师最喜欢问的也是这个能讲清楚分层项目就成功了一半。2.4 前端项目结构与Vue的组织方式前端的目录结构同样是标准Vue工程src ├── api // 接口请求封装 ├── assets // 静态资源 ├── components // 公共组件 ├── router // 路由配置 ├── store // 状态管理Vuex ├── views // 页面组件 └── App.vue // 根组件其中api目录单独把所有的axios请求封装成方法页面里只需要调用this.$api.line.getList(params)这样的方法就好。这样做的最大好处是后端接口地址变了你只需要改一个文件而不是满项目找请求代码。这种设计在真实开发中是一个基本素养。3. 数据库设计核心表结构与业务关系解析3.1 数据表总览数据库设计是整个项目的基石。我看过太多课程设计代码写得还行一看数据库表结构就露馅了——字段命名随意、没有外键关系、该做索引的没做。这套源码的表设计算是比较规范的核心表如下表名说明关键字段t_user用户表id, username, password, nickname, phone, avatar, rolet_line旅游线路表id, line_name, line_price, days, start_city, end_city, line_desc, cover_imgt_scenic景点表id, scenic_name, open_time, ticket_price, scenic_desc, scenic_img, addresst_hotel酒店表id, hotel_name, hotel_star, price, address, hotel_desct_order订单表id, order_no, user_id, line_id, order_status, order_time, total_pricet_comment评论表id, user_id, target_type, target_id, content, create_timet_notice公告表id, title, content, create_timet_strategy攻略表id, title, content, author, create_time为什么要有role字段区分用户和管理员因为这套系统不是一个纯展示的静态网站它需要区分游客和管理员的操作权限。游客可以注册登录、下单预订、发表评论管理员登录后进入后台管理上述所有内容。一张表加个role字段比做两套用户体系要简单得多。3.2 订单表状态设计订单表是这套系统的核心业务表。设计的时候订单状态用整数存储而不是字符串0 待支付 1 已支付 2 已取消 3 已完成用数字而不是字符串的好处有三点一是节省存储空间二是比较效率高三是避免中文状态值在前后端交互时出现编码问题。前端拿到数字后通过枚举对象转换为对应的中文文案这是一个非常值得学习的小技巧。很多新手喜欢直接存“待支付”“已支付”字符串看起来直观但后续做统计和条件查询时就难受了。3.3 多表关联与查询字段设计景点、线路、酒店这三张表之间到底是什么关系很多初学者的理解是有误区的。三者的核心关系是一条旅游线路会经过多个景点同时线路信息中可能需要推荐附近的酒店。但考虑到这套系统是课程设计级别没有做复杂的多对多中间表而是让线路表通过line_desc文本字段来描述途径景点和推荐住宿景点和酒店各自维护独立的信息。这是业务简化处理合理不做过度设计。真正用到的外键关系是订单表和用户表的关系t_order.user_id关联t_user.id。查询用户订单时通过这个字段做join这就是多表查询最经典的场景。3.4 索引设计的实际考虑在MySQL表中主键默认建索引这个不用管。需要额外关注的是外键字段的索引ALTER TABLE t_order ADD INDEX idx_user_id (user_id); ALTER TABLE t_order ADD INDEX idx_line_id (line_id); ALTER TABLE t_comment ADD INDEX idx_target (target_type, target_id);为什么要给user_id建索引因为网站最常执行的SQL之一就是“查询某个用户的所有订单”没有索引的话MySQL只能全表扫描数据量大了查询会明显变慢。虽然课程设计数据量小全表扫描也无所谓但记录索引这个习惯是职业素养的表现。数据库的初始化SQL脚本在源码中都包含了包含建库语句、建表语句和一些基础测试数据。拿到源码后直接导入MySQL即可不需要手动建表这一点要注意。4. 核心功能实现与接口设计详解4.1 后端接口设计规范这套系统的接口设计采用了RESTful风格结合统一返回结果类Result所有接口返回的数据格式都是{ code: 200, message: 操作成功, data: { } }code为200表示请求成功500表示服务器异常401表示未认证。这个统一返回格式太重要了如果每个接口返回的JSON结构都不一样前端处理响应时就要写一堆判断逻辑。统一之后前端只需要判断res.code 200即可正常取数据。核心接口清单实际包含大约30个左右我列举一下主要模块模块接口路径方法说明用户/api/user/loginPOST用户登录用户/api/user/registerPOST用户注册线路/api/line/listGET线路分页查询线路/api/line/{id}GET线路详情线路/api/line/savePOST新增/修改线路管理端线路/api/line/delete/{id}DELETE删除线路管理端景点/api/scenic/listGET景点列表酒店/api/hotel/listGET酒店列表订单/api/order/addPOST创建订单订单/api/order/listGET查询当前用户订单公告/api/notice/listGET公告列表4.2 登录接口与密码加密实践登录接口是整套系统的入口几乎所有需要用户身份的功能都要经过它。源码中用户密码的处理方式是MD5加密启动时通过MD5Util工具类加密后存入数据库。这里我要提醒一句MD5并不安全专业的做法是使用BCrypt。但在课程设计中MD5足够而且好解释所以保留项目原设计即可。登录逻辑的伪代码Service public class UserServiceImpl implements UserService { Override public Result login(String username, String password) { QueryWrapperUser wrapper new QueryWrapper(); wrapper.eq(username, username); User user userMapper.selectOne(wrapper); if (user null) { return Result.error(用户不存在); } String md5Password MD5Util.md5(password); if (!md5Password.equals(user.getPassword())) { return Result.error(密码错误); } // 登录成功将用户信息存入session return Result.success(user); } }登录成功之后后端使用Session保存用户登录状态前端通过Cookie保持会话。这里有一个细节前后端分离模式下涉及跨域必须配置allowCredentials(true)允许携带Cookie否则登录状态根本存不住。4.3 MyBatis动态SQL的典型场景MyBatis在这套系统中的最大用武之地是查询条件的动态拼接。以线路查询为例游客端需要支持按照名称模糊搜索、按照价格区间筛选、按照出游天数筛选。如果每个条件都写一个Mapper方法那组合条件会爆炸。用MyBatis的where和if标签动态拼接SQL一份SQL就搞定select idsearchLine parameterTypemap resultTypecom.kashi.travel.entity.Line SELECT * FROM t_line where if testlineName ! null and lineName ! AND line_name LIKE CONCAT(%, #{lineName}, %) /if if testminPrice ! null AND line_price gt; #{minPrice} /if if testmaxPrice ! null AND line_price lt; #{maxPrice} /if if testdays ! null AND days #{days} /if /where ORDER BY create_time DESC /selectXML中为什么用的是gt;而不是因为在XML中和有特殊含义会被解析成标签开头必须用转义字符。这个坑我踩过一次用直接写结果MyBatis解析失败报了一堆莫名其妙语法错误。处理方式有两种第一是用gt;、lt;转义第二是用![CDATA[ ]]包裹整段比较逻辑。项目中采用的是转义方式我认为这是更通用的做法。4.4 文件上传与图片管理旅游网站的景点、线路都需要图片展示。源码中文件上传的实现是常规做法前端通过el-upload组件选择文件以multipart/form-data格式POST到后端后端将文件保存到本地磁盘目录再将磁盘路径拼接成URL存入数据库表。关键代码如下PostMapping(/upload) public Result upload(MultipartFile file) { if (file.isEmpty()) { return Result.error(文件不能为空); } String originalFilename file.getOriginalFilename(); String suffix originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName System.currentTimeMillis() suffix; String realPath D:/upload/ fileName; File dest new File(realPath); file.transferTo(dest); return Result.success(/images/ fileName); }文件名用当前时间戳做主名是为了避免同名文件相互覆盖。这是课程设计中经典且够用的图片上传方案。生产环境当然要上OSS或者MinIO但作为学习项目本地存储能帮你把整个流程链路跑通这个认知很重要。4.5 前端Vue核心页面实现前端部分的核心页面是Home、线路列表、线路详情、景点列表、登录注册、个人中心、管理后台等。这里以线路列表页为例看看Vue组件的组织方式。页面的template部分使用Element UI的卡片组件展示线路列表el-card v-foritem in lineList :keyitem.id classline-card img :srcitem.coverImg classline-img / h3{{ item.lineName }}/h3 p{{ item.lineDesc }}/p span classprice{{ item.linePrice }}/span el-button typeprimary clicktoDetail(item.id)查看详情/el-button /el-cardscript部分的请求调用export default { data() { return { lineList: [] }; }, created() { this.getLineList(); }, methods: { async getLineList() { const res await this.$api.line.getList({}); if (res.code 200) { this.lineList res.data; } }, toDetail(id) { this.$router.push({ path: /line/${id} }); } } };这里有一个vue初学者经常犯的错误在created生命周期中调用接口然后直接this.lineList res.data。问题是res.data是接口的data字段这个没问题问题在于后端返回的结构到底是{code, message, data:[]}还是直接返回数组。如果不和后端约定好前端写接口的时候会非常难受。这也是统一返回结果类Result存在的意义。4.6 路由守卫与登录拦截后台管理页面的路由需要登录且角色为管理员才能访问前端通过beforeEach路由守卫进行拦截router.beforeEach((to, from, next) { const user sessionStorage.getItem(user); if (to.path.startsWith(/admin) !user) { next(/login); } else { next(); } });对应的后端也要做一道拦截。这个项目的做法是写一个LoginInterceptor拦截器在preHandle中判断session中的user是否存在不存在则直接返回未登录状态不放行。为什么要前后端双重拦截因为接口是开放的任何懂技术的人都可以绕过前端直接调用后端接口。前端拦截只是改善用户体验后端拦截才是真正的安全防线。5. 环境配置与项目部署实操记录5.1 本地开发环境搭建很多同学拿到源码第一步就卡在环境上。一套标准的开发环境需要这些组件组件版本建议说明JDK1.8或11SpringBoot 2.x兼容性好Maven3.6管理项目依赖MySQL5.7或8.0存储业务数据Node.js14运行Vue前端工程IDEA2023Java后端开发IDEVSCode最新版前端代码编辑注意JDK版本别上来就用17或者21。SpringBoot 2.x版本默认基于JDK 8编译虽然高版本JDK也能运行但可能出现一些版本兼容怪问题。开发期间老老实实用JDK 8或11最稳。5.2 MySQL数据库导入全流程MySQL的安装教程网上很多这里不再重复只讲拿到该源码如何把数据库跑起来。我实测的流程是这样第一步启动MySQL服务用命令行登录或者直接用Navicat登录。命令行方式mysql -u root -p输入密码后进入MySQL命令行。第二步执行源码中提供的kashi_travel.sql脚本。推荐用命令行导入命令是mysql -u root -p kashi_travel.sql如果你用Navicat则是新建数据库然后右键“运行SQL文件”选择该脚本即可。导入成功后你会在数据库列表中看到名为kashi_travel的库里面包含了上面提到的所有表。第三步配置后端application.yml中的数据源信息server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/kashi_travel?useUnicodetruecharacterEncodingutf8mb4useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.kashi.travel.entity这里最容易出错的是serverTimezone参数如果不设置会报时区相关的错误异常。国内设置成Asia/Shanghai即可。useSSLfalse的作用是关闭SSL连接MySQL8.0默认要求SSL本地开发关掉能省掉一堆麻烦。5.3 前端环境配置与启动前端部分进入frontend目录依次执行npm install npm run serve这两个命令分别对应热词里的“vue安装依赖”和“vue安装及环境配置”。npm install会根据package.json安装项目所需的所有依赖包首次安装可能需要几分钟取决于网络。npm run serve启动开发服务器默认端口8080事例但实际上Vue CLI默认是8080和后端会冲突需要通过vue.config.js里的devServer.port修改为8081或者让后端换个端口。开发模式下前端请求后端接口会存在跨域问题解决方式是在vue.config.js中配置代理devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }配置之后前端请求/api/line/list就会被代理到http://localhost:8080/api/line/list浏览器层面不再是跨域请求困扰很多初学者的跨域问题就这样解决了。5.4 前后端联调的关键检查点两个服务都启动成功后打开浏览器访问前端地址如果能正常展示线路数据那么联调就通了。按照我的开发经验联调最容易出问题的几个位置分别是后端接口返回的字段名和前端实体属性对不上、数据库密码没配置对、端口被占用、MySQL服务没启动。字段名不一致的问题特别隐蔽。比如后端实体中有createTime数据库字段是create_time如果MyBatis没有开启驼峰映射查询结果中createTime就是null。解决问题的办法是在application.yml中加上mybatis: configuration: map-underscore-to-camel-case: true这一行配置的意思是自动将数据库字段create_time映射为实体的createTime属性。如果你不加那只能手动写resultMap非常麻烦。建议默认开启这是MyBatis开发中最实用的配置之一。6. 常见问题与排查技巧实录6.1 启动报错端口被占用这个是最高频的启动错误后端8080端口被占用。报错信息大概是Port 8080 was already in use。排查方式很简单使用命令行查看占用端口的进程netstat -ano | findstr 8080Windows下通过PID找到对应进程在任务管理器中结束掉或者直接把后端端口改成8081server: port: 8081前端代理配置同步修改即可。6.2 登录后显示用户数据为null这类问题基本都出在实体类字段和数据库字段映射上。比如t_user表中有user_name字段实体中是username如果没开启驼峰映射或者字段名不完全对应查出来就是null。遇到数据为null的时候不要急着改代码先看数据库字段名和实体类属性名是否精确匹配。数据库下划线风格对应实体驼峰风格这是最常见的命名规则开启map-underscore-to-camel-case: true后基本都能解决。6.3 跨域请求失败前后端分离模式下跨域是绕不开的话题。如果你没配置代理也没在后端加跨域处理浏览器控制台会报错No Access-Control-Allow-Origin header is present。解决的方式有两种第一是前端配置代理前面讲过了第二是在后端添加跨域配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8081) .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }我在实际开发中的习惯是前后端都处理后端配上CORS兜底前端开发环境用代理双保险。不管哪一边出现问题至少不会完全卡死。6.4 图片上传成功但前端无法显示这个问题的根本原因是图片的访问路径不对。后端把图片存到了本地磁盘D:/upload但浏览器访问的是http://localhost:8080/images/xxx.jpg如果SpringBoot没有把磁盘目录映射为静态资源访问必然会404。SpringBoot中把一个本地目录映射为静态资源路径的标准做法是Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/images/**) .addResourceLocations(file:D:/upload/); } }这段配置的意思是当请求路径为/images/文件名时后端从D:/upload/目录下寻找这个文件并返回给浏览器。这里最需要注意的是最后面的file:前缀必须带上否则框架会按classpath路径去寻找一直找不到就报404。6.5 MySQL8.0认证插件兼容如果你使用的是MySQL8.0用老旧的客户端连接可能会出现Authentication plugin caching_sha2_password cannot be loaded之类的错误。这是因为MySQL8.0默认使用了新的加密方式。如果遇到要么升级客户端驱动版本mysql-connector-java用8.0要么在MySQL命令行中将用户改为老的加密方式ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密码;项目源码里pom.xml中所用的MySQL驱动已经是8.x这个问题其实不多见但一旦出现会非常困惑特此记录一下。7. 实战心得与进一步扩展建议说实话从我打开这套源码到完整跑通整个过程大概用时不到半小时。门槛不高适合作为学习SpringBoot Vue前后端分离开发的入门实战项目。这种项目最大的价值在于它不只是一堆代码而是一套完整的业务链路前端页面怎么调接口、后端接口怎么查数据库、数据库表怎么设计环环相扣这是看书学不来的。拿这套源码做基础可以继续扩展的方向其实是很多的。第一个建议是加入Spring Security或者Sa-Token做认证授权替代现在的Session登录判断让权限体系更规范。第二个建议是将图片上传从本地磁盘迁移到对象存储比如阿里云OSS这样图片就不会随着磁盘清理而丢失。第三个建议是增加数据统计功能比如某个路线的浏览量统计、订单量的月度趋势图表前端用ECharts展示会很加分。第四个建议是引入Redis做缓存把热门线路、景点详情这类读多写少的数据缓存起来面试时可以讲清楚缓存穿透和缓存一致性的思路。踩过几次坑之后我个人的体会是课程设计级别的项目技术上不需要多深多新但一定要完整、能跑、能讲。一个完整的、每个环节都说得清楚的项目远比半吊子用了微服务但Explains不出来的项目有说服力。希望这篇文章能帮你把整个项目从源码层面到部署层面全部跑通拿到一个真正属于自己的完整作品。
