企业官网建设流程全解析

直接上手聊吧。这个项目标题很直白：Java基于Spring Boot+Vue的中小学生辅导平台。如果你正在毕业设计、个人项目或者公司内部想搭一套在线教育系统，大概率搜到过类似的关键词。今天我不打算讲那些“从零到一搭建”的套话，而是想从实际开发的角度，把这个项目掰开揉碎：为什么选这套技术栈、核心模块怎么设计、前后端联调时有哪些坑、部署上线又该怎么处理。我尽量按真实项目推进的顺序来写，里面的经验都是实际操作过、真正踩过坑才总结出来的，希望对你有参考价值。

1. 项目整体设计与技术选型思路

1.1 为什么是Spring Boot + Vue

先回答一个新人最爱问的问题：做这类系统，Java那边框架不少，前端也不止Vue一家，为什么偏偏是Spring Boot加Vue的组合？

从后端角度说，Spring Boot现在是Java生态里做Web应用事实上的标准。它的价值不在于某个单一功能多强，而在于把整个开发流程里的琐碎工作压缩到了最低限度。传统SSH（Spring MVC + Hibernate）时代，一个接口要写一堆XML配置、要管理各种Bean的生命周期、要手动处理事务边界，光是把骨架跑起来就够折腾半天。Spring Boot通过自动配置和约定大于配置，把大量样板工作干掉了，开发效率完全不在一个量级。对于中小学生辅导平台这类业务逻辑并不算极端复杂、但需要快速迭代上线的系统，Spring Boot几乎是首选。

前端用Vue，核心原因是它的上手曲线和组件化开发模式非常适合这个项目。我见过不少团队用jQuery或者传统模板引擎拼页面，前期快，后期一改需求就头疼。Vue的双向数据绑定、组件复用和生态成熟度，让一个前端页面从“能看”变成“好用”的成本低很多。另外，Vue搭配vue-router做前端路由、vuex或Pinia做状态管理，这套组合拳在前后端分离场景下非常成熟，社区资料和可参考的代码也特别多，遇到问题基本搜得到现成方案。

1.2 整体架构设计

这个项目的整体架构，我倾向于采用经典的前后端分离模式，整个系统分为三类端：

• 学生端（Web页面）：面向中小学生，提供课程浏览、视频播放、在线作业、考试练习等功能。
• 教师端（Web页面）：面向辅导教师，提供课程管理、作业批改、学生管理等功能。
• 管理后台（Web页面）：面向平台运营人员，负责用户管理、订单管理、权限配置和系统监控。

后端统一通过RESTful API对外提供服务，按业务模块拆分成多个Controller和Service，用户模块、课程模块、订单模块、作业模块、统计模块等各司其职。

技术栈细节可以这样定：

我见过不少人纠结要不要直接用Spring Cloud那套微服务，对这个项目来说完全没必要。单机部署加一个合理分层的单体应用，性能和可维护性都够用，搞微服务纯属给自己加戏。

2. 核心功能模块设计与实现

2.1 用户登录、注册与权限控制

权限控制是这类系统第一个要过硬的模块，因为涉及学生、教师、管理员三种角色，而且部分功能（比如课程购买、作业批改）必须是特定角色专用。这个项目的权限体系我建议用JWT + Spring Security实现。

JWT的好处是服务端不需要保存会话状态，登录接口签发一个Token，前端存下来，后续请求塞到Header里，后端每次校验签名和过期时间即可。对于前后端分离的架构来说，这种方式天然契合，不需要额外考虑Session跨域和集群会话同步的问题。

具体的登录认证流程是这样的：

1. 用户提交用户名和密码，后端接口接收后调用AuthenticationManager进行认证。
2. 认证通过后，根据用户ID、角色、过期时间生成JWT返回给前端。
3. 前端拿到Token，存储到localStorage或Pinia中。
4. 每次请求时，Axios拦截器在请求头加上Authorization: Bearer <token>。
5. Spring Security通过过滤器解析Token，把用户信息和角色放入SecurityContext。

这里有一个新手容易踩的坑：Filter的执行顺序和SecurityContext的传递。自定义的JWT过滤器必须继承OncePerRequestFilter，并注册到Spring Security过滤器链中靠前的位置，否则你解析出来的用户信息还没有进入SecurityContext，后面的@PreAuthorize注解权限校验根本不起作用。还有一点，Token过期处理不要只返回401，前端要统一拦截401响应，跳转到登录页，否则用户会看到一个白屏。

角色权限控制上，我的做法是用@PreAuthorize("hasRole('TEACHER')")注解直接标注在接口上。比如删除课程的接口只有管理员和教师可调用，学生提交作业的接口只有学生角色可调用。这种方式代码侵入性最低，比每行代码手动判断角色要清晰得多。

2.2 课程管理与视频点播

课程模块是整个系统的业务核心，也是最容易做出差异化功能的地方。课程数据模型至少要包含以下实体：

• 课程分类（学科、年级）
• 课程信息（标题、封面、简介、价格、状态）
• 章节信息（属于哪个课程、章节名称、排序）
• 课时信息（属于哪个章节、视频地址、时长、是否免费试看）

前后端交互的典型流程是：学生在前端课程列表页按学科和年级筛选课程，点击进入课程详情页，然后查看课时列表。免费课时可以直接播放视频，付费课时需要先购买才能解锁。

这里有一个体验细节：课时是否可播放必须由后端鉴权来控制，不能只靠前端隐藏按钮。因为前端页面改一下代码就能绕过限制，接口没有权限拦截等于大门敞开。我在接口设计时会对每个课时做一次校验，查询当前用户是否已购买该课程，未购买返回403，并提示前端弹出购买引导。

视频点播方式上，项目实践中最顺手的方案是使用M3U8（HLS）格式的视频流。这种格式天然支持切片和自适应码率，而且对Vue前端播放器来说兼容性很好。播放器选择上，我推荐video.js或者vue-video-player插件，两者都能直接播放m3u8地址。后端只需要在课时表中存储视频的m3u8地址，前端播放器组件拿到地址后初始化即可。

// 前端视频播放器组件核心代码 import videojs from 'video.js'; import 'video.js/dist/video-js.css'; export default { props: { videoUrl: { type: String, required: true } }, mounted() { this.player = videojs(this.$refs.videoPlayer, { sources: [{ src: this.videoUrl, type: 'application/x-mpegURL' }], controls: true, autoplay: false, preload: 'auto' }); }, beforeDestroy() { if (this.player) { this.player.dispose(); } } }

注意，m3u8地址如果涉及跨域，必须确保视频资源服务器配置了正确的CORS响应头，否则播放器会报跨域错误，这是排查视频无法播放时第一个要查的方向。

2.3 作业提交与在线批改

作业模块是连接学生和教师的桥梁。学生需要查看作业、提交答案（文本、图片、附件），教师需要查看提交记录、批改打分、填写评语。这个模块的业务流程不算复杂，但设计时要注意两点：

一是作业和课程的关系。作业必须归属于某个课程或课时，这样教师发布作业时才能按课程维度管理，学生也能在课程详情页看到所有待完成作业。

二是提交状态的流转。作业提交不是简单的insert，同一个学生可能多次提交、修改答案。我的设计是：作业表保存作业基本信息，作业记录表保存每个学生的提交状态和最后提交内容，批改完成后再把分数和评语更新回去。前端展示时根据状态字段显示“未提交”、“待批改”、“已批改”三种状态。

文件上传场景推荐在前端使用文件上传组件，后端用Spring Boot的MultipartFile接收，存储到本地磁盘或者OSS，数据库存文件URL。这里提醒一句：文件上传一定要做类型和大小限制，否则恶意大文件能直接把服务器磁盘打满，安全漏洞和运维事故往往就是这么来的。限制方式可以在application.yml里配spring.servlet.multipart.max-file-size=10MB，同时在后端代码里校验文件后缀名和Content-Type。

3. 前后端分离开发中的实操重点

3.1 开发环境的搭建与配置

环境搭建是上手的第一步，也是很多新手卡壳的地方。我建议按下面这个顺序推进：

1. 安装JDK 8/11/17（建议11或17，注意与Spring Boot版本匹配）。
2. 安装Maven并配置阿里云镜像，否则依赖下载慢到怀疑人生。
3. 安装Node.js 16以上版本，npm源也换成国内镜像。
4. 安装MySQL 8.x和Redis，本地开发必备。
5. 用Spring Initializr生成后端项目骨架，用Vue CLI或Vite创建前端项目。

创建好前后端项目后，先把最简单的健康检查接口跑通。后端写一个/api/hello返回一段JSON，前端写一个页面通过Axios请求后端接口并展示结果。这一步打通后，整个前后端分离的开发链路就正常了，剩下的就是不断往这个链路上加功能。

这里有个小细节值得注意：前后端分离开发时CORS跨域配置必不可少。本地前端跑在8080端口，后端跑在8081端口，前端直接请求后端接口必然跨域。解决方案有两种：后端配置@CrossOrigin或全局CORS配置；或者前端配置Vite/Webpack的代理转发。我在开发环境用的是代理转发，生产环境用Nginx反向代理，这样后端接口地址不需要硬编码到前端代码里，部署时更灵活。

3.2 后端核心代码实现

后端代码的包结构我推荐采用经典的分层结构：

com.example.xxx ├── common（通用类：Result、异常处理、常量） ├── config（配置类：Security、Redis、CORS） ├── controller（接口层） ├── service（业务层） ├── mapper（数据访问层） ├── entity（数据实体） └── dto（数据传输对象）

一个典型的课程分页查询接口，Controller + Service + Mapper三层实现，代码核心部分如下：

// Controller层 @RestController @RequestMapping("/api/course") public class CourseController { @Autowired private CourseService courseService; @GetMapping("/page") public Result<PageResult<CourseVO>> getCoursePage( @RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, @RequestParam(required = false) String keyword) { return Result.success(courseService.queryCoursePage(page, size, keyword)); } }

注意几点：

• 返回统一结果类Result，结构包含code、message、data三个字段，前端Axios根据code判断业务是否成功。
• 所有业务异常都有全局异常处理器兜底，不把异常堆栈直接抛给前端。
• Service层加上@Transactional声明事务，比如订单创建和库存扣减必须保证原子性。

3.3 前端核心页面和路由实现

前端页面的组织可以按功能模块分目录：

src ├── api（接口请求封装） ├── router（路由配置） ├── store（状态管理） ├── views（页面组件） ├── components（公共组件） └── utils（工具函数）

路由配置的核心是配合登录状态做访问控制。Vue Router的beforeEach路由守卫会在每次跳转前检查用户Token和路由的meta信息，未登录则跳转到登录页，已登录但角色不匹配则跳转到404页面。

// 前端路由守卫核心代码 router.beforeEach((to, from, next) => { const token = localStorage.getItem('token'); if (to.matched.some(record => record.meta.requiresAuth)) { if (!token) { next('/login'); return; } const role = store.state.user.role; if (to.meta.roles && !to.meta.roles.includes(role)) { next('/404'); return; } } next(); });

前端页面中，课程列表页、课程详情页、视频播放页是最核心的三个页面。课程列表页用卡片式布局展示课程信息，筛选栏按学科和年级过滤；课程详情页展示课程图、教师简介、课时列表；视频播放页内嵌播放器组件，视频地址通过接口动态获取。

这里有一个经验：状态管理不要什么东西都塞进Pinia或Vuex。只放全局必需的数据，比如用户信息、购物车数量、通知数量等，其余页面内部数据用组件的ref/reactive来管理就行。否则store会变得无比臃肿，维护成本反而上升。

3.4 前后端联调中的接口规范

前后端联调是项目开发中最容易出现摩擦的环节，核心问题是接口定义不清晰或者频繁变动。我建议在项目一开始就约定一套接口规范，前后端同时遵守：

• 接口路径统一以/api开头，按照资源名命名，比如/api/course/list、/api/order/create。
• 请求方式严格对应语义：GET查询、POST新增、PUT修改、DELETE删除。
• 认证信息统一放入请求头Authorization，参数使用Content-Type: application/json。
• 返回格式统一使用Result结构，错误信息放在message字段中。
• 分页参数统一为page和size，返回结构统一为{ total, records }。

用Mock数据联调也是一个非常实用的技巧。后端接口没写完时，前端可以用Mock.js模拟返回数据来开发页面；后端接口完成后，只需把Mock数据源切换为真实API。这样可以保证前后端并行开发，不互相阻塞，联调周期能缩短不少。

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

4.1 CORS跨域和前端请求失败

跨域是前后端分离项目里出现频率最高的问题。现象是前端控制台报错：Access to XMLHttpRequest has been blocked by CORS policy。

排查方式按顺序来：

1. 检查后端是否配置了CORS。最简单的方式是在配置类中添加CorsFilter，或者在Controller类上加@CrossOrigin。
2. 检查前端代理配置。如果使用Vite，在vite.config.js中配置server.proxy，把/api开头的请求都转发到后端地址。
3. 特别需要注意的是，**预检请求（OPTIONS）**必须放行，不能拦截。否则跨域请求会一直报错但怎么也找不到原因。

// 后端CORS全局配置 @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); config.addAllowedOriginPattern("*"); config.addAllowedMethod("*"); config.addAllowedHeader("*"); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }

4.2 Lombok编译失败和JDK版本匹配

项目里经常碰到一个报错：java: You aren't using a compiler supported by lombok, so lombok will not work。这个报错通常出现在JDK版本和Lombok版本不匹配的情况下。Spring Boot 2.7对应JDK 8~17都行，但Lombok版本过低时对JDK 17的编译支持不好。

解决办法是按项目JDK版本升级Lombok依赖到对应版本，同时检查IDE的注解处理器是否开启。在IntelliJ IDEA中一定要勾选Settings -> Build -> Compiler -> Annotation Processors -> Enable annotation processing，否则@Data、@Slf4j这些注解统统不生效，代码会一片飘红。

另外还有一个高频编译报错：java: 警告: 源发行版 1.8 需要目标发行版 1.8。这通常是项目JDK版本和IDE编译级别不一致造成的。检查三处：pom.xml中Java.version属性、IDEA的Project Structure里的SDK设置、Maven的JDK配置，三处保持一致就可以解决。

4.3 Token失效和会话过期处理

JWT方案如果没有处理好过期场景，用户的体验会非常糟糕。Token过期后，用户点击任何操作都有可能会直接跳回登录页，甚至什么都不提示。

我推荐的做法是：Axios响应拦截器统一处理401状态码，弹出提示“登录已过期，请重新登录”，跳转登录页时带上当前路由路径，登录成功后直接跳回用户之前访问的页面。这样用户操作中断感最弱。

// Axios响应拦截器 service.interceptors.response.use( response => response.data, error => { if (error.response && error.response.status === 401) { localStorage.removeItem('token'); Vue.prototype.$message.error('登录已过期，请重新登录'); router.push({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); } return Promise.reject(error); } );

如果是那种需要长时间保持登录的场景（比如学生看视频看了一个小时再提交作业），只依赖JWT过期时间会显得不够灵活。实践中的方案是前端在用户操作时刷新Token，或者后端在用户每次访问时重新签发Token并返回，前端更新本地存储。可以主动续期，但是要注意安全边界：必须校验用户的原始凭据是否仍然有效。

4.4 视频播放卡顿和加载失败

视频模块跑起来后，最常见的现象就是“视频加载不出来”或“无法播放”。排查顺序如下：

1. 用播放器直接播放m3u8地址，确认URL本身是否可访问。
2. 检查视频资源服务器是否配置了CORS头，m3u8和ts文件跨域都会导致播放失败。
3. 检查后端接口是否进行了权限限制，视频播放地址接口如果返回了401或403，播放器自然初始化失败。
4. 检查网络环境或CDN配置，大文件传输过程中断或限流也会导致加载失败。

我踩过的一个坑是：开发环境视频文件直接放在后端工程目录下，通过/static/videos/xxx.m3u8访问，本地调试没问题，部署到服务器后变成了Nginx托管，结果Nginx的client_max_body_size和代理缓存配置没调好，播放时频繁卡顿。后来直接改为上传到单独的CDN或对象存储，视频和大文件跟业务服务彻底分离，问题才消停。

5. 部署上线与性能优化经验

5.1 部署方案与流程

项目开发完成后，上线部署是考察技术能力的关键一环。我推荐的部署拓扑是：前端静态文件由Nginx托管，后端Java应用以JAR包方式运行，MySQL和Redis使用独立服务或Docker容器。

后端打包需要注意Maven配置。执行mvn clean package -DskipTests生成可执行JAR包，然后通过nohup java -jar xxx.jar --spring.profiles.active=prod > app.log 2>&1 &方式启动。如果是云服务器，内存有限，启动参数需要设置-Xms256m -Xmx512m，避免默认内存分配吃满系统资源。

Nginx配置核心是前端页面托管和API反向代理：

server { listen 80; server_name your-domain.com; root /var/www/html; index index.html; location /api/ { proxy_pass http://127.0.0.1:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 前端路由history模式需要 location / { try_files $uri $uri/ /index.html; } }

前端项目构建时执行npm run build生成dist目录，把dist里的文件上传到Nginx的/var/www/html目录。这里有一个特别容易漏的配置：前端路由使用history模式时，Nginx必须配置try_files回退到index.html，否则用户刷新页面就会404。

5.2 数据库和性能优化

业务跑起来后，最容易出问题的是数据库。随着课程、订单、作业数据的增长，SQL查询慢、锁冲突等问题逐渐浮现。我的建议是在开发阶段就做好下面这几件事：

• 所有核心表的查询字段都要加索引，订单表按用户ID建索引，课程表按分类ID建索引。
• 列表接口使用分页查询，禁止全表查询后内存分页。
• 热点数据如课程分类、课时信息等可以放入Redis缓存，缓存时间设置合理值即可。
• 前端的图片、视频等静态资源尽量走CDN，不要把所有文件都堆到应用服务器上。

分页性能这块，MyBatis-Plus的selectPage方法底层生成的是LIMIT offset, size，当offset非常大时（比如用户翻到第1000页）会有性能问题。解决方案是改为游标分页，或者限制最大翻页数。一般辅导平台的课程量不会大到需要深度分页，但提前加一个最大页数限制总是稳妥的。

5.3 线上安全与备份策略

作为面向未成年人的辅导平台，数据安全必须格外重视。这部分我的经验是：

• 用户密码绝对不能明文存储，至少使用BCryptPasswordEncoder加密。
• 后端接口必须做参数校验，防止SQL注入、XSS注入。
• 文件上传接口要做类型校验，防止恶意文件上传。
• 数据库每天定时备份，备份额保存至少7天。
• 日志要定期清理，同时保留关键操作日志（比如订单创建、课程上下架），方便问题排查。

很多校招生或者个人开发者会忽略日志的重要性，但线上问题排查时，日志几乎是唯一的线索。建议项目一开始就使用Slf4j统一日志框架，关键业务操作全部打上日志，日志级别和切分策略在生产环境配置好。这样出了问题才能迅速定位，而不是对着屏幕干瞪眼。

6. 一点个人心得

这个项目做了几轮下来，我最大的体会是：技术选型解决的是“能不能做出来”的问题，而设计决策解决的是“能不能做好、能不能维护”的问题。Spring Boot + Vue这套组合之所以在中小型系统里如此流行，不单单是因为它们各自技术先进，更重要的是它们把复杂的东西封装得足够“简单可用”，让开发者可以把精力集中在业务本身。

如果你正在用这个项目练手或做毕业设计，我的建议是先把核心链路走通：登录注册、课程列表、课程详情、视频播放、订单支付（模拟即可）、作业提交批改。这几条链路全部跑通后，再考虑加Redis缓存、性能优化、统计数据报表等锦上添花的功能。功能没有上限，但核心稳定才是第一位的。

另外再多说一句：部署上线一定要提前演练，不要等到答辩或演示前才去配服务器。我在实际踩坑过程中发现，本地跑得飞起不代表服务器上能跑起来，环境变量、端口占用、防火墙、内存大小、JDK版本，任何一个环节掉链子都会让你在关键时刻手忙脚乱。留出充裕的时间把部署流程走顺，线上的问题你才会心里有底。