ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

SpringBoot+Vue构建国产动漫网站:从数据库到答辩的全流程实现

SpringBoot+Vue构建国产动漫网站:从数据库到答辩的全流程实现 每年毕设季我都能在各大平台看到大量《基于SpringBootVue的XX网站设计与实现》这类题目国产动漫网站平台就是其中出现频率非常高的一种。老实说这个题目乍一看平平无奇——无非是前台展示番剧、后台管理数据那一套但真正动手做下来你会发现它几乎串联了Java Web后端就业市场上所有高频考点前后端分离架构、RESTful接口设计、JWT登录鉴权、数据库表关系设计、文件上传、视频播放、搜索排序、评论回复。我最近刚好完整梳理了一个基于SpringBootVue的国产动漫网站平台项目从数据库建模到接口文档编写、从后端分层到前端组件化、从本地联调到答辩演示把整个流程重新走了一遍。这篇文章就把全过程拆开讲透哪些表必须建、哪些代码必须先写、哪些坑会在半夜让你抓狂都一并交代清楚。无论你是正在做这个毕设题目的在校生还是想拿前后端分离项目练手的自学者按这条路线走完你得到的绝不是一个能跑的Demo而是一套能讲清楚、禁得起追问的完整工程。1. 这个题目考的是工程能力国产动漫网站的真实拆解与选型逻辑1.1 题目背后的考点你做的不是一个网站而是一整套业务闭环很多同学拿到这个题目第一反应是做个展示页面嘛放几张动漫海报点进去能看简介就行了。如果真这么想那答辩的时候大概率会被问到哑口无言。国产动漫网站平台这个题目之所以被大量高校选为毕设选题不是因为国产动漫这个题材本身而是因为它天然覆盖了一个完整业务系统需要的所有模块。拆开来看一个合格的动漫网站至少需要三端业务闭环C端用户端、B端管理后台、以及连接二者的服务端接口。用户端要做的是游客浏览、用户注册登录、番剧列表与详情、搜索、筛选分类、追番收藏、发表评论、播放视频管理端要做的是管理员登录、番剧信息CRUD、分类管理、用户管理、评论审核、轮播图配置服务端则要承担所有数据的读写、鉴权校验、文件存储、异常处理。这三块全部做完你的项目才真正算得上完整项目源码。从这个角度看这个题目实际上是在考察你是不是具备独立完成一个中小型业务系统的工程能力。技术点反而比业务点更集中SpringBoot做后端接口、Vue做前端页面、MySQL存数据、Redis做缓存可选加分项、JWT做无状态登录、Maven做依赖管理。把这些串起来你就已经把一个典型的Java Web商用项目的工作流程完整走了一遍。1.2 技术选型版本、脚手架、ORM框架怎么定版本选择是第一个容易踩坑的地方。SpringBoot 2.x和3.x之间有比较大的差异尤其是3.x把javax.servlet换成了jakarta.servlet很多老教程里的代码直接复制过来会报包不存在。对于毕设项目我的建议是优先选SpringBoot 2.7.x原因有三个一是网上能找到的参考资料最多遇到问题一搜就有答案二是与MyBatis-Plus、Swagger等周边工具的兼容性最好三是大部分学校的Java课程还停留在JDK 8SpringBoot 2.7配合JDK 8完全够用不会出现编译环境不一致的尴尬。ORM框架我推荐MyBatis-Plus而不是原生MyBatis更不是JPA。原因很简单MyBatis-Plus提供内置的BaseMapper单表CRUD不用写SQL你只需要在Mapper接口里继承BaseMapper 就能拿到insert、deleteById、selectPage这些现成方法可以把精力集中在业务逻辑而不是重复的SQL上。对于联表查询和复杂搜索再在XML文件里手写SQL两种方式结合既有开发效率又不失灵活性。构建工具选Maven前端脚手架选Vue CLI 4或者Vite都可以。区别在于Vite启动速度确实快很多但Vue CLI的生态和插件更成熟。如果对前端不太熟悉建议Vue CLI因为Element UI这类组件库的资料大多基于Vue CLI项目给出示例照搬不容易出错。前端环境还要注意Node版本Vue CLI 5要求Node 12以上Vite 4要求Node 14.18以上先把node -v看清楚再动手。1.3 项目整体架构前后端分离的目录规划与协作方式目录规划决定了后续开发是顺风顺水还是处处打架。我的习惯是建一个根目录下面分server和web两个子目录前者放SpringBoot后端后者放Vue前端。后端按controller、service、mapper、entity、config、common六个包来组织前端按views、components、router、store、utils、api六个目录来组织。这种结构最大的好处是职责清晰后端业务代码不会和配置类混在一起前端页面组件不会和工具函数混在一起答辩时标书翻起来也好看。前后端协作的核心是接口约定。在实际开发中我强烈建议先定好统一的返回格式再做具体业务。比如后端所有接口都返回一个Result 类结构固定为code、message、data三个字段200表示成功401表示未登录500表示服务器异常。前端axios在响应拦截器里统一判断code字段而不是依赖HTTP状态码。这样前后端各做各的只要接口文档里写清楚了请求路径、请求方式、入参和返回结构两边可以并行开发互不阻塞。提示前后端分离不是把代码分成两个文件夹就完事了真正的分离是数据交换通过接口完成。页面跳转不经过Controller返回的视图而是由Vue Router控制数据获取全部走axios调RESTful接口。如果你发现代码里有前端跳转后端模板渲染的混合写法那说明分离还不够彻底。2. 数据模型先行从番剧到弹幕MySQL表设计怎么做才禁得起答辩追问2.1 核心实体梳理用户、番剧、分类、评论的关系模型数据库是整个项目的根基表设计做得烂后面写代码的时候处处别扭。国产动漫网站的核心实体有四个用户user、番剧anime、分类category、评论comment。这四个实体的关系是一个用户可以对多个番剧发表评论一条评论属于一个用户和一个番剧一个番剧属于一个分类一个分类下可以挂多个番剧。通过外键把这几层关系串起来业务数据就形成了基本的闭环。用户表的核心字段包括id、username、password、nickname、avatar、email、role、status、create_time。这里要注意password字段存的是BCrypt加密后的密文绝对不能明文存储role字段区分普通用户和管理员建议用tinyint存0和1而不是字符串方便判断status字段控制账号是否被封禁前端登录时后端要校验这个字段。番剧表是内容核心字段至少需要id、title、cover、category_id、description、director、status、rating、view_count、publish_time。其中cover存的是封面图片的URL路径status表示连载状态1连载中/2已完结rating存的是综合评分可以后续用点赞或打分计算得出。category_id建立外键关联到分类表方便按分类检索。还有一个容易忽略的字段是is_recommended标记是否在首页轮播或推荐位展示。分类表相对简单id、name、sort。sort用来控制前端分类标签的展示顺序。评论表则要记录id、user_id、anime_id、content、parent_id、like_count、create_time。parent_id这个字段很有讲究它支持楼中楼回复如果为0表示一级评论如果指向某个评论的id则表示回复。这种设计比单独搞一张回复表更轻量也更容易实现。2.2 扩展表设计收藏、追番、播放记录、弹幕表的取舍除了四个核心表还有几张扩展表直接决定了项目的完整度。收藏表favorite记录用户的追番行为结构很简单id、user_id、anime_id、create_time联合唯一索引user_id, anime_id防止重复收藏。播放记录表play_history记录每个用户看过哪些番剧字段包括id、user_id、anime_id、episode、progress、update_time作用是个人中心的最近在看模块。弹幕表做不做是另一个取舍点。如果做了字段包括id、anime_id、episode、user_id、content、time_point、colortime_point记录弹幕出现在视频第几秒前端用弹幕库渲染。我个人的建议是如果总工期还有两周以上就做上弹幕的实时交互效果在答辩演示时非常加分如果时间紧张可以不做或者只做静态展示。答辩老师往往更看重你有没有考虑到而不是功能多不多。这几张表都是在基础CRUD做完之后才需要考虑的事情。我的经验是先把核心四张表建好、代码跑通再回头加扩展表。因为扩展表给项目加的是宽度而不是深度如果在初期就被扩展表分散精力很可能连核心功能都做不完整。数据库的表数量控制在8到10张之间对毕设来说是比较合适的体量——太少显得单薄太多管理和维护都是负担。2.3 建库脚本的关键细节utf8mb4、索引、初始化数据SQL脚本是交付物的一部分老师拿到你的项目第一件事就是执行脚本建库。如果脚本里没有初始化数据前端页面打开是一片空白第一印象就崩了。所以SQL脚本里必须包含三部分建库语句、建表语句、初始数据INSERT语句。初始数据至少要准备10部以上国产动漫作品、5个以上的分类、1个管理员账号和1个普通用户账号这些数据能让项目一启动就能完整演示。字符集选择utf8mb4而不是utf8。很多同学在这里踩过坑用户昵称里输入一个emoji表情数据库直接报错无法存储。原因是utf8最多存3字节而emoji是4字节utf8mb4才是真正的全量支持。建表时统一写CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci所有表都用这个一劳永逸。索引设计是答辩可能会追问的点。番剧表上给category_id建普通索引因为按分类查询的频率很高评论表上给anime_id建索引因为评论列表是按番剧维度获取的user表上的username字段建唯一索引保证用户名不重复。索引不是越多越好每多一个索引插入和更新就要多维护一份数据结构所以只给高频查询的字段加索引才是合理的。3. 后端骨架SpringBoot的分层实现、JWT鉴权与那些看似简单的坑3.1 三层架构与统一返回格式先搭骨架再写业务SpringBoot后端的核心是三层架构Controller负责接收入参和返回结果Service负责业务逻辑Mapper负责数据库操作。很多初学者喜欢把业务逻辑写在Controller里图省事但一旦项目变大就会失控。正确做法是Controller只做三件事接收参数、调用Service、返回ResultService里写判断逻辑和事务控制Mapper只做数据访问。这样每一层都好测、好改、好复用。统一返回格式我在前面提到过这里具体说实现。新建一个Result类字段是code、message、data提供静态方法success(data)和error(code, message)。Controller每个方法的返回值都写成Result类型即使查询失败也返回结构体而不是直接抛异常。前端拿到响应后不管成功还是失败都能用同一套逻辑处理不需要在axios层做太多分支判断。关于参数校验SpringBoot有spring-boot-starter-validation依赖可以在实体类字段上加NotBlank、Email、Size等注解Controller的入参加Validated注解就能自动校验。比如用户注册时username不能为空、password长度至少6位、email格式要合法这些校验不用手写if语句注解一行就能搞定。答辩时可以顺带提一句参数校验在Controller入口由注解驱动处理比说我写了很多if判断专业得多。3.2 JWT登录鉴权前后端分离项目的第一道门槛登录鉴权是前后端分离项目绕不开的环节。传统Session方案在前后端分离下有个问题跨域请求携带Cookie需要额外配置而且Session存在服务器内存里多个实例无法共享。JWT方案把用户信息加密成token字符串返回给前端前端每次请求在Header里带上Authorization字段后端通过拦截器解析校验天然适合前后端分离架构。实现逻辑拆开来就三步登录成功后用JWT工具类生成token把用户id、用户名、角色等非敏感信息放进claims里签名密钥用一个固定字符串生产环境会放到配置文件中前端把token存到localStorageaxios请求拦截器统一在Header中加入后端写一个拦截器或者过滤器对除登录注册外的所有接口执行token解析解析失败返回401。拦截器里要注意白名单配置/api/user/login和/api/user/register不需要token就能访问但首页的番剧列表是游客也能看的所以需要区分登录才能访问的接口和公开接口。我的做法是定义两个拦截器或者一个拦截器加白名单集合让公开接口直接放行。管理员接口再额外校验role字段是否为管理员。这里建议写一个自定义注解RequireAdmin标注在管理端Controller上拦截器里判断方法或类上是否有这个注解来做权限控制。注意JWT的密钥不要硬编码写在代码里放到application.yml中通过Value注入。密钥字符串至少32位否则JJWT库启动时会报错。生成token时设置过期时间比如24小时前端在axios响应拦截器里捕获401后跳转到登录页并清除本地token。3.3 文件上传封面图和视频流的处理方案动漫网站必然涉及封面图片上传和视频文件管理。SpringBoot默认支持文件上传在application.yml里配置spring.servlet.multipart.max-file-size和max-request-size即可比如分别设为50MB和100MB。Controller接收MultipartFile参数把文件写入本地磁盘的指定目录然后把磁盘路径拼成URL返回给前端。注意本地存储的目录是相对路径的话要获取项目的绝对路径再拼接否则在不同环境下启动时目录会漂移。最容易踩的坑是上传时间长了之后磁盘空间被占满。我见过有同学的毕设项目把整个视频文件直接存在项目目录下演示的时候没问题但老师问如果上线怎么办就答不上来了。这里我建议在答辩时主动说明本地文件存储在毕设环境中是可接受的生产环境一般会对接OSS或MinIO这类对象存储服务项目里预留了存储接口的抽象层替换实现类即可。这样既诚实又展示了你有工程化思维。视频播放的处理也有讲究。番剧视频和普通图片不同网页里播放MP4通常用HTML5的video标签就能搞定但如果你拿到的是m3u8格式的流媒体切片就需要借助hls.js或者在Vue中使用带HLS支持的前端播放器组件来处理。后端接口如果用普通文件流的方式返回视频拖拽进度条会不流畅。最简单的方案是在后端写一个Range请求支持的下载接口读取视频文件的字节范围返回指定片段这样浏览器才能支持拖拽播放。3.4 后端开发中的高频问题跨域、事务、路径参数编码跨域是前后端分离一定会遇到的问题。浏览器同源策略会拦截前端域名如localhost:8080访问后端域名如localhost:9090的请求。解决办法在后端写一个CorsConfig配置类注册CorsFilter或者实现WebMvcConfigurer的addCorsMappings方法允许所有来源、所有方法、允许携带凭证。这里注意的是allowCredentials和allowedOriginPatterns要配合使用allowCredentials(true)时allowedOrigins()会被浏览器拒绝需要用allowedOriginPatterns()代替。事务问题集中在评论删除和用户信息更新这类多个表同时变更的场景。以删除单个番剧为例除了删除anime表里的记录还要删除该番剧下的所有评论以及收藏记录三条DELETE语句必须在一个事务里任何一条失败都要全部回滚。在Service方法上加Transactional注解就能实现声明式事务。有次我排查了一个多小时评论删了又出现的问题最后发现是Service层没加事务番剧删了但评论没删干净重新查详情时数据又被带出来了。路径参数编码是个很隐蔽的坑。番剧标题如果包含中文、空格或者URL特殊字符直接拼在URL里请求会报400错误。前端在调用接口时需要用encodeURIComponent对参数编码后端在Controller接收时用PathVariable String title接收后实际上SpringBoot大部分场景会自动解码但如果你用Request的参数做精确匹配查询最好确认一下编码和解码的一致性。我在实际项目中遇到过用户在搜索框输入灵笼: 特别篇带冒号导致查询无结果的情况后来统一在搜索接口改为POST请求、参数放请求体里才彻底避开URL编码问题。4. 前端实战Vue组件划分、路由守卫与播放器选型的完整思路4.1 从页面布局反推组件设计首页、列表页、详情页、播放页Vue前端开发不要把每个页面都写成一个巨大的.vue文件那样后期维护是灾难。正确做法是先画页面结构再按功能区域拆组件。以首页为例从上到下可以拆成NavBar导航栏、Banner轮播图、AnimeCardList番剧卡片列表、Footer底部栏番剧详情页可以拆成InfoPanel信息面板、EpisodeList剧集列表、CommentSection评论区播放页则拆成PlayerArea播放器区域和DanmakuPanel弹幕面板如果做的话。AnimeCard是复用率最高的组件首页推荐位、分类列表页、搜索结果显示都可以用同一套卡片组件只需要传入一个anime对象组件内部负责渲染封面、标题、评分、连载状态。如果出现了两个页面长得差不多但代码写了两遍的情况说明组件拆得不够细。把公共部分抽出来用props传参控制差异是Vue组件化的核心思想。视图层再往上用Vue Router管理路由。路由表的设计要注意静态路由与动态路由的结合首页、分类页、详情页、登录注册页这些所有人能访问的页面配置为静态路由个人中心、播放页这些需要登录的页面通过路由守卫验证token的存在性管理后台的页面则要额外校验用户角色。路由懒加载要用上component写成() import(/views/Detail.vue)的形式按需加载能明显减少首屏加载时间。4.2 axios封装与拦截器请求层必须有的统一处理axios不能直接在每个组件里散着用一定要封装。在utils目录下创建request.js用axios.create()生成一个实例设置baseURL指向后端接口地址开发环境用Vite或Vue CLI的proxy代理生产环境用完整URL然后注册请求拦截器和响应拦截器。请求拦截器里做两件事从localStorage取出token如果存在就在config.headers里写入Authorization: Bearer {token}如果不存在对于需要登录的接口可以在拦截器里直接跳转登录页。响应拦截器里判断返回的Result对象的code字段为200则返回data部分给业务代码为401则清除本地token并跳转登录页为500则用Element UI的Message组件弹出错误提示。这样业务层只需要关心成功的数据流出错逻辑全部收敛在拦截器里。API层对应api目录下的模块文件。比如anime.js文件里导出getAnimeList(params)、getAnimeDetail(id)、searchAnime(params)等方法每个方法内部调用封装的request实例把HTTP请求细节藏起来。页面组件里只调用fetchAnimeList()这样的语义化方法不直接面对axios——这个设计让代码可读性大幅提升答辩演示时也能很清晰地说明我把所有后端接口调用按模块进行了统一封装。4.3 登录态与权限控制路由守卫和白名单路由守卫是前端权限控制的第一道关。Vue Router提供了beforeEach全局前置守卫在跳转前判断to.meta是否需要登录。我的习惯是在路由meta字段里配两个属性requiresAuth是否需要登录和requiresAdmin是否需要管理员权限。守卫里依次判断如果to.path是公开页面就直接放行如果requiresAuth且没有token跳转登录页并带上redirect参数指向原始目标如果requiresAdmin且当前用户不是管理员跳转首页并提示无权限。这里有个容易疏漏的地方用户信息除了token还需要角色信息才能判断管理员权限。我的做法是登录成功后后端返回token和userInfo前端把userInfo里的role存入Vuex或Pinia刷新页面后store里的数据会丢失所以还需要在App.vue的created生命周期里调用一次获取当前用户信息的接口后端根据token解析用户信息来恢复登录态。如果没有这一步刷新页面后路由守卫会认为用户未登录明明有token却跳回登录页非常影响体验。关于状态管理选Vuex还是PiniaVue3项目直接PiniaVue2项目选Vuex。其实毕设项目的状态量不大无非是用户信息和一些全局配置用哪个都能驾驭但选跟当前Vue大版本匹配的方案更稳妥。Element UIVue2和Element PlusVue3的组件用法有细微差异下载依赖时一定要看清版本对应关系。4.4 播放器选型与弹幕方案决定演示环节的上限播放器是动漫网站的门面。原生HTML5 video标签能播MP4但界面朴素、没有好看的进度条和音量控件。我建议直接用现成的播放器组件Vue2生态里比较成熟的是vue-video-player基于video.js二次封装支持播放MP4、HLSm3u8、FLV等格式进度条、倍速、全屏都内置好了。Vue3项目可以考虑DPlayer或者西瓜播放器xgplayer西瓜播放器的文档是中文的接入比较简单。弹幕功能如果要做前端方案一般是在视频上层叠加一个canvas画布通过定时器把弹幕渲染到canvas上。发送弹幕时调用后端接口把弹幕文本和时间点存到数据库播放器播放到对应时间点时从本地缓存列表里取弹幕渲染。如果不想从零写弹幕渲染逻辑B站开源的DanmakuFlameMaster在Github上有人封装过Vue版本可以直接引用。不过以毕设的体量来说自己写一个简单的canvas弹幕效果也是可控的复杂度并没有想象中那么高。播放页还有一个细节播放进度记忆。用vue-video-player的timeupdate事件监听当前播放时间节流后传给后端play_record接口保存下次打开播放页时按时间戳恢复进度并弹出上次观看至0523是否继续播放的确认按钮。这个功能不强但很显眼演示时一下子就能让老师看出项目是完整的、深思熟虑过用户体验的。5. 接口文档与SQL脚本毕设包里最容易被低估的两个交付物5.1 接口文档怎么写不仅仅是一份Swagger注解列表毕设题目里专门写含接口文档说明接口文档被当作了独立交付物。很多同学的接口文档就是把Swagger自动生成的JSON导出来交差但真正专业的做法是让文档可以被另一个前端开发者直接调用、不需要你口头解释任何一句。我推荐用Knife4jSwagger的增强UI自动生成在线文档同时导出一份Markdown或Word版本的离线文档随项目交付。一份合格的接口文档至少需要包含以下内容每个接口的请求路径、请求方式、请求参数名称、类型、是否必填、示例值、响应结构体示例。以登录接口为例POST /api/user/login入参是JSON对象{username, password}响应是{code, message, data:{token, userInfo}}注册接口类似但入参多一个email字段。把每个接口的请求和响应写成JSON示例比你在答辩现场用Postman现测快得多老师也能直观看到你设计的接口是清晰规范的。除了自动生成文档里还要补充一部分设计约定统一返回码的含义、分页参数pageNum和pageSize的规范、时间格式统一为yyyy-MM-dd HH:mm:ss、文件上传的接口大小限制。这些约定在多人协作时尤其重要。你写文档时把它们写清楚答辩时面试官问前后端怎么协作你就可以回答我们以接口文档为契约后端按照约定的返回格式开发前端根据文档mock数据进行页面开发最后联调阶段再拉通真实接口这才是标准的工程化协作流程。5.2 SQL脚本交付规范让别人拿到就能跑SQL脚本的交付标准是任何一台装了MySQL的电脑双击执行就能跑起来。第一脚本开头要有DROP DATABASE IF EXISTS语句和CREATE DATABASE语句避免别人库名冲突第二每一个CREATE TABLE语句前都有DROP TABLE IF EXISTS保证脚本可重复执行第三所有表都要在末尾加上注释字段尽量也有COMMENT注释这是很多同学忽略的加分点第四初始数据的INSERT语句按依赖顺序排列先插入分类表再插入番剧表最后插入评论等依赖用户和番剧的表否则外键约束会让脚本报错。数据初始化时还有一些细节。密码字段必须用BCrypt加密后的密文不能直接写123456否则管理员登录时后端用BCrypt校验永远对不上。你可以在SpringBoot项目的test目录里写一个临时测试类用BCryptPasswordEncoder生成指定密码的密文然后粘贴到SQL脚本里。番剧封面图片可以先用网络图片链接填充比如一些公开的动漫海报URL这样不依赖本地文件路径前端一启动就有图可看。提示SQL脚本里不要写外键约束。你没看错在DBA圈子里外键本身有争议而在毕设项目里我强烈建议逻辑外键优先程序代码里维护关联关系物理外键不做。原因是物理外键在插入、删除时会影响性能而且你用MyBatis-Plus做CRUD时外键约束的存在会让一些批量操作变得麻烦。表之间有关联关系但关联逻辑在Service层保证这是当前主流的互联网公司做法讲出来老师反而会觉得你了解业界实践。5.3 数据显示与搜索优化用现有数据讲出一个好故事SQL脚本里初始化的数据不只是用来让页面不空更是答辩时的叙事素材。我的建议是让初始数据具备可讲性分类包含热血、恋爱、悬疑、搞笑、日常、科幻等六类每类下面放两三部作品其中至少有三部设置is_recommended为1让首页轮播有内容有一部作品的评论不少于五条且包含至少一条二级回复这样评论区功能可以直接展示完整交互效果。搜索功能的实现也不能只是SQL的like模糊查询。前端搜索框输入关键词后调用后端搜索接口后端在番剧表的title和description字段上做多字段模糊匹配按点击量排序返回。如果想加分可以用MySQL的全文索引ngram解析器替代like这样对于中文搜索的效果和性能都有提升。答辩时如果要讲搜索优化就从like讲到全文索引的原理再对比一下效果这就是一个很扎实的技术亮点。6. 联调、部署与答辩把能跑变成能讲清楚6.1 跨域联调的完整排查链路从报错到跑通的思路到了联调阶段最常见的问题是前端一打开页面就报跨域错误No Access-Control-Allow-Origin header is present。这时候先别急着加各种乱改按下面的顺序排查先确认后端是否已配置CORS。如果没有在后端增加CorsConfig配置类明确允许的来源地址如http://localhost:8080、请求方法、请求头、是否允许携带凭证。我用到的配置是allowedOriginPatterns(http://localhost:*)加allowCredentials(true)这样本地开发无论前端占用哪个端口都能通过。确认前端请求的baseURL是否正确。如果后端端口是9090前端页面跑在8080那baseURL要指向http://localhost:9090/api注意别漏了/api前缀。一个端口错的报错和不配置CORS的报错在浏览器控制台上长得几乎一样先排除再动配置。如果后端配了CORS还报错把后端配置里的允许请求头加上Authorization、Content-Type允许方法加上OPTIONS。因为浏览器跨域请求在正式请求前会先发一次OPTIONS预检后端如果没放行OPTIONS方法请求照样失败。还有一个备选方案前端开发时用代理转发。Vite和Vue CLI都支持配置proxy把 /api 前缀的请求代理到后端地址这样浏览器访问的是同源地址不存在跨域问题。这个方案在开发环境很舒服生产环境也可以配合Nginx做类似的反向代理。对毕设来说做好后端CORS加前端代理两个方案都验证过联调时无论哪个环节出问题你都有思路去切换。6.2 本地部署与演示环境准备提前把最容易翻车的环节跑一遍答辩演示翻车大多发生在环境不一致上。你在自己电脑上跑得好好的到答辩教室换了台机器就各种报错。提前准备好的演示环境包括确保本机安装的JDK和项目要求版本一致MySQL的root账号密码与项目配置文件一致Node版本足够新可以运行前端开发环境。如果想减少现场搭建的不确定性可以考虑打包成Jar文件后端直接java -jar运行前端build后用Nginx或live-server静态托管整个系统只需要一个后端进程加一个静态文件目录。打包部署这里有个关键点前端bundle后请求的接口地址如果要写死为http://localhost:9090必须在打包前修改环境变量文件。如果前后端部署在同一台机器的同一个服务下比如后端Jar包内嵌Servlet容器同时托管前端静态资源那前端请求用相对路径/api即可不需要跨域。这种单服务部署模式对于毕设演示是最稳妥的因为不依赖CORS也不依赖多个端口同时可用。演示时还要提前准备好几组演示账号一个管理员账号能展示后台管理操作一个普通用户能展示登录、收藏、评论、个人中心流程再准备一个游客视角展示未登录时能访问的页面。实际演示的操作路径要提前走三遍以上特别是修改番剧信息后去前端刷新看效果这种联动操作一旦接口某处有缓存或异步延迟现场就会卡住几秒很影响节奏。6.3 答辩时项目亮点怎么讲从功能罗列升级到决策叙述答辩被追问得最频繁的问题是你这个项目有什么亮点。很多同学回答的是我这个项目有登录注册、有评论、有搜索这只是功能罗列没有说服力。亮的讲法是把技术决策和业务场景绑在一起叙述。比如讲登录鉴权时说因为采用前后端分离架构传统Session方案跨域体验不好而且无状态服务很难水平扩展所以我选用了JWT方案把用户信息编码进token在后端拦截器统一校验——这段话同时展示了你理解了前后端分离的痛点、理解了JWT的原理、理解了拦截器的用法。再比如讲评论功能时说我设计了parent_id字段支持楼中楼回复查询时根据是否为空判断层级前端递归渲染评论树。讲搜索时说我先用MySQL的like做模糊匹配后来发现中文搜索效率和准确性都不够所以调研了全文索引的方案虽然最终项目里保留的还是接口层逻辑但这让我理解了搜索引擎的基本原理。即使有些优化没有彻底实现你展现出我思考过、我尝试过的过程远比我照着教程敲了一遍更有含金量。还有一个加分策略主动展示你遇到坑是怎么解决的。老师问遇到过什么难点时可以讲我前面提到的两个真实经历——删番剧时评论没删干净的脏数据问题和跨域预检请求没放行导致的联调失败。这两件事证明你是真的独立完成了整个项目而不是从网上down了源码糊弄过关。7. 从复制粘贴到消化重构拿到源码后应该怎样收为己用最后分享一点个人的真实感受。网上能搜到大量SpringBootVue动漫网站的毕设源码这是事实。但直接下载下来改个标题交上去答辩时老师多问几个细节就会露馅。正确使用源码的方式是消化重构第一遍通读代码理清表结构、接口列表、页面跳转逻辑第二遍挑一个自己最有兴趣的模块比如评论或者视频播放自己重写一遍第三遍给项目加一个源码里没有的功能比如个人中心里加最近观看记录或者后台加一个公告发布模块。你自己动手改过、加过代码之后整个项目才真正变成了你的项目。答辩的时候你能清晰地讲出这个模块最初是怎么实现的、我为什么觉得不够好、我是怎么改掉的这种话术比任何照本宣科都更有说服力。真实做过一遍的项目里那些你踩过坑、熬夜排查过的问题全会转化为你表述中的从容和细节——老师问什么你都能接得住还能顺手带出几个当时我注意到一个小细节的加分叙事情节。做毕设最不划算的方式是把答案背熟练去应付答辩最划算的方式是趁这段时间把前后端分离项目里所有经典技术点亲手过一遍。国产动漫网站这个题目刚好是一个体量适中的载体做完它你对SpringBoot自动配置、MyBatis-Plus的使用、Vue组件通信、跨域和鉴权的理解会比看一百篇教程都深刻。希望这篇拆解能给你一条少走弯路的完整路线等你的项目跑通的那一刻你会觉得这段时间熬得值。
返回列表