企业官网建设流程全解析

1. 项目拆解：一个毕设题目背后的真实需求

先说结论：这个题目放在Java Web毕设里属于**“业务有亮点、技术不超标、工作量好凑满”的典型类型。很多同学一看到“儿童性教育”这五个字，第一反应是敏感、难做、不好找参考，实际把需求拆开看，它就是一套标准的前后端分离内容管理系统**，核心难点根本不在业务本身，而在两块：一是内容分类和权限控制的粒度怎么设计，二是这类垂直领域的内容安全审核怎么做。

先说适合谁。如果你正在准备毕设，目前只会SSM或Servlet那一套老技术，想借一个项目把SpringBoot+Vue的全栈链路练熟，这个题目非常合适。它比“图书管理系统”“学生选课系统”显得有想法，但又比“电商平台”“在线教育系统”复杂度低，工作量=一周搞定前后端+三天写完论文+两天做完PPT，属于性价比极高的选择。如果拿去参加比赛或者求职项目展示，儿童教育+数字化科普这个赛道也能讲出社会价值和产品思维，比千篇一律的管理系统容易出彩。

这个项目定位为内容展示+会员体系+后台管理三合一平台。前台面向家长和孩子，提供分龄段的性教育知识文章、科普视频、常见问答；后台面向管理员，负责内容发布、分类管理、用户审核、评论管控。技术上就是SpringBoot提供RESTful接口，Vue负责页面渲染和交互，MySQL存储业务数据，JWT做登录态，Redis做缓存（可选，没配也别慌）。核心关键词真心不多：JWT、MyBatis-Plus、Element UI、JWT拦截器、分页查询、文件上传。

2. 技术选型：为什么这套组合是毕设最稳解

2.1 前后端分离的选型逻辑

这个项目选择前后端分离不是什么追求时尚，是被实际需求逼出来的。儿童性教育网站的内容形态非常杂：图文、视频、问答、测评量表，每种内容的管理表单都不一样。如果沿用JSP后端渲染，每一个内容类型的增删改查页面都要在后端写一套模板，工作量约等于做三个管理系统。而Vue+Element UI的好处是，用动态表单配置就能覆盖绝大多数内容类型的录入，后端只负责跟数据打交道，前端组件复用率极高。

实际开发中我建议前端用Vue 2 + Element UI而不是Vue 3 + Element Plus。原因很简单：网上的参考代码、现成组件、踩坑帖子Vue 2多到刷不完，毕设阶段的时间风险比技术先进性重要得多。当然如果你已经熟练Vue 3，那直接用Vue 3 + Vite也没问题，但别在答辩时被问到“为什么不选Vue 3”这种问题就行。后端选SpringBoot 2.7.x，不用最新的Spring Boot 3，因为3.x对JDK版本有硬性要求，而且很多老教程不兼容，没必要给自己添堵。

2.2 核心依赖清单及版本避坑点

这里整理一份我实际跑通的pom清单，供参考。我只是按一名合格开发者在这个场景下最常见的实践做补充，你完全可以在此基础上调整。

<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.18</version> <relativePath/> </parent> <dependencies> <!-- Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- MyBatis-Plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.1</version> </dependency> <!-- MySQL --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.33</version> </dependency> <!-- JWT --> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency> <!-- Lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> </dependencies>

这里有两个非常容易踩的坑。第一，jjwt0.9.1依赖了javax.xml.bind相关的包，JDK 8以上需要手动加jaxb依赖，否则运行时会报ClassNotFoundException: javax.xml.bind.DatatypeConverter。第二，MySQL 8的驱动类名是com.mysql.cj.jdbc.Driver，不是老的com.mysql.jdbc.Driver，而且URL必须带serverTimezone=Asia/Shanghai，不然连库直接报时区错误。这两处几乎是每个做毕设的人都会卡一下的地方，提前写好能省一晚上的排查时间。

2.3 接口文档先行的工作流

这个项目的接口文档建议用Apifox或Postman管理，不要写Word文档。不是Word不行，而是联调阶段前端要看字段名、后端要改字段名，一份Word来回拷贝太容易版本错乱。接口文档先定好请求路径、请求参数、响应结构，然后前后端各干各的，最后再联调，效率会高很多。接口返回统一用{code: 200, message: "success", data: {...}}这个结构，前端axios封装里写一个响应拦截器统一处理code，遇到401跳登录页，遇到500弹错误提示，整个异常处理链路就通了。

3. 数据库设计：儿童内容平台的核心表结构拆解

3.1 表结构整体规划

这个项目的数据库设计，核心表就是用户表、内容表、分类表、评论表、收藏表、角色权限表。实操中建议总共建13到15张表就足够了，不用刻意追求表的数量，答辩时老师问起来每张表都能说清楚才是关键。

我列一下我认为最常见的核心表以及字段设计的理由：

3.2 三张关键表的字段细节

用户表是整个系统中最容易被低估的一张表。这里建议在基础字段之外额外增加age_range字段，用于标记儿童用户的年龄段。原因是儿童性教育内容必须分龄展示，3岁孩子和12岁孩子看到的内容完全是两个层面。没有这个字段，前台做内容推荐就只能一刀切，业务上站不住脚。

文章表最好包含is_top置顶字段和summary摘要字段。置顶控制首页推荐位，摘要用于列表页的卡片展示。很多学生会忽略摘要字段导致列表页直接截取正文，那体验和性能都很差。每一条内容在发布时，要求管理员必须填写摘要，这在前端表单加一个required规则即可。

评论表的status字段非常关键，我的建议是默认所有评论进入待审核状态，管理员在后台一键审核。这种设计虽然增加了管理员工作量，但对于儿童内容平台来说是负责任的做法。答辩时讲到这一点，老师会认为你考虑到了内容安全风险，这是加分项。

3.3 SQL脚本要注意的细节

SQL脚本要在一开始就设计好，不要等项目开发完再回头补。我建议你建表脚本放进sql目录，同时写一份init_data.sql负责插入基础数据（固定分类、管理员账号、几篇示例文章）。为什么要单独拆数据脚本？因为后期写论文时，系统演示需要一些初始数据，老师验收时打开系统就能看到内容，观感会好很多。

另外建议所有表都加上三个公共字段：create_time datetime、update_time datetime、deleted tinyint default 0。deleted字段配合MyBatis-Plus的@TableLogic注解就能自己实现逻辑删除，这样删数据不会真删，对毕设的系统稳定性和数据可恢复性都有好处。

4. 前后端核心功能实现：从业务需求到代码落地

4.1 后端：JWT登录认证与拦截器

儿童性教育平台必须要区分孩子和家长两种身份，所以登录逻辑里要比普通系统多做一步：注册时让用户选择身份角色，或者通过手机号绑定亲子关系。这里我用JWT实现认证，核心代码非常简单。

// JWT工具类核心方法 public String generateToken(Long userId, String role) { Map<String, Object> claims = new HashMap<>(); claims.put("userId", userId); claims.put("role", role); return Jwts.builder() .setClaims(claims) .setExpiration(new Date(System.currentTimeMillis() + 7 * 24 * 3600 * 1000)) .signWith(SignatureAlgorithm.HS256, secretKey) .compact(); } public Claims parseToken(String token) { return Jwts.parser() .setSigningKey(secretKey) .parseClaimsJws(token) .getBody(); }

登录接口在Controller层的实现逻辑是：先根据用户名查询用户，比对密码（用MD5加盐或BCrypt加密），比对通过就生成token返回给前端。前端把token存到localStorage里，每次axios请求在请求拦截器中带上Authorization: Bearer xxx。

拦截器的配置要小心，只拦截需要认证的接口，不要把登录接口自己也拦了。我写的是：

@Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { // 放行登录、注册、首页内容展示等白名单接口 String uri = request.getRequestURI(); if (uri.contains("/api/auth/login") || uri.contains("/api/auth/register")) { return true; } String token = request.getHeader("Authorization"); if (token != null && token.startsWith("Bearer ")) { try { Claims claims = JwtUtil.parseToken(token.substring(7)); request.setAttribute("userId", claims.get("userId")); return true; } catch (Exception e) { // token验证失败，返回401 response.setStatus(401); return false; } } response.setStatus(401); return false; }

注意：不要使用@CrossOrigin注解解决跨域，建议通过全局CorsFilter配置。@CrossOrigin在拦截器存在时经常出现CORS响应头丢失的问题，排查起来很烦。

4.2 前端：Vue路由守卫与动态菜单

前端这边核心是路由配置和权限控制。儿童平台面向两种用户，后台管理功能只对管理员开放，普通用户登录后访问/admin路径应该被拦下。在Vue Router里配置全局前置守卫：

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token'); if (to.path.startsWith('/admin') && !token) { next('/login'); return; } if (token) { const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}'); if (to.path.startsWith('/admin') && userInfo.role !== 'ADMIN') { next('/'); return; } } next(); });

这个守卫同时解决两个问题：一是未登录用户访问后台被踢到登录页，二是普通登录用户访问管理页也被拦下。前端拦一层、后端拦截器拦一层，两道保险。

后台菜单可以根据role字段动态生成，不需要存储权限表。因为角色只有ADMIN和USER两种，写死映射关系比建权限表简单得多，也符合毕设的体量。如果硬要加权限表做细粒度控制反而容易画蛇添足，答辩时一旦被问到权限表里没有的数据就露馅。

4.3 前后端联调的关键：统一返回格式与时间格式化

联调阶段最常见的问题不是接口不通，而是字段类型对不上。后端的LocalDateTime序列化出来是一串数字时间戳，前端拿到的是1699999999999这种东西，根本没法直接展示。解决方案是在application.yml里配置全局时间格式化：

spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai

另外建议后端所有查询接口都封装成分页返回。格式统一为{ total: 200, records: [...] }，前端Element UI的el-table和el-pagination组件直接对接这两个字段，几乎不需要额外适配。我在做这个项目时一开始没有统一分页格式，前端每写一个列表页面都要单独调整数据结构，后来花了一个下午全部重构。这个教训希望你不要再踩一遍。

5. 内容管理后台：表单设计是效率放大器

5.1 管理员后台的功能结构

后台管理页面建议拆成五个模块：内容管理、分类管理、评论审核、用户管理、数据统计。其中数据统计可以放几个ECharts图表，展示每天的文章浏览量、视频播放量、用户增长曲线。这个模块工作量不大，但对最终呈现效果提升明显，论文里的系统截图放一个图表页比放一张空荡荡的列表好看太多。

内容管理最好用Tab切换方式区分文章和视频，不要混在同一个列表中。前端通过el-tabs组件即可实现，后端则是两个不同的Controller接口。混在一个列表里会导致筛选字段不通用，反而增加复杂度。

5.2 富文本编辑器的选择

文章内容编辑需要一个富文本编辑器。这里强烈推荐wangEditor，中文文档友好、集成简单、体积适中。不要用UEditor这类老掉牙的编辑器，也不建议一上来就上TinyMCE这类英文生态的。

<template> <div> <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" /> <Editor v-model="content" :defaultConfig="editorConfig" @onCreated="handleCreated" /> </div> </template> <script> import '@wangeditor/editor/dist/css/style.css' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' export default { data() { return { editorRef: null, content: '', toolbarConfig: {}, editorConfig: { placeholder: '请输入文章内容...' } } }, methods: { handleCreated(editor) { this.editorRef = editor } }, beforeUnmount() { const editor = this.editorRef if (editor == null) return editor.destroy() this.editorRef = null } } </script>

图片上传问题：wangEditor默认把图片转成base64存在content里，纯本地存储没毛病，但内容一多数据库会迅速膨胀。更好的做法是配置editorConfig里的MENU_CONF，把图片上传指向后端的/api/upload接口，返回图片URL。后端文件上传我建议写到本地磁盘的upload目录下，再用一个虚拟路径映射对外开放访问，不要硬塞到static目录里。SpringBoot虚拟路径映射的配置如下：

@Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/upload/**") .addResourceHandler("file:" + System.getProperty("user.dir") + "/upload/"); } }

6. 前台页面：儿童友好型UI的设计思路

6.1 色彩与交互的取舍

前台首页的UI设计是展示项目亮点的重要部分。儿童性教育网站不同于普通资讯网站，它的受众有相当一部分是低龄孩子，所以视觉风格必须明亮、柔和、友好，但不能幼稚到让家长觉得不专业。

我在实际开发中采用的方法是：主色调选浅绿色或天蓝色，给人一种健康、安全、自然的感觉，主色值为#42b983或#409EFF这类清爽的颜色，圆角按钮用大圆角border-radius: 12px，卡片式布局配合阴影提升层次感。字体建议保持默认或使用无衬线字体，正文内容不使用手写体或艺术字体，保证可读性。

首页内容分为五个区块：顶部导航、轮播图（平台的科普活动或推荐课程）、分类入口（按年龄分段）、推荐内容瀑布流、底部关于我们。顶部导航的右侧要有“登录/注册”按钮和用户头像下拉菜单，这个是最容易遗漏的交互细节。

6.2 分龄内容推荐逻辑

分龄的逻辑其实不复杂。前台内容列表接口接收一个ageRange参数，后端查分类表时通过JOIN关联内容表，只返回符合该年龄段的内容。要注意的是，有些内容没有设置年龄范围，做默认全年龄可见。SQL中的写法大概类似：

SELECT a.id, a.title, a.summary, a.cover, a.view_count FROM article a LEFT JOIN category c ON a.category_id = c.id WHERE a.status = 1 AND (c.age_range = #{ageRange} OR c.age_range IS NULL OR c.age_range = 'ALL') ORDER BY a.is_top DESC, a.create_time DESC

家长预览模式下，可以在用户信息里绑定孩子的年龄段，这样网站首页的推荐内容就会自动按照年龄段过滤。这个功能在答辩演示时非常出效果，老师能看到不同年龄段看到的内容是不同的。

6.3 视频播放与文章详情的交互细节

视频详情页用HTML5的<video>标签即可，不要引入太多第三方播放器依赖。文章的阅读页需要注意两点：第一是正文字号要大，行高调整为1.8到2这个范围，不能像普通站点那样用适合成人的小字号；第二是文章底部设置“返回顶部”按钮，因为儿童和家长往往在阅读长文时需要反复拖动页面，这个按钮能明显改善体验。

评论功能建议放在文章详情底部，但要注意儿童用户的评论需要提示“内容待审核”。前端在提交评论后弹窗提示“感谢你的分享，内容审核通过后才会展示哦”，这个细节体现了对内容安全的重视，也算是系统区别于普通CMS的一个真实业务差异点。

7. 接口文档与联调：从开发到上线的必经链路

7.1 接口文档的核心三要素

接口文档不必长篇大论，但以下三点必须写明：请求路径与请求方式、请求参数（字段名、类型、是否必填、示例值）、响应示例。我在Apifox里给每个接口都配了Mock示例，前端开发时不用等后端启动就能先拿Mock数据渲染页面，联调效率提升非常明显。

后端接口划分核心共20个左右。我按模块整理成下面的表格供参考：

7.2 联调时的三个经典纠纷

第一是404问题，前端调不通时先检查请求路径和Controller映射是否完全一致，/api/article/list和/api/articles/list这种单复数差异是最常见的坑。第二是参数名不一致，前端传userId，后端接收user_id，联调时半天找不出问题，最后发现是对齐字段名时看错了。第三是跨域问题，前端起了8080端口，后端在8081，没配置CORS直接请求就会报错。跨域配置我建议写一个CorsConfig，在SpringBoot里实现WebMvcConfigurer接口的addCorsMappings方法，放行所有来源，开发阶段先这样，部署时再收紧。

8. 部署与演示：从本机到老师面前

8.1 本地打包与部署踩坑

后端打jar包前要确保application.yml里的数据库地址改为本机或服务器的实际地址，不要用localhost。打包命令是mvn clean package -DskipTests，生成的jar包在target目录下。运行命令是java -jar xxx.jar，注意要让服务器或本机保持8080端口不被占用。

前端构建时，vue.config.js里的publicPath建议设为'./'，否则部署到非根路径时资源全部404。构建命令是npm run build，生成dist目录，把这个目录扔进Nginx即可。这里有几个同学的部署方式是把前端dist直接复制到SpringBoot的static目录下，再一并打包进jar包，这样只需要一个进程就能跑完整套系统，对毕设演示来说非常友好。缺点是前后端代码耦合在一起了，但考虑到毕设不需要真正上线，这种方式性价比很高。

Nginx配置示例：

server { listen 80; server_name localhost; root /home/project/dist; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080/api/; proxy_set_header X-Real-IP $remote_addr; } location /upload/ { proxy_pass http://127.0.0.1:8080/upload/; } location / { try_files $uri $uri/ /index.html; } }

8.2 答辩现场演示的技术准备

答辩演示时，最好准备两个浏览器窗口或者两个端口：一个前端页面，一个后端Swagger或Apifox接口面板。提前准备好测试账号，管理员账号和普通用户账号各一个。展示顺序我建议是：先展示系统首页和内容展示效果，然后登录管理员后台，走一遍“新建文章-编辑内容-发布文章-前台查看效果”的闭环，再补一下评论审核、用户管理、数据统计这几个模块。

有一个容易被忽视的点：视频和图片素材要提前准备好，不要现场临时找。素材建议选与儿童科普相关的免费授权图片、动画短片，放两个到三个就够。现场演示时如果因为素材缺失导致页面空荡荡，视觉冲击力会大打折扣。

9. 常见问题与排查技巧实录

9.1 数据库连接报错速查表

9.2 前端白屏排查三步法

第一步按F12打开控制台，看有没有红色报错，常见的是组件没注册、方法没定义、属性不存在。第二步看Network面板，检查请求是否发出、状态码是多少、返回数据是否正常。第三步看路由，确认当前访问路径是否在路由表里注册过。白屏90%是这三个原因之一，很少出现诡异问题。

9.3 JWT过期后页面表现异常

JWT默认设置7天过期，但开发过程中经常改了代码又续不上token，导致前端莫名其妙地请求401。调试时可以在后端拦截器的401响应里加上response.setHeader("Access-Control-Expose-Headers", "Authorization")，前端响应拦截器捕获到401就自动清掉本地token并跳转登录页，这样用户体验会好很多。

10. 毕设论文与技术成长视角

10.1 论文结构的对应关系

很多同学做完了系统不知道论文怎么写，其实论文的每一章都和开发步骤一一对应。系统需求分析对应业务模块的梳理，系统设计对应技术架构和数据库设计，系统实现对应核心代码和界面截图，系统测试对应功能测试用例和结果分析。我把开发过程完整走过来之后，论文的初稿基本就是两周的课余时间。

10.2 一个值得思考的加分设计

最后再说一个实际运营层面的小心得。如果我想让这个项目在答辩时更有深度，我会在系统里加入一个简单的学习记录模块，记录每个孩子观看内容、阅读文章、完成问答的时长和次数，家长可以在后台查看孩子的学习轨迹。这个功能本质上就是一张表加两个查询接口，但它在业务上体现了“教育闭环”的思维——不只是提供内容，还要跟踪学习效果。答辩时讲这个设计，老师感受到的不只是你会写代码，而是你理解了一个教育类产品的本质。

从动手写第一行代码到最后跑通完整项目，我做这类全栈项目最深的一个体会是：项目本身不复杂，复杂的是把每个环节都串起来的那条线。数据库设计不合理，后面写接口处处受制；接口文档不规范，联调阶段互相甩锅；前端不提前考虑权限，做完再改等于重写。这条链路上每个环节都踩一遍坑，做完这个毕设，你对一个完整Web项目从零到一的全流程就算是真正有体感了。这套东西做完之后，去面对任何一套类似的“前端框架+后端框架+数据库”的项目，你都不会再发怵。