1. 需求拆解这套英语知识应用网站管理系统到底在解决什么问题1.1 没有系统之前英语学习场景有多混乱先聊聊我为什么要做这个项目。身边不少朋友在备考四级、考研英语也有人在帮孩子整理英语学习资料大家的痛点出奇地一致单词记在本子上容易丢阅读文章存在网盘里懒得翻学习进度全凭感觉今天背到哪明天完全不记得。这些需求单看都很小但堆在一起就是灾难。你要维护一份单词表一份错题记录一份阅读收藏还要自己算复习周期手动安排每日计划。做完一天的学习整理资料花的时间比真正学习还长。我在做过几个内容管理类项目之后越来越确定一件事英语学习工具的核心不是存储内容而是把内容和人的学习行为连接起来。这也是我把这个系统定义为英语知识应用网站管理系统而不是英语背单词网站的原因——它既要管知识内容也要管用户行为。1.2 功能边界哪些模块必须第一版就做出来第一版我规划了七个模块恰好可以分成两类内容生产侧和用户使用侧。内容生产侧是管理员后台主要做英语知识的录入和维护包括单词库单词、音标、词性、释义、例句、难度等级、阅读文章库标题、正文、分类、封面图、上下架状态、分类标签管理。用户使用侧是前台页面包括注册登录、每日学习计划、单词卡片学习、文章阅读与收藏、学习记录统计、简单的自测练习。为什么要这样切核心原因是内容生产和使用场景的节奏完全不同步。管理员可以批量录入单词和文章用户则是高频地、碎片化地消费这些内容。如果这两套逻辑混在一起页面上全是管理功能用户体验会很差如果完全没有管理端内容又只能写死在数据库里网站就没有生命力。我特意在需求阶段拦住了在线音标播放AI口语评测好友学习PK这些花哨功能。不是说这些没用而是对一个毕业设计或者个人练手项目来说第一版的核心价值是把内容展示-用户学习-进度记录这条主链路跑通把前后端分离的工程化能力练扎实。等主链路稳定了再往上加语音、加算法、加社交都没有问题。1.3 用户角色与权限设计思路这个系统我设计了两个角色普通用户和管理员。实际落地的权限控制不需要上Spring Security那套重量级框架用SpringBoot拦截器加自定义注解就能解决大部分问题。普通用户能看到的接口都是和学习行为相关的比如获取每日单词列表、提交学习记录、收藏文章、查询自己的统计进度。管理员接口则集中在内容管理上单词表CRUD、文章发布与下架、分类维护。我在设计接口时约定了一个简单的规则所有需要登录的请求都要求Header里带token所有管理员接口额外校验角色字段。这样前后端都清晰后端拦截器统一处理前端通过路由守卫控制页面访问。这套设计虽然简单但已经能覆盖这个体量系统的全部需求。等以后真要上复杂权限再迁移到Spring Security加JWT也不迟底层的用户表结构是兼容的。2. 技术选型的原因为什么是SpringBootVueMyBatis这套组合2.1 SpringBoot负责什么Vue负责什么SpringBoot在这套系统里的定位非常明确提供稳定的后端服务把数据库的操作结果以JSON的形式暴露给前端。它内置了Tomcat解决了传统SSM项目繁琐的XML配置问题一个main方法就能启动整个后端应用。对做管理类系统的开发者来说SpringBoot几乎是当前最稳妥的起点社区资料多遇到问题搜一下就有答案。Vue负责的是浏览器里的交互体验。整个网站分前台用户端和后台管理端前台要展示单词卡片、文章列表、学习日历后台要做内容表单和数据表格这些全是典型的视图层工作。Vue的组件化机制非常适合这种场景一个单词卡片是一个组件一张文章列表是一个组件管理员用的表单和分页表格也能拆成组件复用。数据驱动的思想让页面状态变得可控不再像传统jQuery那样手动操作DOM。也就是说后端管数据能不能拿到前端管数据长什么样、用户怎么操作。这种前后端分离的结构最大的好处是开发和调试互不阻塞我甚至可以把管理后台页面直接部署到另一台服务器上只要接口地址配置正确就能跑。2.2 MySQL和MyBatis的分工逻辑MySQL作为关系型数据库存储的是结构化数据用户信息、单词条目、文章内容、学习记录、收藏夹。这些数据之间有明确的关系比如一条学习记录必须关联一个用户和一条单词数据用MySQL的外键和索引来约束能保证数据完整性。字符集我建库时就定为utf8mb4因为英语系统虽然主要是字母但例句和文章里经常会混入特殊字符utf8mb4对这类内容的兼容性是最好的。MyBatis在这里扮演的是数据库访问层的角色。它最大的特点就是SQL还是你的但Java对象映射它帮你做。有人会问为什么不用MyBatis-Plus这种增强工具我的回答是MyBatis-Plus确实能省掉大量单表CRUD的代码但如果你正在学习项目先用原生MyBatis写几个复杂的SQL你才能真正理解resultMap、动态SQL、分页插件的工作原理后面再用增强工具就会很轻松。我在这套系统里大量使用了MyBatis的动态SQL。举一个实际例子管理员后台的单词列表筛选条件很多可能同时按关键词、难度等级、分类筛选而且这三个条件可能都为空。如果每个组合都写一个SQL方法那代码会膨胀得很厉害。用where加if标签一条SQL就能覆盖所有组合这正是MyBatis最核心的价值。2.3 前端路由与工程化方案Vue这边我用的是Vue Router管理路由。前台按功能分成首页、学习中心、文章阅读、个人中心几大板块后台管理独立挂到/admin路径下。路由层级一开始就要设计好不然后面加页面会改得很痛苦。工程化方面使用Vue CLI搭建项目社区里也推荐先用Vue CLI因为它帮你封装好了webpack的所有配置逻辑。在vue.config.js里设置开发代理解决跨域问题生产环境则通过打包后把dist目录交给Nginx托管。这套流程已经非常成熟踩坑概率低适合作为整套系统的前端基础。3. 数据库设计单词、用户、学习轨迹怎么落库3.1 核心表结构拆解一套内容管理系统数据库设计得好不好决定了后期接口写起来是流畅还是别扭。我设计了这个系统的核心表user表保存用户基础信息字段包括id、username、password、email、role、create_time。密码字段我只存BCrypt加密后的密文绝不存明文这是在线系统的底线。角色字段用admin和user区分因为目前只有两级角色用一个字段就够了不需要单独建角色表。word表是单词库字段包括id、word、phonetic、part_of_speech、meaning、example_sentence、example_translation、difficulty、category_id、create_time。difficulty用1到5的整数表示方便按难度推送。category_id关联分类表用来做单词分类筛选。这里有一个容易被忽略的点例句一定要配翻译不然学习卡片上用户看不懂句子这个功能就废了一半。article表保存英语文章字段包括id、title、content、cover_image、category_id、status、create_time、update_time。status字段用1和0表示上架和下架。前台列表只查询status等于1的文章管理员端可以管理所有状态。learning_record表是这套系统的灵魂。它记录用户每次学习行为字段包括id、user_id、word_id、status、study_time、review_count、last_review_time。status我用一个整数表示学习阶段比如0表示新学1表示已认识2表示需复习。通过查询这个表就能回答某个用户今天学了哪些单词哪些单词长期没有复习这类问题。还有favorite收藏表字段包括id、user_id、target_type、target_id、create_time。target_type用来区分收藏的是单词还是文章这样的设计虽然多了一步判断但一张表就能支持两类收藏避免了建两张收藏表。3.2 学习记录与统计报表的数据来源我做个人中心里的学习日历和累计学习统计时数据全部来自learning_record表。统计维度有两个按天统计学习单词数量按单词统计复习次数。SQL可以用DATE_FORMAT(study_time, %Y-%m-%d)对时间字段做分组再配合COUNT(*)就能拿到每天的完成数。前端日历组件拿到这个维度数据后按日期渲染数字和背景深浅就能展示学习热力图。这里我踩过一个坑如果只用study_time做统计会导致一条单词只被统计一次但我每天学习时会多次点击认识按钮所以要结合last_review_time和时间范围去重具体做法是在Mapper里写一个带DISTINCT word_id的分组语句。3.3 关键的建表SQL示例CREATE TABLE word ( id INT NOT NULL AUTO_INCREMENT, word VARCHAR(64) NOT NULL COMMENT 单词, phonetic VARCHAR(128) DEFAULT NULL COMMENT 音标, part_of_speech VARCHAR(32) DEFAULT NULL COMMENT 词性, meaning VARCHAR(512) NOT NULL COMMENT 中文释义, example_sentence TEXT COMMENT 例句, example_translation TEXT COMMENT 例句翻译, difficulty TINYINT DEFAULT 1 COMMENT 难度1-5, category_id INT DEFAULT NULL COMMENT 分类ID, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_word_category (category_id), KEY idx_word_difficulty (difficulty) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT英语单词表;注意两点一是idx_word_category和idx_word_difficulty这两个索引是为了让后台筛选列表在数据量大时不会全表扫描二是example_sentence用TEXT类型而不是VARCHAR因为例句虽然不长但未来可能改成短文示例TEXT能避免长度溢出问题。4. 后端SpringBootMyBatis核心接口逐层实现4.1 Controller层接口设计规范后端代码采用标准的Controller-Service-Mapper三层结构。Controller不写业务逻辑只管接收参数、调用Service、返回统一格式的Result对象。我定义了一个通用的返回结构public class ResultT { private Integer code; // 200成功400参数错误401未登录500异常 private String message; private T data; }这个统一返回结构太重要了。没有它前端axios拦截器就没法统一判断请求是否成功。我规定所有接口都返回这个Result前端只需要看code是否为200其他情况统一走异常处理弹窗。这也让后端的全局异常处理器有了用武之地业务异常直接抛出BusinessException由RestControllerAdvice捕获后封装成Result返回不用在每个Controller里写try-catch。以单词分页查询接口为例GetMapping(/admin/word/list) public ResultPageResultWordVO list(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword, RequestParam(required false) Integer difficulty, RequestParam(required false) Integer categoryId) { return Result.success(wordService.pageQuery(pageNum, pageSize, keyword, difficulty, categoryId)); }接口参数设计遵循一个习惯筛选条件用普通参数接收传POST body再套一层JSON只会在前端拼接数据时制造麻烦。分页参数给默认值保证前端漏传页面也不会报错。4.2 Service层业务逻辑和事务边界Service层是业务逻辑的主要承载方。举两个有代表性的场景。第一个是用户报名每日学习计划。这个操作涉及两步先查询当天是否已经生成过学习计划如果没有则从单词表里随机抽取20个难度适中的单词插入学习记录表如果已经生成则直接返回当天计划。这个逻辑必须放在Service层而且需要加Transactional防止插入一半失败导致数据不完整。Override Transactional(rollbackFor Exception.class) public ListWordVO generateDailyPlan(Integer userId) { LocalDate today LocalDate.now(); ListLearningRecord records learningRecordMapper.selectByUserAndDate(userId, today); if (!records.isEmpty()) { ListInteger wordIds records.stream().map(LearningRecord::getWordId).collect(Collectors.toList()); return wordMapper.selectByIds(wordIds); } ListWord words wordMapper.selectRandomWords(20); for (Word word : words) { LearningRecord record new LearningRecord(); record.setUserId(userId); record.setWordId(word.getId()); record.setStatus(0); record.setStudyTime(new Date()); learningRecordMapper.insert(record); } return convertToVO(words); }第二个场景是统计个人学习报告我用了多条聚合查询。一开始我图省事在Controller里拼统计逻辑后来发现Controller越来越臃肿就全部收进Service。每个统计项单独写一个Mapper方法比如统计总学习天数、总学习单词数、近7天学习趋势。分开写的好处是每个SQL都清晰可测以后加缓存也容易。4.3 Mapper层SQL细节和分页插件用法Mapper层是MyBatis的主场。我项目管理目录下的resources/mapper文件夹里放所有XML文件。这里重点说PageHelper分页插件的用法这也是网上提问率最高的点之一。PageHelper的使用规则很简单在Mapper方法执行前调用PageHelper.startPage(pageNum, pageSize)紧接着执行的一条SQL会自动被拦截生成limit语句并返回总条数。但这里有两个极易踩的坑。第一PageHelper.startPage必须紧跟Mapper方法调用中间不能穿插其他SQL。因为PageHelper基于ThreadLocal实现如果你先调用了另一个查询分页参数就会作用在那个错误的查询上。第二PageHelper只对紧随其后的一条查询生效如果一条Service方法里执行了两个查询第二个查询并不会被分页需要重新调用startPage。在XML中写动态SQL的典型写法select idpageQuery resultTypecom.example.entity.Word SELECT id, word, phonetic, part_of_speech, meaning, example_sentence, difficulty, category_id, create_time FROM word where if testkeyword ! null and keyword ! AND (word LIKE CONCAT(%, #{keyword}, %) OR meaning LIKE CONCAT(%, #{keyword}, %)) /if if testdifficulty ! null AND difficulty #{difficulty} /if if testcategoryId ! null AND category_id #{categoryId} /if /where ORDER BY create_time DESC /select这里用CONCAT(%, #{keyword}, %)而不是%${keyword}%是为了防止SQL注入。${}做字符串拼接会把参数当SQL片段解析#{}则通过预编译传值安全性和性能都更好。关于MyBatis缓存我建议在联调阶段先关闭二级缓存。默认本地缓存是开启的这会导致你在数据库里改了数据接口查出来还是旧值。排查了半天才发现是缓存问题。开发阶段在application.yml里设置cache-enabled: false上线时再按需开启。5. 前端Vue页面组装与联调实测5.1 Vue环境配置与项目初始化我本地开发用的是Vue 2.6加Element UI。先用Vue CLI创建项目npm install -g vue/cli vue create english-web创建过程中选手动配置勾选Router和Vuex。Element UI按需引入组件时容易漏掉样式文件所以我在main.js里直接全量引入虽然打包体积稍大但对内部系统来说加载速度完全可接受胜在省心。项目目录结构按页面划分src/ api/ // 按模块封装的axios请求 assets/ // 静态资源 components/ // 通用组件单词卡片、分页、上传 router/ // 路由配置 store/ // Vuex存储用户信息 views/ home/ // 前台首页 study/ // 学习中心 article/ // 文章阅读 user/ // 个人中心 admin/ // 后台管理路由配置需要注意一点后台管理页面的路由要嵌套在/admin下并且通过路由守卫判断登录状态和角色。如果没登录直接访问/admin直接重定向到登录页如果登录了但不是管理员则提示无权限。这些逻辑放在router.beforeEach里最合适。5.2 axios封装和跨域处理方案前后端分离开发最痛的就是跨域。我在开发环境用了Vue CLI的代理方案在vue.config.js里配置module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }这样做的好处是前端代码里请求路径统一写/api/xxx开发环境被代理到后端8080端口生产环境只需要在Nginx里把/api前缀转发到后端服务即可前端代码一行不用改。这是目前最省心、最不容易出错的跨域方案。axios请求封装里我统一做了三件事请求拦截器添加token到Header响应拦截器判断Result的code非200状态统一抛出错误提示。还有一个细节响应拦截器里做登录过期处理如果code是401就清空本地用户信息并跳转登录页避免用户看到一堆看不懂的报错弹窗。5.3 典型页面实现单词卡片页单词卡片页是学习中心的核心页面。设计思路是一张卡片展示单词的音标、词性、中文释义例句放在下面一个折叠区域用户点击认识或模糊按钮后调用后端接口提交学习记录然后自动加载下一个单词。组件的核心逻辑是维护一个currentWord对象async loadNextWord() { const res await getDailyPlan({ userId: this.userInfo.id }) this.wordList res.data this.currentIndex 0 this.currentWord this.wordList[this.currentIndex] }提交学习记录后更新当前索引索引超出列表长度时说明当天的20个单词学完了展示完成页。这个页面做好后我明显感觉到Vue的数据驱动大大简化了逻辑所有更新只需改data里的值视图自动响应不用再像以前写jQuery那样费心去查DOM。后台管理页面则大量用到el-table和el-form。单词管理页用el-table展示数据配合el-pagination分页组件分页参数通过事件回调更新查询条件。表单校验用Element UI自带的rules规则比如单词和释义必填难度必须是1到5的整数这些校验规则直接配置在表单字段上大大减少手写校验代码的量。5.4 联调阶段最常遇到的三个前端问题联调阶段我遇到过的三个问题值得记下来。第一个是接口返回的日期格式。后端默认返回的时间戳前端展示时直接调new Date(timestamp).toLocaleDateString()转格式。后来发现不同的浏览器表现还不太一样所以我在后端加了一个全局的Jackson配置统一返回yyyy-MM-dd HH:mm:ss格式的字符串前端直接展示省事很多。第二个是单词卡片出现的时候页面闪烁。原因是在axios请求返回前当前单词为空对象模板里渲染空字段导致布局抖动。解决办法是加一个v-ifcurrentWord判断数据到了再渲染卡片加载中展示骨架屏。第三个是路由守卫死循环。如果用户已经登录但是角色不是管理员我在beforeEach里又想让他跳转首页结果触发新的路由跳转又进入了守卫就循环了。解决方法是明确指定重定向目标页时不再进入守卫判断。这个问题很隐蔽没有浏览器调试工具根本发现不了建议做权限拦截的朋友多注意这类递归陷阱。6. 整个项目从零部署的完整链路与踩坑记录6.1 本地环境准备JDK、MySQL、Maven、Node这套系统的全部依赖就四项JDK 8、MySQL 8、Maven 3.6、Node 14。JDK安装后一定要配置JAVA_HOME环境变量否则SpringBoot无法启动。MySQL安装后建议顺手把字符集设成utf8mb4用Navicat或命令行建好数据库后执行建表SQL。Maven的pom.xml里我整理了核心依赖parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.14/version /parent dependencies dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version /dependency dependency groupIdcom.github.pagehelper/groupId artifactIdpagehelper-spring-boot-starter/artifactId version1.4.7/version /dependency dependency groupIdcom.auth0/groupId artifactIdjava-jwt/artifactId version3.19.2/version /dependency /dependencies注意mysql-connector-java版本必须和MySQL服务端版本大版本一致8.0的驱动连接8.0的MySQL完全没有问题。如果连的是MySQL 5.7驱动用5.1.49更稳但连接串里的驱动类名要写com.mysql.jdbc.Driver而不是8.0的com.mysql.cj.jdbc.Driver。application.yml里最关键的配置是数据库连接串spring: datasource: url: jdbc:mysql://localhost:3306/english_system?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8mb4 username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.entity configuration: map-underscore-to-camel-case: true cache-enabled: falsemap-underscore-to-camel-case这个配置非常关键它能让数据库的create_time字段自动映射到Java类的createTime属性避免在结果集映射里写一堆columnMap。这就是为什么我用原生MyBatis时特别强调要理解resultMap理解了才会珍惜这个自动映射开关。6.2 打包部署顺序与常见故障整个项目打包部署的流程我梳理过前后端分开操作后端先执行Maven打包mvn clean package -DskipTests打出来的jar包在target/目录下启动命令是java -jar english-web-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod如果生产环境的数据库地址和开发环境不一样我建议在application-prod.yml里单独维护生产配置启动时指定--spring.profiles.activeprod切换。这样开发环境连本地库生产环境连服务器库代码不用改。前端打包更简单npm run build生成的dist目录就是全部静态资源。我习惯用Nginx托管前端静态文件同时配一个反向代理把API请求转发到后端server { listen 80; server_name yourdomain.com; location / { root /opt/english/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Real-IP $remote_addr; } }这里最关键的是try_files $uri $uri/ /index.html;这一行。没有它Vue Router用history模式时刷新非首页路由会直接404。这个配置能把所有找不到的路径都安全地交给前端路由处理。部署中另一个常见故障是后端端口被占用。SpringBoot默认端口是8080如果服务器上已经跑了别的服务启动会报端口占用错误。最省事的办法是在启动命令里加参数java -jar english-web-0.0.1-SNAPSHOT.jar --server.port8081或者直接在application-prod.yml里写死端口号比每次敲命令更靠谱。6.3 上线后必做的几件事系统跑起来之后有几样优化是上线前必须做完的否则就是给自己埋雷。第一给学习记录表的user_id和study_time加上组合索引。初期数据量小感觉不出来但我测试时导入了3000条学习记录按用户和时间范围查询的速度立刻慢了一个数量级。加索引之后查询回到毫秒级。加这个索引是因为个人中心的学习日历就是按用户和日期查的索引能直接命中查询条件。第二添加一个简单的登录频率限制。我用SpringBoot的拦截器加了一个基于IP的请求次数校验同一个IP一分钟内登录失败超过5次就锁定时长。这个功能不需要引入Redis用一个内存Map就能实现但对防恶意尝试登录有明显作用。第三准备一份数据库备份脚本。MySQL的mysqldump命令做每日全量备份再配合系统自带的crontab定时任务凌晨两点自动执行mysqldump -u root -p密码 english_system /backup/english_$(date %Y%m%d).sql备份文件保留最近7天即可用find /backup -name *.sql -mtime 7 -delete自动清理。这套组合是轻量系统最可靠的保障方案。最后说说我对这套系统的整体感受。英语知识应用网站管理系统名字听起来不小本质上就是一套标准的前后端分离内容管理项目。但它把SpringBoot、Vue、MySQL、MyBatis这几块最常见的技术栈完整地串了起来每一个环节都有值得深入挖掘的细节。做完这个项目再看其他的管理系统基本都能一眼看出它的表结构设计、权限组织和接口分层逻辑。如果你正准备做类似的系统我的建议很简单先把主链路跑通再回来优化细节不要一开始就想着把所有功能都做全。搭好骨架后续往上加功能只是一个不断积累的过程。