★ FEATURED ARTICLE 每到毕设季总有人反复问同一类问题Java Web方向到底选什么题目既不容易一眼撞车又能把课程里学的技术栈完整展示出来。我的答案里一直给“SpringBootVue英语知识应用网站平台”这样的项目留着一个位置。它看上去不是那种惊艳的创意型选题却特别适合当个人工程能力的载体——后端要写接口前端要做页面数据库要设计表结构和初始化数据还要整理接口文档。一套跑下来Web开发的核心技能基本全覆盖了。如果你是正在准备毕设的学生或者想复现一个完整前后端分离项目的开发者这篇内容会围绕完整项目源码、SQL脚本和接口文档三样东西展开从头讲清楚一个英语知识应用网站从需求拆分到数据库设计、从后端接口到前端页面、再到本地跑通项目的全部关键细节。文中所有的思路都基于一个普通开发者的实际工程习惯不是教科书目录。1. 毕业设计选题前的需求分析这个题目到底在考什么1.1 从“学习网站”题目反推课程知识覆盖点“英语知识应用网站”这个题目的重点其实不在“英语”两个字而在“知识应用”四个字。它本质上要求你把某个领域的知识内容组织成可浏览、可搜索、可练习的资源再配上一整套用户体系。这样一个题目考察的无非是几件固定的事后端实体类设计、Mapper层、Service层、Controller层、登录鉴权、事务控制、异常处理、参数校验、分页查询。前端组件拆解、路由配置、状态管理、HTTP请求封装、列表数据的展示与交互。数据库至少五六张业务表、合理的表关系、初始化数据、常用查询语句。工程能力项目结构是否清晰、配置是否合理、依赖管理是否规范、接口文档是否完整。换句话说英语知识应用网站表面上是个内容系统实际上是一份标准的Web全栈练习卷。相比纯粹的商城系统它多了一层“学习内容”的语义让数据库设计和接口设计都有更自然的业务场景。1.2 如何把“课程作业”升级成“能答辩的作品”很多课程作业停留在“能跑”这个层面一个登陆页面能跳转、一个列表能展示、一个增删改查能完成就算交差。但毕设作品不能只讲功能还得讲设计理由。比如下面这类问题答辩时几乎必然被问到用户登录为什么用JWT而不是Session词汇表分页为什么放在SQL层而不是把所有数据查出来在内存里截取错题本和学习记录为什么单独建表而不是直接查历史答案前端路由守卫是怎么防止未登录用户进入后台页面的这些问题的答案恰恰要在系统设计和实现过程中预先想清楚。“做一个能跑的网站”和“做一个能讲清道理的网站”这两件事的差别就是课程作业和毕设作品的差别。这个英语知识应用项目业务边界很清晰非常适合用来练习这种“先讲道理、再写代码”的开发方式。2. 功能模块划分从“学习资源”到“在线练习”的业务闭环2.1 用户端模块学习、练习、记录一个都不少一个符合毕设体量的英语知识应用网站用户端通常包含下面这些模块注册与登录支持用户名和密码注册密码加密存储。学习中心词汇浏览、每日一句、阅读文章、语法知识点等内容展示。在线练习基于词汇和阅读文章的练习题支持选择、填空等常见题型提交后自动判分。错题本答错的题目自动进入错题列表用户可以重新练习或移除。学习统计展示累计学习次数、总正确率、近7天活跃趋势等数据。模块别贪多把上述内容做完整工作量已经足够一份毕设。很多同学一上来就想加背单词打卡、智能推荐、语音朗读结果每个功能都只写了一半反而是大忌。2.2 后台管理模块让项目具备“平台感”的关键后台管理模块是区分“一个静态网站”和“一个应用平台”的分水岭。至少要包含内容管理对词汇、文章、练习题进行增删改查。用户管理查看注册用户列表、禁用异常账号。数据概览用图表展示用户数量和内容数量最好能显示最近几天的学习趋势。后台不需要做得非常华丽但它能证明你理解了角色权限和数据管理的完整链路。管理员账号和普通用户账号的权限区别是答辩时一个很好的讲述点。2.3 模块间如何串成一条“数据闭环”我给这个项目定过一条核心业务链路写文章、画PPT、答辩讲演示都围绕它展开用户在词汇页面学习单词 → 进入词汇练习 → 提交答案 → 后端自动判分 → 答错的题写入错题本 → 学习记录更新 → 学习统计页面展示正确率变化。这条链路的价值在于它把不同模块之间的数据关系讲清楚了。词汇表和题目表通过内容ID关联练习记录表保存用户的每一次答题结果错题本表只保留答错的题目统计表再基于这些记录做汇总。每个功能都不是孤立的而是围绕“学—练—测—复盘”这条主线运转。答辩时能完整讲出这条链路比单独说“我做了个词汇列表页面”要有说服力得多。下面是一个简单的模块与落点对照表方便规划开发顺序业务模块核心数据表主要接口前端页面注册登录sys_user、sys_rolePOST /auth/login、POST /auth/register登录页、注册页词汇学习vocabulary、favoriteGET /vocabulary/page、POST /favorite/add词汇列表页阅读文章articleGET /article/page、GET /article/detail文章列表页、详情页在线练习question、learning_recordPOST /exercise/submit、GET /exercise/list练习页、结果页错题本wrong_questionGET /wrong/page、DELETE /wrong/remove错题列表页学习统计user_statisticsGET /statistics/overview统计图表页后台管理vocabulary、article、question、sys_userPOST /admin/content/save、GET /admin/user/page内容管理页、用户管理页这张表对开发排期很有用建议拿到题目后先把这个表格做出来再开始建项目。3. 技术选型逻辑SpringBoot Vue 的搭配为什么是毕设“安全牌”3.1 SpringBoot在后端能省下多少琐事SpringBoot在后端工程里的好处不需要背概念直接说体感一是内嵌Tomcat不用单独下载一个容器再去部署打包成一个jar就能跑演示和部署都省事。二是Starter依赖体系让引入框架变得非常简洁加一个依赖、写几条配置就能拥有一个可用的Web环境。三是配置集中在application.yml或application.properties里数据库连接、端口、日志、文件上传大小这些常见配置一目了然。在毕设项目里SpringBoot还有一个隐形的优势社区案例极其丰富。你遇到的大部分异常比如数据库连接失败、MyBatis映射不对、跨域被拦截几乎都能在已有的项目经验里找到答案。对第一次做完整Web项目的同学来说这是降低风险的重要因素。3.2 Vue在前端为什么比JSP更适合这个项目如果还在用JSP做前后端混合开发不是不行但这个英语知识应用网站的后端接口和前端页面会耦合在一起改一个按钮样式可能都要重启服务。Vue把前端拆成组件路由负责页面切换axios负责调用后端接口整个开发过程的组织方式会清晰很多。Vue真正的优势是组件化和响应式数据。词汇列表可以拆成搜索栏、表格、分页器、收藏按钮几个组件练习页可以拆成题目卡片、选项列表、交卷按钮。这些组件各自维护自己的状态页面之间用路由参数或接口数据通信团队协作或单人开发都很顺手。另外Vue的生态里还有Element UI / Element Plus这样的组件库表格、表单、弹窗、布局这些后台管理高频组件可以直接用省下的时间足够把业务逻辑写得更完整。3.3 前后端分离的工程结构如何组织一个标准的前后端分离项目我会建议按下面的目录结构来规划english-app/ backend/ src/main/java/com/example/english/ controller/ # 控制器 service/ # 业务逻辑 mapper/ # 数据访问 entity/ # 实体类 config/ # 跨域、拦截器、分页插件等配置 common/ # 统一返回、异常处理、工具类 src/main/resources/ application.yml # 数据库、端口等配置 mapper/ # XML文件 frontend/ src/ api/ # 接口请求封装 router/ # 路由配置 store/ # 全局状态 views/ # 页面组件 components/ # 通用组件 sql/ english_app.sql # 建库、建表、初始化数据 接口文档.md README.md后端只提供接口不关心页面长什么样前端只调用接口不直接操作数据库。这样项目从结构上就是分层清晰的答辩时把目录结构一投影评审老师心里就已经有底了。3.4 什么情况下不要选这个组合写技术选型也得分情况。如果你的学校明确要求使用SSH框架或必须单机运行不需要前端工程化那前后端分离反而会给自己找麻烦。如果项目只是一个小小的图书管理Demo用JSP加Servlet可能半天就能做完引入Vue和SpringBoot反而显得杀鸡用牛刀。SpringBootVue适合的是有一定开发时间、希望完整展示Web开发能力、能在本地独立跑通前后端、并且愿意为了更清晰的工程结构多花几天时间的场景。对大部分Java Web毕设来说这个组合确实是稳的选择但稳不等于无脑选想清楚自己学校的验收要求再动手才不会白费功夫。4. 数据库设计SQL脚本里的核心表关系与初始化数据4.1 用户权限体系从用户表到角色关联表英语知识应用网站至少需要两类角色普通用户和管理员。我习惯按三张表来设计权限部分sys_user存储用户基本信息包括用户名、加密后的密码、昵称、头像、创建时间。sys_role存储角色比如角色编码ADMIN和USER。sys_user_role用户和角色的关联表一个用户可以拥有多个角色。密码千万不能存明文。后端可以使用BCrypt算法对密码加密同一个密码每次生成的哈希串不同数据库中即使数据泄露也无法直接反推出原密码。这一段在答辩时是很好的技术亮点。下面是用户表的简化建表SQL可以作为模板参考CREATE TABLE sys_user ( id bigint NOT NULL AUTO_INCREMENT COMMENT 用户ID, username varchar(64) NOT NULL COMMENT 用户名, password varchar(128) NOT NULL COMMENT BCrypt加密后的密码, nickname varchar(64) DEFAULT NULL COMMENT 昵称, avatar varchar(255) DEFAULT NULL COMMENT 头像URL, status tinyint DEFAULT 1 COMMENT 状态1正常 0禁用, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT系统用户表;4.2 英语知识内容的核心业务表业务表是整个数据库设计的主体。围绕这个项目的核心链路通常要有这么几张表词汇表CREATE TABLE vocabulary ( id bigint NOT NULL AUTO_INCREMENT COMMENT 词汇ID, word varchar(64) NOT NULL COMMENT 单词, phonetic varchar(128) DEFAULT NULL COMMENT 音标, part_of_speech varchar(32) DEFAULT NULL COMMENT 词性, translation varchar(512) NOT NULL COMMENT 中文释义, example_sentence text COMMENT 例句, difficulty tinyint DEFAULT 1 COMMENT 难度1初级 2中级 3高级, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT英语词汇表;阅读文章表、题目表、学习记录表、错题本表的结构设计思路是类似的。文章表要有标题、分类、正文、难度题目表要有题干、选项、正确答案、解析学习记录表要记录哪个用户对哪个内容做了什么操作错题本表要关联用户和题目同时保存用户当时提交的答案方便复盘。需要注意一个细节题目表中选项可以用JSON字符串存储。比如选择题的A、B、C、D四个选项存成一个JSON数组比建四五个字段更灵活。MySQL从5.7开始支持JSON类型直接用这个类型即可后端解析也不复杂。4.3 表关系的设计与冗余取舍词汇表、文章表、题目表本质上都是“学习内容”但我不建议因为都是内容就强行合并到一张content表里。业务场景不同词汇有音标和词性文章有大段正文题目有选项和解析。合并成一张超级表字段会有一大半为空反而难以维护。比较合理的关系是sys_user 和 learning_record 是一对多一个用户有多条学习记录。question 和 wrong_question 是一对多一道题可以被多个用户记录为错题。vocabulary 和 favorite 是一对多一个单词可以被多个用户收藏。learning_record用content_type字段区分内容类型比如1表示词汇、2表示文章、3表示题目。对了外键要不要加我的建议是物理外键尽量少加逻辑关联为主。毕设项目里使用外键约束虽然看起来“关系正规”但会给初始化数据和删除操作带来不少麻烦。比如删一个用户还要先删他的学习记录、错题本、收藏记录外键约束会直接导致删除失败。这种情况下用代码在Service层控制删除顺序比依赖数据库外键更灵活也更好讲。4.4 SQL脚本落地时的几个实用建议SQL脚本是整个项目能否在别人电脑上跑起来的关键。写脚本时我有几个很实用的习惯建库语句明确指定字符集CREATE DATABASE IF NOT EXISTS english_app DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;避免中文乱码。每张表都用COMMENT注释说明用途每个字段也尽量写注释。这个习惯在答辩展示创建表结构时特别加分。建表脚本和初始化数据分开或者放在同一个文件里用注释分隔。推荐使用一份完整的english_app.sql包含建库、建表、插入初始化数据。初始化数据量要保证演示效果词汇至少准备50条、题目至少30道、阅读文章3到5篇。太少会让页面看起来空荡荡太多又会浪费时间制造无意义数据。每个SQL脚本必须能在重新导入后完整执行。建议拿到脚本后用一个新的空库完整跑一遍确保没有任何报错。5. 后端接口的实操细节从统一返回到鉴权分页5.1 统一返回结构与全局异常处理前后端分离项目里接口返回的数据格式必须全项目统一否则前端解析逻辑会写得非常痛苦。我习惯定义这样一套返回结构{ code: 200, message: success, data: {} }其中code是业务状态码200表示成功500表示业务错误401表示未登录或token失效。对应的Java封装类可以这样写Data Builder NoArgsConstructor AllArgsConstructor public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { return Result.Tbuilder().code(200).message(success).data(data).build(); } public static T ResultT error(String message) { return Result.Tbuilder().code(500).message(message).build(); } }除了统一返回还要做全局异常处理。后端接口运行中抛出的异常如果不处理会直接在HTTP层返回一大堆英文堆栈信息既难看又泄露实现细节。可以用一个全局异常处理器把业务异常、参数校验异常、未知异常分别转换成统一返回结构。这样前端拿到的永远是标准格式调试起来非常方便。5.2 登录鉴权从Session到Token的思路转变这个项目的登录鉴权我强烈建议使用JWT方案。流程概括下来是用户提交用户名和密码后端校验通过后生成一个包含用户ID和用户名的令牌。前端收到令牌后存到localStorage后续每次请求都在Authorization头里带上这个令牌。后端写一个拦截器对除登录、注册以外的接口统一校验令牌。校验失败时返回401状态码。JWT的好处在于后端不需要维护Session状态多个服务实例之间也能共享同一个鉴权机制。这个“无状态”的概念在答辩时很容易讲清楚。如果使用Session反而会被追问服务器集群部署时Session如何同步那是更复杂的话题。核心伪代码如下// 登录成功 String token JWT.create() .withClaim(userId, user.getId()) .withClaim(username, user.getUsername()) .withExpiresAt(new Date(System.currentTimeMillis() 1000 * 60 * 60 * 24)) .sign(Algorithm.HMAC256(secret)); // 拦截器校验 try { DecodedJWT jwt JWT.require(Algorithm.HMAC256(secret)).build().verify(token); request.setAttribute(userId, jwt.getClaim(userId).asLong()); } catch (Exception e) { throw new BusinessException(401, 登录状态失效请重新登录); }实际项目中密钥不要写死在代码里应该放在application.yml中通过配置读取。这个小细节也经常被答辩老师问到。5.3 分页查询接口的设计列表类接口基本都要做分页。使用MyBatis-Plus时分页查询非常简单public ResultIPageVocabulary page(int pageNum, int pageSize, String keyword) { LambdaQueryWrapperVocabulary wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.isNotBlank(keyword), Vocabulary::getWord, keyword); PageVocabulary page new Page(pageNum, pageSize); IPageVocabulary result vocabularyMapper.selectPage(page, wrapper); return Result.success(result); }接口返回的数据结构里至少要有records、total、pages、current这四个字段。前端拿到这些数据才能正确渲染表格和分页器。这里要注意pageNum和pageSize一定要做上限校验比如pageSize最大设为100防止一次查出过多数据。5.4 典型接口示例整个项目最核心的接口大概包括注册、登录、词汇分页、提交练习、统计概览。下面以提交练习为例展示一个典型接口的设计请求路径POST /api/exercise/submit请求参数JSON{ userId: 1, answers: [ { questionId: 101, answer: A }, { questionId: 102, answer: C } ] }后端逻辑遍历答案逐题查询正确答案。对比用户答案生成判分结果。答错的题目写入错题本表。所有答题记录写入学习记录表。更新用户统计表中的正确率。返回本次得分和逐题解析。这样一个接口串起了题目、错题本、学习记录、用户统计四张表。答辩时把这段代码拿出来讲能非常直观地展示你对业务链路的理解比泛泛地说“我做了增删改查”强得多。5.5 前后端联调中被忽略的细节写接口的时候有几个细节最容易在前端联调时爆雷跨域配置缺失前端和后端端口不同浏览器会拦截请求。需要在后端配置CorsFilter或者在前端开发服务器配代理。请求体格式不匹配后端接口用RequestBody接收JSON前端却用form表单格式提交会直接报错。日期格式不一致后端返回的时间如果是LocalDateTime默认格式前端直接展示会很难看。建议统一格式为yyyy-MM-dd HH:mm:ss在Jackson配置中全局指定。空值处理返回对象中的null字段前端要用兜底逻辑展示别让页面出现“undefined”。这些细节看似小但都是实际开发中每天都会遇到的事情。把它们提前在接口文档里写明能省去联调阶段的大量沟通成本。6. 前端页面组织与交互Vue项目怎么把接口用起来6.1 用Vue2还是Vue3UI库怎么选这个问题在开发前就要定清楚。考虑到毕设资源、网上案例、组件库兼容性我建议如果没有特殊要求直接用Vue2加Element UI或者Vue3加Element Plus。关键是确定一个组合后不要频繁切换。很多同学卡在环境问题上就是因为一会用Vue2教程的代码一会又装了Vue3的项目语法对不上。如果你拿到的项目模板已经定好了版本那尽量别自己升级大版本。一个项目里混用Vue2和Vue3的写法是最折磨人的事情。6.2 路由设计与菜单结构前端页面应该围绕模块划分路由。一个典型的配置如下路径页面说明/login登录页无需登录/home首页展示平台概况/vocabulary词汇学习页词汇列表、搜索、收藏/reading阅读文章页文章列表、详情/practice在线练习页答题、交卷、查看解析/wrong错题本页错题列表、重练/stats学习统计页图表展示/admin/user用户管理页仅管理员/admin/content内容管理页仅管理员后端菜单和前端路由保持一致后台管理模块单独加一层/admin前缀方便权限控制。路由文件中再加一个前置守卫未登录的跳转到登录页普通用户无法访问管理员页面。6.3 请求封装与token注入前端一定要封装axios请求实例不要在每一个页面里都直接写axios.get。封装的好处是统一管理baseURL、超时时间、请求头、错误提示。下面是一个很常用的封装写法import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.removeItem(token) window.location.href /login } return res }, error { return Promise.reject(error) } ) export default request这样封装好之后所有页面都通过统一的request对象调用后端接口token自动带上401时自动跳回登录页。后续如果要改接口前缀只需要改一处。6.4 核心页面的实现思路词汇列表页是这个项目里最典型的CRUD展示页面。它的核心代码思路是搜索框输入关键词点击搜索后带pageNum和keyword调用分页接口表格或卡片列表展示返回数据分页器变化时重新请求收藏按钮调用收藏接口并更新按钮状态。这个页面把Vue的响应式数据、组件通信、axios请求都串起来了做完它其它列表页基本都能照葫芦画瓢。在线练习页稍微复杂一点。建议用下面的交互流程进入页面后选择一个练习类型加载一组题目。每题显示题干和选项用户点击选项后答案记录在一个本地数组中。交卷按钮提交整个答案数组给后端后端一次判分。返回结果后前端展示总得分、每题正确或错误标记以及解析。这个流程比“逐题单独提交”体验好得多也能体现你对接口批量设计的理解。练习页是答辩时最容易被现场演示的页面值得多花点时间打磨。学习统计页适合引入ECharts。近7天学习次数用折线图展示正确率和错题分布用饼图展示数据来自统计接口。图表会显著提升项目的视觉完成度在答辩演示时也是一个不错的记忆点。6.5 路由守卫与登录跳转路由守卫是前端权限控制的核心。最简单的前置守卫是检查token是否存在router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else if (!token) { next(/login) } else { next() } })如果想区分管理员权限可以把用户角色存储在localStorage或全局状态管理里在守卫里判断to.path是否以/admin开头如果不是管理员角色就跳回首页。这个逻辑写起来不难但能让你的项目在权限控制上显得完整。7. 接口文档与交付整理源码、SQL、文档如何形成闭环7.1 接口文档应该包含什么信息接口文档不是给机器看的是给人和协作看的。一份合格的接口文档每个接口至少应该包含接口名称和业务说明。请求路径和请求方式。是否需要登录、需要的角色权限。请求参数表格参数名、类型、是否必填、说明。返回结果示例成功返回和失败返回各给一个。错误码说明什么时候会返回什么错误码。很多同学在毕设交付时只给一个项目源码接口文档完全没有或者随便拍脑袋写几行字。实际上接口文档是评审老师判断你工程能力的重要材料。代码可能有样式问题但一份结构清晰的接口文档直接说明你确实把项目当作一个产品在交付。7.2 一个接口文档的示例下面以“词汇分页查询接口”为例展示文档里信息的组织方式项目内容接口名称词汇分页查询请求路径GET /api/vocabulary/page权限要求需要登录参数pageNumint必填页码、pageSizeint必填每页条数、keywordstring选填模糊关键词返回示例{code:200,message:success,data:{records:[],total:50,pages:5,current:1}}错误码401 token失效500 系统异常一个接口一行表格可能写不下所以完整文档往往是“表格加详细说明”的结构。建议在文档开头放一段“代码约定”说明统一返回结构、登录鉴权方式、日期格式等全局约定。看完开头这几条任何开发都能快速上手你的项目。7.3 用Swagger和Apifox提升文档维护效率手写文档很容易和代码脱节接口改了几次文档却还停在旧版本。为了解决这个问题可以在后端集成Swagger或SpringDoc通过注解自动生成在线接口文档。这样接口一改文档自动跟着变前端开发直接看在线页面。如果不想让项目依赖太多额外工具也可以把接口定义和维护放在Apifox这类工具里。它支持从Swagger导入、在线调试、一键导出Markdown非常适合毕设项目的接口管理。最终交付时导出一份静态的接口文档放进项目包既整洁又方便评审老师查看。7.4 完整交付包目录结合标题提到的“完整项目源码SQL脚本接口文档”一个清晰的可交付包应该长这样EnglishApp/ -- 01-源码/ -- backend/ -- frontend/ -- 02-数据库/ -- english_app.sql -- 03-接口文档/ -- 接口文档.md -- 04-部署说明/ -- README.md -- 05-演示/ -- 演示视频.mp4源码和SQL脚本保证项目能跑接口文档保证项目能看懂部署说明保证项目能换环境复现。把这三样东西结构完整地交付出去整个毕设的完成度一下子就上来了。8. 从零跑通项目的完整流程与常见坑拿到源码之后的第一步8.1 环境准备清单拿到一份SpringBootVue的SpringBoot项目源码第一步是检查本地环境别急着敲命令。通常需要准备下面这些东西工具建议版本说明JDK1.8或11SpringBoot 2.x常用Maven3.6以上后端依赖管理MySQL5.7或8.0数据库Node.js14到18前端构建npm/yarn随Node安装前端依赖安装IDEA或VSCode任意IDE版本建议不是绝对但如果你完全按我列表里的版本环境来出问题的概率最低。特别是Node版本前端项目如果用了旧版本node-sass新版本Node往往会编译失败这是最典型的坑之一。8.2 导入SQL脚本与修改配置先把SQL脚本在MySQL中执行。使用命令行或数据库可视化工具都可以关键是要保证整份脚本无报错执行。然后打开后端的application.yml修改数据库连接信息server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/english_app?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 你自己的密码 driver-class-name: com.mysql.cj.jdbc.Driver这里有几个容易踩的坑MySQL 8.0的默认加密方式导致连接失败需要加上allowPublicKeyRetrievaltrue。编码和时区不对会导致中文乱码和日期错误characterEncodingutf8和serverTimezoneAsia/Shanghai最好都带上。端口被占用可以在server.port处修改前端代理也要同步调整。8.3 启动后端与前端后端启动有两种方式在IDEA里直接运行Main启动类或者在项目根目录执行mvn spring-boot:run控制台出现Spring Boot启动成功的日志后后端就正常了。前端启动需要先安装依赖然后启动开发服务器npm install npm run dev启动后浏览器访问前端地址比如http://localhost:8081。前端和后端端口不同如果没有配置跨域就需要在前端配置文件里设置代理。以Vue CLI项目为例在vue.config.js中配置module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }配置完成后前端请求/api/xxx时会被自动转发到后端8080端口不会出现跨域问题。8.4 实际运行中常见的坑与排查方法我把实际运行中经常遇到的问题整理成一张表方便按图索骥症状原因解决方式后端启动报数据库连接失败用户名密码错误或驱动版本不匹配检查application.yml确认MySQL已启动前端npm install报node-sass错误Node版本与node-sass不兼容换用推荐的Node版本或改用sass前端页面能开但请求接口404代理没配置或接口路径不一致检查vue.config.js代理和后端Controller路径接口返回500且控制台有NullPointerException后端实体映射或参数缺失查看日志报错行检查前端传参是否完整登录成功后请求仍然401token没传到后端或拦截器路径写错检查request.js拦截器检查后端拦截器排除路径页面中文乱码数据库字符集不对或接口响应编码异常统一使用utf8mb4检查数据库库表字符集排查时要养成看日志的习惯。后端日志明确记录了每个请求和异常位置前端调试工具里Network面板能直观看到请求和响应。把日志和Network面板结合起来看大部分问题都能在十分钟内定位。9. 复盘答辩时会被追问的高频问题与扩展方向9.1 高频答辩问题及应对思路项目做完、演示跑通之后答辩才是真正的考验。我在前面提到的种种设计细节几乎都是答辩问题的来源。整理几个高频问题换个提问角度都是在考“为什么这么设计”“登录为什么要用JWTSession不可以吗”可以从无状态、服务端扩展、小程序/移动端复用等角度回答。“分页查询是怎么做的”可以讲MyBatis-Plus分页插件、MySQL的limit机制、前端如何传递页码参数。“密码存在数据库里安全吗”可以讲BCrypt加盐哈希以及为什么不能用MD5裸存。“错题本的表结构为什么这么设计”可以解释为什么单独建表、为什么不直接存历史记录。“如果用户量很大系统哪里会是瓶颈”可以提到数据库索引、分页查询、部署拆分为进程等扩展思路。这些问题没有标准答案关键是你要真的亲手实现过。只要你把项目里的每张表、每个接口都自己梳理过一遍答辩时基本不会无话可说。9.2 这个项目还能往哪些方向扩展完成一个能跑的毕设只是起点。如果你学有余力或者想让它成为简历上的亮点可以考虑几个扩展方向接入Redis用户登录token实现自动续期首页热词和每日一句做缓存。接入在线词典或翻译接口让词汇页显示更多例句和发音资源。增加学习路径推荐逻辑根据用户做对题目的难度动态推荐下一组练习。把项目部署到云服务器使用Nginx托管前端、运行后端jar包实现公网访问。做一个长期维护的版本补充单元测试、自动化部署脚本等工程化内容。这些方向不需要全部做选一两个深入效果就比堆功能好得多。最后说一点个人体会。我帮人看过不少类似的项目发现最后能拿高分或者在面试里讲明白的同学通常不是代码写得最炫的人而是能清楚地解释每一张表为什么这样设计、每一个接口为什么返回这个结构的人。这个英语知识应用网站代码部分其实中规中矩真正的门槛在于你能不能把“词汇学习—在线练习—错题记录—学习统计”这条链路讲透。把上面提到的每个问题都自己实操和推演一遍你对SpringBootVue前后端分离项目的理解会比只看课程代码深刻很多。
阅读完成 · 觉得有帮助？
