企业官网建设流程全解析

最近后台收到不少同学私信问：零基础做毕业设计，能不能选“论坛管理系统”这种题目？SpringBoot3 + Vue3这个组合是不是太新，找参考代码都不好找？我的看法很直接——这恰恰是这类题目的优势所在。技术栈新，意味着你答辩时有得聊；系统逻辑清晰，意味着复现难度可控；而且无论是传统的BBS风格，还是偏内容的社区风格，改改字段就能做出差异化。这篇文章就把我从选题、环境准备到前后端联调、答辩准备的全过程拆开讲一遍，给准备动手的你说点真正能用的经验。

这篇文章是按照“零基础能复现”的标准来写的，不预设你已经会了Spring或Vue。所有逻辑都会讲清楚“为什么这样做”，而不是丢一段代码让你跑完就完事。适合两类人：一是毕业设计选了类似题目的学生，二是想用SpringBoot3+Vue3练手做第一个前后端分离项目的初学者。看完你应该能独立搭出一个包含用户注册登录、发帖回帖、分类浏览、个人信息管理的小型论坛系统，并且知道答辩时老师大概率会问什么。

1. 为什么选SpringBoot3+Vue3做论坛毕设：技术选型的真实逻辑

先说结论：这不是最省事的路线，但这是性价比很高的路线。SpringBoot2 + Vue2的“经典配方”资料确实多，随便一搜一大把，但正因为太老，论文里写“技术选型”这一段时反而没什么发挥空间。SpringBoot3 + Vue3的组合，在知网上能查到的相关毕设论文数量还不多，工作量适中，又可以很自然地引出“新特性”“性能提升”“响应式编程”之类的话题，答辩时不会出现“老师比你还懂这个框架”的尴尬局面。

论坛管理系统本身的功能边界非常清晰：用户系统（注册、登录、个人信息）、内容系统（发帖、回帖、删帖）、分类系统（版块/标签）。这种“实体关系明确”的项目非常适合做成前后端分离，因为你能很自然地把数据库表设计、RESTful API设计、前端路由设计串成一条线。

1.1 这套技术栈的适用边界和备选方案

SpringBoot3 + Vue3并不是万金油方案。如果你的题目是“企业内部OA系统”或者“电商平台”，后端往往要接工作流引擎、支付网关这类重组件，SpringBoot3的生态虽然已经跟上，但很多第三方库还停留在Java 8时代，兼容性踩坑成本会明显上升。选题目的时候留意一下：你这个系统的核心功能，是否主要围绕“增删改查 + 权限 + 状态流转”？如果是，那SpringBoot3很合适；如果一上来就要对接硬件、消息队列、分布式事务，我建议换个更稳妥的组合，或者直接换题。

另外很多同学问要不要用前后端不分离的传统JSP方案。坦率说，用JSP做毕设确实快——一个Tomcat就全跑起来了，部署也简单。但最近几年答辩组老师对纯JSP项目普遍评价偏低，因为“没有体现出当前工程化开发的基本流程”。如果你的目标是“能过且分不低”，前后端分离是更稳妥的选择。它也意味着你要多花一份时间在前端工程化和联调上，这个投入是值得的。

1.2 从题目拆解出MVP功能清单

做毕设最大的坑，不是技术不会，而是需求没边。拿到题目后第一件事，不是打开IDEA写代码，而是画一张功能清单表，定清楚“必须有”和“可以没有”。

对于一个论坛系统，我的MVP（最小可运行版本）建议这样划定：

MVP范围定成“必须有”那一列，大约3到4周能写完。“可以加分”那一列留到主体功能完成后再考虑，或者干脆作为论文里的“未来展望”。

1.3 版本选型的隐藏门槛：SpringBoot3要求JDK17

SpringBoot3和SpringBoot2最大的隐性差异不在框架本身，而在它强制要求JDK17+。很多学校机房装的还是JDK8，如果你平时用惯了JDK8，本地写没报错，到答辩前部署才发现环境对不上，那会非常狼狈。

我的建议是：确认能用JDK17之后再选SpringBoot3。如果租的云服务器没有装新版JDK，部署时也要记得一并安装、配置环境变量。另外Lombok要和新版兼容，IDEA里的Spring插件也要更新，这些小问题熬人但不难解决，后面的章节我会把环境准备完整的步骤写出来。

2. 零基础环境准备：JDK17、Node20这些版本问题怎么一次到位

零基础做项目，最冤枉的浪费不是某段代码看不懂，而是在环境配置上反复折腾。我曾经见过有同学因为SpringBoot启动不了，重装了三次IDEA，最后发现是JDK版本不对。这类问题没有技术含量，但特别消磨信心。所以这里我把每个环境组件的安装原因和版本选择一次说清楚。

2.1 JDK17配置和IDEA的关键设置

先去官网下载JDK17（不用刻意追求最新版，17是LTS长期支持版本，稳定），安装后要手动配置环境变量。Windows用户在“系统属性-环境变量”里新建JAVA_HOME指向安装目录，再把%JAVA_HOME%\bin追加到Path里。配好之后打开cmd输入java -version，看到“17.0.x”就说明成功。

IDEA里要注意的地方有两点：

• Project Structure里的Project SDK选成17。
• Maven的Runner设置里把JRE选成17，否则IDEA内置的Maven可能会用自带JDK去跑，出现“java.lang.UnsupportedClassVersionError”。

另外SpringBoot3官方要求Maven 3.6.3以上，IDEA内置的Maven版本基本都能满足，不用单独装。

2.2 Node.js和Vue3开发环境：版本不对会让你怀疑人生

前端环境的核心是Node.js。Vue3的构建工具Vite要求Node 18+，建议直接装Node20 LTS版，装完在终端跑node -v和npm -v确认版本。很多同学在这里容易犯一个错：直接用Node16跑Vite，报错之后开始怀疑自己的代码，其实只是版本太老。

Vue3项目初始化我推荐用Vite而不是Vue CLI。Vite启动速度快，模板也干净。执行：

npm create vite@latest forum-web -- --template vue cd forum-web npm install npm run dev

注意npm install有时候会慢，可以用淘宝镜像源，但不建议全局乱改registry，后面上传代码或分享给同学时容易出问题。

2.3 数据库版本：MySQL8的时区坑

数据库用MySQL8.0版本。MySQL8默认的密码认证方式和5.7不同，SQLyog这类老客户端可能连不上，需要改认证插件。我个人经验建议直接用官方的MySQL Workbench或者IDEA自带的Database面板，能少操心。

MySQL8最常报的错是Unable to load authentication plugin 'caching_sha2_password'，解决办法是在连接串里加上useSSL=false&serverTimezone=Asia/Shanghai，这两个参数本质上是解决SSL验证和时区解析两个问题。时区不指定会差8小时，后面你发帖时间显示不对，多半就是这里。

另外数据库对象的字符集全都要用utf8mb4，因为utf8mb4支持表情符号。论坛里用户发个emoji，如果你用的是老旧的utf8，数据库直接报错。

3. 后端实现：从建表到JWT登录，SpringBoot3的核心套路

后端是整个系统的地基。零基础同学可能会被“SpringBoot3”这个名字吓到，其实它解决的问题非常聚焦：把对象托管给Spring容器，让你不再到处new对象；接收HTTP请求交给Controller；数据存到数据库交给Mapper。搞懂这三条线，后面写代码就是往这三个方向填内容。

3.1 数据库设计：论坛系统的三张核心表

先设计表还是先写实体类？我的建议是先用SQL画三张表，因为表的关联关系决定了接口怎么拆分。论坛系统最小表结构长这样：

CREATE TABLE `user` ( `id` bigint NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `password` varchar(100) NOT NULL, `nickname` varchar(50) DEFAULT NULL, `avatar` varchar(255) DEFAULT NULL, `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `post` ( `id` bigint NOT NULL AUTO_INCREMENT, `user_id` bigint NOT NULL, `category_id` bigint DEFAULT NULL, `title` varchar(100) NOT NULL, `content` text, `view_count` int DEFAULT 0, `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `comment` ( `id` bigint NOT NULL AUTO_INCREMENT, `post_id` bigint NOT NULL, `user_id` bigint NOT NULL, `content` varchar(500) NOT NULL, `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

这里有几个设计点可以说说理由。用户名做了唯一索引，这是基本的业务规则；密码字段长度留到100，因为存的是BCrypt加密后的字符串，BCrypt本身就是长度为60的哈希，留50会爆；内容字段用text而不是varchar，因为论坛帖子长度不固定，text类型上限是65535字节，正常帖子够用。

3.2 JWT登录认证：过滤器和拦截器怎么选

论坛系统的登录认证，业界现在主流方案是JWT。流程大致是：用户登录成功，后端签发一个包含用户id、过期时间的token返回给前端；前端每次请求带上token，后端validate之后放行。

SpringBoot3里实现JWT，依赖用io.jsonwebtoken:jjwt:0.9.1，这个库比较老但资料多，零基础遇到问题好搜。实现思路是这样：

• 写一个JwtUtil工具类，负责生成token和解析token。
• 写一个LoginInterceptor实现HandlerInterceptor，在preHandle方法里从请求头拿到Authorization字段，去掉“Bearer ”前缀，调用JwtUtil解析，能解析出来就放行，解析失败就返回401。
• 注册拦截器时要注意放行路径：/api/auth/login、/api/auth/register放行，其余/api/**都要过拦截器。

这里有个零基础容易踩的坑：拦截器能拦截Controller请求，但拦截不到静态资源，也拦截不到跨域预检请求。如果你后端部署完后发现“明明登录了但总是401”，十有八九是跨域OPTIONS请求被拦截了，需要额外在拦截器里放行OPTIONS请求，或者在CorsConfig里统一处理。

3.3 Controller层的写法：接受参数、调用服务、统一返回

写Controller有个约定俗成的思路：Controller只做参数接收和结果返回，业务逻辑全部放到Service层。很多零基础同学喜欢把逻辑全堆在Controller里，刚开始觉得方便，后面要加个事务或者复用逻辑时就很痛苦。

论坛后端接口需要这些：注册登录（生成token）、创建帖子、帖子分页列表、帖子详情（包含评论列表）、个人中心（自己发的帖子和自己回的帖子）。返回格式建议统一封装成一个Result类：

public class Result<T> { private Integer code; private String message; private T data; }

所有接口返回都是Result，前端全局判断code。这样比HTTP状态码更直观，因为业务错误（比如“用户名已存在”）用HTTP 200返回，但code=500。这种设计在毕设论文里也好写，可以作为一个亮点展示。

论坛帖子详情页需要同时返回帖子信息和评论列表，这个接口的返回结构要提前想好，最省事的方案是用VO（视图对象）而不是把实体类直接返回。每次把Entity直接返回前端，都会面临“密码字段泄露”或“时间格式不对”的问题。VO这个词听起来高级，其实就是建一个普通的类，只包含前端需要的字段，把Entity转成VO的方法写在Service里。

4. 前端实现：Vue3组合式API写论坛页面，告别“抄代码但看不懂”

前端是整套系统里视觉反馈最明显的部分，也是你答辩时演示的核心。Vue3和Vue2最大的区别就是组合式API。Vue2里所有数据放到data里、方法放到methods里、生命周期分开写；Vue3组合式API则让你按“逻辑功能”组织代码，做一个用户功能就把用户相关的数据、方法、计算属性集中在一个setup里。

写法上不用纠结“Vue3风格”还是“必须用setup语法糖”，我的建议是直接用<script setup>，这是当前Vue3.4版本官方推荐的主流风格，简洁性比setup()函数好得多。

4.1 创建第一个Vue3页面：记住“三件事”就够

零基础学Vue3，不要先去看一大串API文档。记住三个核心概念：

• ref：用来包装基础类型或对象，使数据成为响应式。
• reactive：和ref类似，用来包装对象，访问时不用写.value。
• onMounted：页面挂载后执行的方法，通常在这里调用接口请求数据。

论坛的帖子列表页是一个典型的例子：

<script setup> import { ref, onMounted } from 'vue' import { getPostList } from '@/api/post' import { useRouter } from 'vue-router' const router = useRouter() const postList = ref([]) const loading = ref(true) onMounted(async () => { postList.value = await getPostList() loading.value = false }) </script> <template> <div v-if="loading">加载中...</div> <div v-else> <div v-for="post in postList" :key="post.id" class="post-card" @click="router.push(`/post/${post.id}`)"> <h3>{{ post.title }}</h3> <p>{{ post.nickname }} · {{ post.createTime }}</p> </div> </div> </template>

这段代码展示了Vue3最重要的循环渲染（v-for）和事件绑定。写完这个，前端最基本的骨架就立起来了。

4.2 路由和状态管理：要从“跳转”的角度理解前端项目

一个论坛系统前端肯定要有多个页面，页面的切换靠Vue Router负责。构造路由表时，注意论坛是典型的前台+后台结构，分为两套布局：用户访问的论坛首页、分类页、帖子详情页、个人中心是一套；管理端（如果有）又是一套。Vue Router的嵌套路由和嵌套路由视图（<router-view>）能很好地支持这种结构。

状态管理工具用Pinia，官方推荐替代Vuex的方案。论坛系统里需要全局保存的状态很少，最典型的就是“用户登录信息”。登录成功后把token和用户信息放进Pinia，页面刷新时再从localStorage读取，这样登录状态就不会丢。这里有一个实际操作：Pinia里的userInfo不要只存内存，写成持久化插件或者手动在store里初始化时读localStorage，否则一刷新页面就回登录页。

4.3 用Axios封装请求：拦截器是必须的

前后端分离，前端调用后端接口走Axios库。所有请求不建议直接在每个页面里写一遍，而是统一封装。项目src目录下建一个api/request.js，做三件事：

• 设置baseURL，指向后端的接口地址（例如http://localhost:8080/api）。
• 请求拦截器：从localStorage里读token，有则加到header里。这样你不需要在每个请求里手动带token。
• 响应拦截器：判断返回结果code，如果401说明token过期，跳回登录页。

封装完之后，页面里的调用变得很清爽：

import request from '@/api/request' export function getPostList() { return request.get('/post/list') }

这一步是毕设答辩时的常见提问点，老师可能会问为什么不用Axios直接请求，如果你能答出“统一拦截处理token和异常，避免重复代码”加“便于后期维护”，这一问就过关了。

4.4 写帖子编辑器：为什么要用Markdown编辑器而不是textarea

如果用textarea发帖也能用，但界面效果实在太朴素。论坛系统加一个Markdown编辑器成本不高，收益非常明显。无论演示效果还是论文里的技术亮点，都能提。推荐用mavon-editor这个Vue3组件，安装后引入到发帖页，内容存的就是Markdown原文，论坛帖子详情页再用markdown-it渲染成HTML。

要注意一个安全问题：用户输入的内容直接存库，渲染时如果不过滤XSS，别人发一段脚本就能搞事情。安全性不是毕设考察的重点，但答辩时主动提一句“我后续可以考虑接入富文本XSS过滤”是一个不错的加分点。

5. 前后端联调：跨域、Token和那些反复踩的接口坑

前后端都写完，最磨人的阶段来了。前端启动在5173端口，后端启动在8080，两个端口不同，默认情况下浏览器会把请求拦下来——这就是跨域问题。解决跨域有三个层级，从简单到正规：

第一种是前端用Vite代理，在vite.config.js里配置server.proxy，把/api开头的请求代理到后端，因为请求是同源的，后端不需要任何额外配置。这种方式适合开发阶段。第二种是后端加CORS配置，用一个配置类实现WebMvcConfigurer的addCorsMappings方法，允许指定来源跨域。第三种是部署后用Nginx反向代理（适合本机演示或云服务器）。零基础同学直接用第二种最省事，而且答辩时你能清晰地讲解原理。

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } }

5.1 联调前要做的三件准备

不要前端写完就立刻联调，先把三件事确认好，能省大量时间：

第一，用Postman或IDEA的HTTP Client把所有后端接口先测一遍，确保后端自身没问题，再和前端连。第二，把数据库里塞几条看得过去的测试数据。一个帖子都没有的论坛，前端列表页空空荡荡，联调起来心情也不好，而且答辩演示也没有素材。第三，把接口文档整理出来，最简单的方式是按Controller写好接口清单，包含Method、URL、参数和返回示例，用Markdown表格记下来，前端写代码对着这个清单来。

这一步做完，联调就是“核对字段名”的过程了。

5.2 最容易出现的三类联调问题

联调阶段最常见的问题，按出现频率排，基本是这三类：

参数对不上。前端传userId，后端用user_id接收，或者前端传字符串“1”，后端接口参数是Long。解决方法没有捷径，就是要仔细看后端VO定义的字段名。

时间格式不一致。Java侧LocalDateTime默认序列化格式是一长串带“T”的ISO字符串，前端显示很难看。解决方式是配置全局Jackson序列化，把LocalDateTime格式化成“yyyy-MM-dd HH:mm:ss”。

带Token的请求失败。这类问题排查要从前端请求头、后端拦截器、跨域三个方向同时排查。我的排查顺序：先在浏览器F12看请求头里有没有token，再看响应是CORS错误还是401，再对应去后端看日志。不要盲猜。

5.3 一个完整的联调排查示例

拿“帖子列表页打开一片空白”这个具体场景来说。你先别急着改代码，按这个顺序查：

先在浏览器F12 Network标签看这个请求的状态码。如果是500，去后端控制台看异常堆栈，大概率是空指针或SQL报错；如果是200但列表是空数组，检查数据库表里是不是没数据，或者Mapper的查询条件把数据过滤了；如果是请求根本没发出去，检查前端接口路径或Axios baseURL是否配置错误；如果控制台报跨域，看后端有没有加CORS配置，以及是否没有处理OPTIONS预检请求。

把这个排查路径写进你的论文“系统测试”部分，档次明显不一样。多数同学的测试部分只会写“用JUnit测试了登录功能”，而你写的是完整的排查思路。

6. 答辩与演示：毕设验收前要补的“非功能”细节

功能代码写完不代表毕设做好了。答辩那天，老师考察的重点排序大概是这样的：是不是你自己写的（能讲清代码逻辑）> 系统功能是否完整可运行 > 论文和工作量是否匹配 > 技术上有没有亮点。所以技术之外还有几件事值得做。

6.1 测试数据和演示流程要提前彩排

论坛系统demo效果差别很大。一个只有登录注册和空列表的系统，和一个有分类、有多条内容、有交互状态的系统，答辩效果完全不同。建议你自己注册三个不同用户，发十几条不同分类的帖子，每条帖子下面留几条评论，造出一片“真实使用过”的氛围。

演示流程也要想好顺序：登录 → 浏览帖子列表 → 进入帖子详情看评论 → 发布一条新帖 → 发布成功后自动跳转 → 个人中心查看自己发的帖 → 退出登录。每一步的操作时间保持在30秒内。如果想更稳妥，准备好一台备用浏览器，以防现场浏览器插件或网络波动影响演示。

6.2 论文写作对应本篇的“技术深度”要怎么安排

论文的第三章通常是系统设计，第四章是系统实现，第五章是系统测试。技术深度主要花在第三章和第四章。第三章要多写“设计”而不是“代码”，比如JWT认证流程画一个时序图，数据库ER图、用例图、模块划分图都要有。第四章可以放“核心代码片段”而不是全部贴代码，每段代码配一段“实现过程”的文字说明，解释代码的关键逻辑。

答辩前一定要把这几块口述一遍：SpringBoot3里自动配置的原理（@SpringBootApplication注解）、Vue3组合式API相比Vue2选项式API的优势、JWT和传统Session登录相比好在哪里、你们的前后端分离是怎么定义数据交互规范的。这些问题问到的概率极高，别等老师问完你再现场想。

6.3 部署方案：直接选择最轻量的云服务器

答辩现场用自己的电脑演示最大的风险是环境不干净，真出现蓝屏或网络断掉会非常影响节奏。建议至少提前两天把项目部署到一台云服务器上。

部署步骤总结下来就是：拉一个JDK17环境，用Maven打jar包，用npm run build生成前端dist目录，把dist文件放进Nginx的html目录，然后Nginx里配置两条规则：静态文件直接访问，遇到/api/开头的路径就反向代理到http://127.0.0.1:8080。这比“把前端打包后扔进后端static目录再一起打jar包”的方案更贴近真实工作流，答辩时也更有说法。

写在最后

做这类全栈项目，最珍贵的经验其实是允许自己“先跑通，再理解”。很多零基础同学一上来想把Spring和Vue的底层原理全弄透再动手，结果一个月过去了还在看第一讲。我的做法是先搭好空框架，然后只挑最核心的点从浅到深补：后端先跑通一个“登录接口从数据库里查出用户”的完整链路，前端先跑通“请求登录接口并保存token”的完整链路，这两条链路一通，剩下的一切都是在这个骨架上添肉。真到了答辩那天你会发现，自己不仅能交出一份可运行的系统，还能把每个模块都讲得明明白白——这才是毕业设计训练真正的意义。