企业官网建设流程全解析

毕设季总能看到一个现象：宿舍楼里几个计算机专业的同学，白天跑招聘、晚上开会写文档，到了交中期检查的前一周才开始疯狂找能跑的源码。我不是说临时抱佛脚是对的，但如果你正处在"需要一个完整全栈项目作为毕业设计或课程设计基础"的状态，那SpringBoot+Vue疫情居家办公系统管理平台这套源码，绝对是值得认真研究的选择。

这个项目不是那种只有登录注册的玩具Demo，它把居家办公场景下的核心业务都做了进去：公告发布、健康打卡、出行登记、线上审批、考勤统计、日程安排、权限管理。技术栈是SpringBoot+MySQL做后端，Vue做前端，典型的前后端分离结构，包揽了Java Web全栈开发的所有关键知识点。无论你是想直接用来交毕设，还是把它当作学习SpringBoot和Vue整合的练手项目，都非常合适。

接下来我按一个过来人的角度，把这套系统的功能模块、技术设计、本地运行步骤、踩坑经验以及答辩加分思路全部拆开讲清楚。

1. 这套系统的"业务骨架"：管理员端和员工端到底管什么

先看功能模块。很多人拿到一套源码第一件事是点开界面看长得怎么样，但作为要做毕设的人，你必须先想明白:你的业务逻辑是否完整，是否足以支撑一篇论文的"需求分析"和"系统设计"章节。

1.1 管理员端的核心职能：审批、统计、系统配置

管理员在这个系统里承担的是"管理者"角色。居家办公场景下，管理者最关心的问题是什么？员工是否真的在工作、健康状态是否有异常、审批流程是否卡住、各类数据能否汇总成报表。系统对应做了这样几件事：

• 公告管理：发布居家办公期间的通知公告，支持置顶、下线操作。这一块看似简单，但对应了数据库设计里"公告表"的增删改查，以及前端公告列表的动态渲染。

• 员工管理：对员工账号进行维护，包括部门分配、角色设置、账号启停用。这个功能背后是用户-角色-权限三张表的关系处理，是答辩时最容易展开讲的点。

• 审批管理：居家办公申请、请假申请、外出申请的审批处理。管理员可以看到所有待审批单，进同意或驳回操作。这里涉及的是工作流状态流转的逻辑，所谓"状态机"在代码里有多处体现。

• 考勤统计：基于员工每日的签到和健康打卡数据，生成考勤汇总表。这部分会用到MySQL的日期函数和分组统计，比如按周、按月聚合出勤率。

1.2 普通员工端的日常操作链路：打卡、上报、申请

员工的日常操作流程是：早上打开系统，先做健康打卡，然后提交今日工作安排或者进入正常的办公状态；如果有外出需求或请假需求，提交申请等待审批；下班前再补充当日工作日志。

这里值得留意的是系统的"业务闭环"设计。一个居家办公系统，如果不能把员工的健康信息、考勤信息、审批信息串起来，那就是几块功能拼凑在一起，答辩时一问就露馅。这套系统的做法是：用统一的员工ID串联所有业务表，健康打卡表、考勤表、申请审批表都引用员工主键，保证可以跨模块联查。比如管理员查询某个员工的考勤记录时，可以顺带看到他当天的健康打卡情况，这就是业务闭环的体现。

这个部分我特别建议在论文的"系统业务流程设计"一节里画清楚，画一张员工日常使用时序图，从登录开始到健康打卡、工作签到、提交申请、管理员审批结束，完整闭环，这一段写出来能有上千字的论述空间。

2. 技术选型逻辑与数据库设计：为什么是SpringBoot+Vue+MySQL

很多教程习惯直接贴技术栈，我反而想先聊聊为什么是这三样东西配在一起。毕设选题时技术栈的合理性，直接决定了老师会不会连环追问。

2.1 SpringBoot：简化配置、快速整合的开发底座

选SpringBoot几乎是当下Java后端项目的默认前提。SpringBoot带来的核心价值是自动配置，它帮我们把SpringMVC、MyBatis、数据源、事务管理等原本需要大量XML配置的东西全部做了约定优于配置的封装。你只需要引入依赖、写好application.yml，就能快速跑起一个Web服务。

对于毕设而言，SpringBoot还有三个非常实际的好处：

• 内嵌Tomcat，本地启动不用单独装服务器，一个mvn spring-boot:run就完事；
• 生态极其成熟，网上随便搜都能找到对应的配置范例；
• 和前端分离部署时，打包成jar直接用java -jar命令跑，部署环境干净利落。

2.2 Vue：渐进式框架解决"页面交互"问题

前端选Vue，核心看中的是组件化开发和数据驱动视图这两个理念。居家办公系统的页面虽然不算复杂，但公告列表、打卡按钮的状态切换、审批表格的实时刷新，如果用原生JS写，DOM操作会非常琐碎。Vue的响应式机制能让你把精力放在数据上，页面自动跟着变。

另外Vue Router和Vuex这两个配套库，在这类管理系统中几乎是必用的。Vue Router做页面路由权限控制，比如未登录的游客一律重定向到登录页，管理员专属的页面不让普通员工访问；Vuex则用来存登录后的用户信息、全局的登录状态，避免每次翻页都重新调接口获取用户资料。

2.3 MySQL：最稳妥的毕业设计数据库选择

数据库选MySQL，除了它免费、轻量、教程多之外，更关键的是它和Java技术栈的联动方案非常成熟。MyBatis写SQL灵活可控，复杂统计查询可以直接手写SQL调优，不用担心ORM框架的生成SQL影响性能。实际上答辩时老师经常会问"如果数据量大了怎么办"，你可以回答增加索引、分页查询、读写分离，这些都是MySQL的常规方案，容易展开。

2.4 数据表结构设计思路：核心字段怎么定

虽然我没有把完整SQL贴出来，但这类系统表结构通常长这样，我按主要业务表列一下核心字段，你可以据此核查源码里的数据库脚本：

设计这套表的时候，最核心的原则就是字段要能支撑业务查询。以"健康打卡"为例，如果管理员想看某天有多少人体温异常，那么表中必须有check_date和temperature字段，并建议在check_date上建索引。如果你的源码里缺了某个字段，自己去补也轻车熟路。

3. 本地把项目跑起来：从JDK到浏览器全流程

这个部分我说得细一点。我见过太多人源码下载好了，卡在环境配置上，一晚上都没把项目跑起来。我按完整步骤走一遍，每一步都说明为什么要这样做。

3.1 环境准备清单

先把工具列齐，版本匹配很重要，不要以为随便装个最新版就能跑。

一个常见坑：很多人装完Node.js最新版（比如20+），跑npm install时因为node-sass或node-sass替代品兼容性问题报错。如果遇到node-sass报错，最快的解决方式是换用Node 16版本，或者把package.json里的sass依赖换成dart-sass。

3.2 初始化MySQL数据库

第一步把源码里的SQL脚本导入本地数据库。我自己习惯用命令行操作，步骤如下：

mysql -u root -p # 输入密码后进入MySQL命令行 create database home_office charset utf8mb4; use home_office; source D:/your_path/home_office.sql;

注意两点：数据库字符集务必使用utf8mb4，否则公告里只要出现特殊字符就可能乱码；SQL文件路径不要包含中文和空格，否则source命令会读不到。导入完成后，用show tables;确认核心表是否都建立成功。

然后在后端项目的application.yml（也可能是application.properties）里修改数据源配置：

spring: datasource: url: jdbc:mysql://localhost:3306/home_office?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver

url里加上serverTimezone=Asia/Shanghai，可以避免时区报错。

3.3 后端启动：三步操作与常见报错

后端项目导入IDEA后，正常情况下三步就能跑起来：

1. 点击IDEA右侧Maven面板，先执行clean，再执行install，等依赖下载完、BUILD SUCCESS；
2. 找到主启动类HomeOfficeApplication（类名可能不同），右键Run；
3. 看到SpringBoot的启动日志，出现Tomcat started on port(s): 8080，同时控制台无红色报错，说明后端起来了。

这一步最常见的报错是端口被占用。SpringBoot默认8080，如果本机其他服务占用了，有两种处理方案：一是杀掉占用进程，二是直接改端口，在application.yml里加server.port: 8081。注意改端口后，前端的接口代理地址也要同步改。

3.4 前端启动：npm install和npm run dev

前端项目放在一个独立目录（比如vue-front），进入目录后用终端执行：

npm install npm run dev

npm install第一次跑会很慢，建议提前设置淘宝镜像源，能快很多：

npm config set registry https://registry.npmmirror.com

如果项目使用Vue CLI创建，npm run dev之后终端会输出一个本地访问地址，一般是http://localhost:8080。打开浏览器，看到登录页就说明前端起来成功了。

但此时直接登录系统可能会碰到一个情况：页面能看到，但登录时提示"请求失败"或者一直转圈。这是前后端联调还没打通。你看前端代码里接口请求的baseURL，如果写的是http://localhost:8080，而后端改成了8081，自然连不上。

以Vue cli的vue.config.js为例，常见配置是：

module.exports = { devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }

注意这里target指向的是后端服务地址，如果后端改了端口这里必须同步改。

3.5 验证整个链路：登录->打卡->审批

跑通后建议按业务链路验证一遍。先用管理员账号登录，在员工管理里创建一个测试员工；然后退出登录，用员工账号登录，依次完成健康打卡、提交外出申请；再切回管理员账号，找到该申请并审批通过。这一趟走下来，你基本就把前后端交互、数据库读写都验证完整了。

4. 前后端联调与部署阶段必踩的坑：我实测过的解决方案

整个项目我完整跑通的过程中，遇到过几个比较典型的问题，每个都能单独写一篇排错日记，这里挑影响最大的几个讲。

4.1 跨域请求被拦截：前后端分离的第一个拦路虎

现象是浏览器控制台报错"No 'Access-Control-Allow-Origin' header is present"，前端请求根本到不了后端。

原因很简单：前端跑在8080端口，后端跑在8080端口（甚至不同IP），浏览器基于同源策略，默认不允许跨端口请求。解决方案有三种，按推荐度排序：

• 后端全局CORS配置（推荐）。在SpringBoot里写一个配置类，用@Configuration和@Bean注册CorsFilter。这个方案对小程序、前后端分离部署都适用，一次配置全局生效。

• 前端代理转发。就是上面vue.config.js里proxy的方式。开发环境最省事，因为浏览器看请求地址始终是8080，不存在跨域。

• 加上@CrossOrigin注解。单控制器或单方法上可用，但不适合全局，像登录接口和健康打卡接口分布在多个Controller里，写起来太啰嗦。

4.2 登录后刷新页面就退出：Token存储的位置错了

这个坑很隐蔽。很多人用Vuex存登录状态，页面一刷新Vuex数据全没了，于是系统"强制"你重新登录。解决方案也简单，Vuex存一份做全局响应式状态，localStorage再存一份做持久化，页面加载时先读localStorage恢复登录态。

如果你在源码里看到这种逻辑，这不是设计冗余，这正是前后端分离项目规范化处理用户状态的常见做法。

4.3 日期时间相差8小时：时区问题导致打卡记录"迟到"

有一次测试发现，上午打的卡在数据库里显示的却是前一天晚上的时间。原因有两个：第一，MySQL连接串没有加serverTimezone=Asia/Shanghai，驱动用了默认时区；第二，后端实体类的日期字段用了Date，而没有用LocalDateTime配合@JsonFormat统一格式化。

解决办法在后端统一处理：

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") private LocalDateTime createTime;

这个注解要加在实体类日期字段上，同时确保前端传参时也是按yyyy-MM-dd HH:mm:ss格式传的。你拿到源码后，全局搜一下LocalDateTime或者Date的声明，统一检查一遍格式。

4.4 打包部署时的坑：不能用IDE直接跑jar

本地调试没问题，但如果你想把这个系统打包部署到服务器上，需要注意后端打jar包时的名称和内容不一致问题。用Maven打包时，建议检查pom.xml里是否包含：

<build> <finalName>home-office-api</finalName> </build>

明确指定finalName，避免打出来的jar包带版本号还要手动改名。前端打包用npm run build生成dist目录，然后把dist里的文件用Nginx托管，再把接口请求反向代理到后端jar端口。这一套流程是生产环境的常规做法，毕设用到服务器部署时能拿出来讲是加分项。

4.5 数据库连接数报错：默认连接池太小

本地跑项目很少遇到，但如果你开着后端、前端，还反复重启服务，偶尔会看到"Too many connections"报错。这是MySQL默认最大连接数是151，而SpringBoot默认的连接池在较新版本里可能比你预期占得多。解决办法是重启MySQL服务释放连接，或者在连接池配置里调整：

spring: datasource: hikari: maximum-pool-size: 10 minimum-idle: 5

毕设项目本地跑，10个连接完全够用了，把这个值写小一点，既能避免连接数超限，也减少数据库资源占用。

5. 从"能跑"到"答辩能讲"：二次开发思路与演示话术

源码能跑只是第一步，答辩时老师最烦听到的句子是"这个项目是网上找的，我只是改了改"。所以你必须基于这套系统做一定程度的二次开发，并且在答辩时能清楚讲出你的设计思路。

5.1 低成本高价值的三个改进方向

我不建议你去重写整套系统，时间成本太高。性价比最高的改进方向有这几个：

• 增加数据可视化面板。现在系统有考勤和健康数据，但通常只做表格展示。你可以引入ECharts，在管理员首页增加一个图表区，例如"近7天健康打卡异常趋势折线图""各部门出勤率柱状图"。数据量不大，一个后端聚合接口加一个前端图表组件就搞定，但视觉效果和工程复杂度提升非常明显。

• 完善审批流程的分级处理。现在的审批大概率只有一级审批。你可以改成"员工发起申请 -> 直属主管审批 -> 部门负责人审批"的两级审批链路，在申请表里加一个current_node字段或approval_level字段。这一改，论文里的业务流程图能多画一页纸。

• 增加消息通知机制。员工提交申请后，管理员登录时就能看到"待办提醒"。实现方式可以是轮询后端未审批数量接口，或者用WebSocket推送实时通知。如果精力有限，轮询方案就行，但论文里要写明两种方案的对比，体现你有系统设计能力。

5.2 答辩前的演示动线规划

建议按这个顺序演示：

1. 登录页展示，介绍角色区分；
2. 普通员工视角：健康打卡、提交请假申请、查看公告；
3. 管理员视角：审批处理、考勤统计、员工管理；
4. 回到代码层，展示一个核心接口的完整请求链路：Vue页面调用 -> axios请求 -> Controller接收 -> Service处理 -> Mapper查询 -> MySQL返回。

每一步都要准备一个问题自答，比如"健康打卡的数据一天能提交几次？"如果源码里没有做限制，你就得提前知道这个漏洞并想好答案。最稳妥的做法是补一个唯一索引：create unique index idx_user_date on health_check(user_id, check_date);这样同一个人同一天就插不进第二条记录。这种细节你在答辩时主动讲出来，会非常加分。

5.3 毕业论文里怎么描述这套系统

论文里的技术路线部分，不要写成列工具清单，而是要有逻辑地说明选型理由。比如写后端选型时这样写："本系统采用SpringBoot作为后端开发框架，主要基于其自动配置特性，可以有效减少传统SSM项目的繁琐配置工作；同时SpringBoot集成了内嵌Tomcat，方便系统的独立部署与运行维护，符合系统轻量化的需求。"

写数据库设计时，把ER图、数据字典、索引设计三样配齐，尤其要强调哪个字段建了索引、为什么建索引。很多学生论文在这一块非常薄弱，你只要把表结构细节写透，老师很容易看出你是真正做过项目的。

写在最后的一点建议

我个人的体会是，毕设项目最重要的不是代码量有多大、功能有多花哨，而是你能不能把每一个设计决策的"为什么"讲清楚。这套SpringBoot+Vue疫情居家办公系统，最大的优点就是它的业务逻辑足够完整、技术栈足够主流，你能在它的基础上做二次开发的空间非常大。

如果你准备用它作为答辩项目，建议至少提前两到三周开始动手，不要拿到源码就等着最后一天启动项目交差。把核心表结构看一遍，把登录流程从前端到后端完整追踪一遍，再挑一个模块自己动手改造一下。这个过程下来，老师问的任何问题你都能接得住。

最后再说一个小技巧：如果你想把系统名字改得更有个人风格，不用全局替换代码里的项目名那么麻烦，只要保证前端页面顶部Logo、后端接口前缀、论文里系统名称三处一致，加上一个自己的系统名称就够了。答辩看的是你对自己项目的熟悉度，不是看名字多响。