企业官网建设流程全解析

这道题目拿到手，我第一反应是：又是一个典型的课程设计/毕业设计级别的全栈小项目。"vue中小学家校服务系统设计与实现985k5"——这个文件名里"985k5"应该是作者保存项目时的版本号或者压缩包编号，不重要，重要的是"中小学家校服务系统"这几个字背后的东西。这类系统属于管理信息系统，是计算机相关专业出镜率很高的选题，需求明确、角色清晰、技术栈固定，特别适合用来练习前后端分离开发。

我在不同阶段帮人看过好几套类似源码，也和几位做这类项目的同学聊过，今天就把这套系统的设计思路、表结构、前端实现细节和踩坑经验完整串一遍。不只讲代码怎么写，重点说清楚每一步为什么这么做，方便你拿着这个思路去做自己的课设或者毕业设计。

1. 先把系统的边界和问题想明白

1.1 家校服务到底要解决什么

很多同学一上来就急着写代码，结果功能越做越乱，最后老师和家长的角色权限都混在一起。这里建议先从业务场景入手。

中小学阶段的"家校服务"，核心痛点其实是信息传递不畅。班级通知靠微信群，作业靠口头传达，成绩靠家长会，偶尔还要挨个统计接送信息——这些环节如果全部搬到系统里，就需要回答三个问题：谁在发布消息？谁在接收消息？消息走什么流程？

围绕这三个问题，可以把用户拆成三类角色：

• 管理员：维护基础数据，管理班级、教师账号、学期信息。
• 教师：发布作业、发布通知、录入成绩、管理请假审批。
• 家长（含学生本人）：查看通知、查看作业、查看成绩、发起请假申请、给教师留言。

这个角色模型几乎决定了后面所有功能模块的划分，也决定了数据库表的结构。如果你在动手之前画过用例图，后面写代码会顺畅很多。

1.2 功能清单不需要多，覆盖主线即可

做课程设计最忌讳功能堆砌。哪怕只做下面这五条主线，也已经是一个逻辑自洽的家校服务系统：

你看清楚这个表，前端页面要写多少就已经有数了：教师端四五个页面，家长端四五个页面，管理端两三个页面，再加上登录、主页和个人信息，总共十五到二十个页面。这个量级用 Vue 来做，是完全可以驾驭的。

1.3 技术栈为什么是 Vue 全家桶

这个题目前面挂着"vue"，说明作者选的是 Vue。课件里用 Vue 2 配 Element UI 的情况特别多，也有用 Vue 3 配 Element Plus 的。我的建议是看你手头的后端接口用什么。

• 后端是 Spring Boot + MyBatis，前端 Vue 2 + Element UI，这是最稳的组合。
• 后端如果需要你自己写，也可以选 Node.js + Express，但课程设计里 Spring Boot 答辩时更经得起问。
• 如果不想写后端，可以直接用 Mock 数据拦截 Axios 请求。但这样做风险在于答辩时老师问"数据存哪里"，容易答不上来。

如果让我给一个参考搭配：Vue 2 + Vue Router + Vuex + Axios + Element UI，后面配一个 Spring Boot 后端。这个组合的组件生态最成熟，遇到的坑网上一搜都有现成答案。

2. 核心模块设计与数据库关系

2.1 模块划分决定目录结构

这套系统的代码组织方式，我建议按"角色 + 功能"来分模块，而不是单纯按"页面"来分。

比如前端src/views目录可以这么分：

src/views/ login/ layout/ admin/ Dashboard.vue ClassManage.vue UserManage.vue teacher/ NoticeList.vue NoticeEdit.vue HomeworkList.vue HomeworkEdit.vue GradeInput.vue LeaveAudit.vue parent/ NoticeView.vue HomeworkView.vue GradeView.vue LeaveApply.vue MessageView.vue

这样划分的好处很明显：路由前缀可以直接对应目录名，权限控制也好写。比如路由/teacher/homework就对应teacher/HomeworkList.vue，在路由守卫里判断用户角色为2才能访问。

2.2 表结构怎么设计不返工

后端数据库是系统的地基，我见过不少项目改需求改到表的字段对不上，最后前端拿不到数据。下面这几张表基本够用：

用户表 user

班级表 class

学生表 student

通知公告表 notice

作业表 homework

成绩表 grade

除此之外再补一张请假表和一张留言表，整个数据库的骨架就起来了。注意几个关系：学生和学生。家庭的家长账号通过student.user_id关联到登录账号，而教师则通过class.head_teacher_id或者一张教师班级中间表来关联班级。如果需求只要求班主任管理一个班，用head_teacher_id字段就够了，不用额外建关联表。

2.3 演示数据要提前准备

有一个细节经常被忽视：答辩演示的时候，没有像样的数据会显得很空。建议你写后端接口时就把这些数据用 SQL 脚本预置进去：

• 三个角色账号：admin / teacher01 / parent01
• 一个年级，两个班级，每班五六个学生
• 至少一个月的历史通知、三科作业、两次考试成绩

这些都放进init.sql，部署的时候直接执行，演示的时候直接登录，不需要现场注册。

3. 前端实现过程与关键页面

3.1 前端工程化的基础操作

如果你从零开始搭建，第一步自然是：

vue create school-home-service

选预设的时候勾上 Router、Vuex 和 Less/Sass。Element UI 安装命令：

npm i element-ui -S

在main.js里全局注册：

import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' import router from './router' import store from './store' Vue.use(ElementUI, { size: 'small' }) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')

有一点值得提醒：Element UI 全量注册会让打包体积变大，但对课设项目来说无伤大雅，按需引入反而增加配置复杂度，全量注册更省事。

3.2 布局组件：侧边栏加导航

系统登录后不能一个页面一个裸页面，需要一个统一的后台布局。这里用el-container做外壳：

<template> <el-container class="layout-wrapper"> <el-aside width="220px"> <div class="logo">家校服务系统</div> <el-menu :default-active="$route.path" router> <el-menu-item v-for="item in menuList" :index="item.path" :key="item.path"> {{ item.title }} </el-menu-item> </el-menu> </el-aside> <el-container> <el-header> <span>{{ userInfo.name }}</span> <el-button type="text" @click="logout">退出</el-button> </el-header> <el-main> <router-view /> </el-main> </el-container> </el-container> </template>

菜单列表是关键。它不能写死，要根据登录用户的角色动态生成，否则教师端就会显示家长端的菜单。常见做法是在store里存一份menus，登录成功后根据角色接口返回。

3.3 登录页与权限控制是本系统的核心

登录页的前端代码说白了就是一个表单。真正值得花时间的是下面的权限控制链路。

// 登录接口调用后 login({ commit }, loginForm) { return new Promise((resolve, reject) => { api.login(loginForm).then(res => { const { token, userInfo } = res.data localStorage.setItem('token', token) commit('SET_USERINFO', userInfo) commit('SET_ROLE', userInfo.role) // 根据角色生成菜单 const menus = generateMenus(userInfo.role) commit('SET_MENUS', menus) resolve() }).catch(reject) }) }

路由守卫部分，要拦截未登录状态，也要拦截角色越权：

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (!token && to.path !== '/login') { next('/login') return } if (token && to.path === '/login') { next('/') return } const role = store.state.user.role if (!hasPermission(role, to.path)) { next('/403') return } next() })

hasPermission的逻辑可以简单一点：管理员可以访问所有路径，教师只能访问以/teacher开头的路径，家长只能访问/parent开头的路径。这套逻辑虽然简单，但足以说明你理解了权限控制，答辩时能讲出"前端路由拦截 + 后端接口校验"双层保护，分数不会低。

3.4 核心页面：作业列表、成绩录入、留言

作业列表和成绩录入这两个页面最体现前后端数据联动，我把实现要点拆开讲。

教师端 - 布置作业页

表单字段就是刚才作业表的字段：科目、内容、班级、截止时间。提交时带上teacher_id接口会自动从 token 里解析，前端不需要传。

submitForm() { this.$refs.form.validate(valid => { if (!valid) return this.loading = true api.createHomework(this.form).then(() => { this.$message.success('布置成功') this.$router.push('/teacher/homework/list') }).finally(() => { this.loading = false }) }) }

表单校验用 Element 的rules，比如内容字段：

rules: { content: [ { required: true, message: '请填写作业内容', trigger: 'blur' }, { min: 5, message: '不少于5个字符', trigger: 'blur' } ] }

这里有一个小的细节经验：截止时间的字段用el-date-picker时，格式化要设为yyyy-MM-dd HH:mm，否则传给后端的字符串缺了时分秒，排序会出问题。

家长端 - 查看成绩页

这个页面建议直接用表格展示成绩列表，再加一个简单的成绩条形图。条形图用 Element 内置的进度条组件就能实现：

<el-table :data="gradeList"> <el-table-column prop="examName" label="考试"></el-table-column> <el-table-column prop="subject" label="科目"></el-table-column> <el-table-column prop="score" label="分数"></el-table-column> <el-table-column label="水平参考"> <template slot-scope="scope"> <el-progress :percentage="Math.min(scope.row.score, 100)" :format="() => scope.row.score + '分'" /> </template> </el-table-column> </el-table>

如果成绩超过 100 分，Math.min限制住进度条，不然进度条会溢出。

家长端 - 留言功能

留言是一个双向交互的场景。家长发起留言后，教师需要能收到提醒并回复。这里不需要实现实时聊天，存进数据库即可。前端页面用列表形式把"我的留言"和"教师回复"叠在一起，数据接口返回的格式类似：

{ "id": 12, "content": "孩子最近上课状态怎么样？", "reply": "整体不错，课堂参与度有提升", "createTime": "2024-10-20 09:30", "replyTime": "2024-10-20 15:40" }

家长端展示的时候，把reply为空的数据标记为"待回复"，用标签组件做状态区分。教师端则按班级筛选出未回复留言，排在最前面。

4. 前端工程中的关键细节

4.1 统一封装 Axios，省下重复报错处理

一套能跑通的前端工程里，请求封装是最不能省的一环。不封装的话，每个页面都要自己判断 token 过期、自己要处理网络错误，代码会膨胀得很难看。

import axios from 'axios' import { Message } from 'element-ui' import router from '@/router' const service = axios.create({ baseURL: '/api', timeout: 10000 }) service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = 'Bearer ' + token } return config }) service.interceptors.response.use( response => { const res = response.data if (res.code === 401) { localStorage.removeItem('token') router.push('/login') Message.error('登录已过期，请重新登录') return Promise.reject(new Error('unauthorized')) } if (res.code !== 200) { Message.error(res.message || '请求失败') return Promise.reject(new Error(res.message)) } return res }, error => { Message.error('网络异常，请稍后重试') return Promise.reject(error) } ) export default service

这里我特别强调统一处理后端返回的code。很多课设项目后端返回结构是{ code: 200, message: "success", data: {} }，如果每个页面都自己判断res.code，遇到 token 过期时就会漏掉统一跳转。

4.2 状态管理用 Vuex 存什么

Vuex 不是所有数据都往里塞，那样会让页面代码变得非常绕。这套系统里，建议存三类数据：

• 用户信息：登录后获取，整个前端都需要展示用户名、头像。
• 菜单列表：根据角色生成，侧边栏和路由守卫都要用。
• 班级列表：教师端发布作业、留言筛选时频繁用到，全局存一份可以避免每个页面重复请求。

班级列表在 Vuex 里维护一份就够了，但要注意：管理员修改班级数据后，需要重新拉取。这里比较简单实用的做法是在修改成功之后调一次dispatch('fetchClassList')，不要过度设计缓存失效机制。

4.3 复用组件的取舍

一个页面杀到底的项目也可以用，但如果能提炼出几个复用组件，答辩时会有加分的亮点。

比如"作业卡片"这个场景，教师端的作业列表、家长端的今日作业、首页的动态提醒都会用到。可以把作业展示抽成一个组件HomeworkCard.vue：

<template> <el-card class="homework-card"> <div class="hw-header"> <span class="hw-subject">{{ subject }}</span> <el-tag v-if="deadline" size="mini" type="warning">{{ deadlineText }}</el-tag> </div> <p class="hw-content">{{ content }}</p> </el-card> </template> <script> export default { name: 'HomeworkCard', props: { subject: { type: String, required: true }, content: { type: String, required: true }, deadline: { type: String, default: '' } }, computed: { deadlineText() { if (!this.deadline) return '' const now = new Date() const target = new Date(this.deadline) const diff = target - now if (diff < 0) return '已截止' const days = Math.ceil(diff / (1000 * 60 * 60 * 24)) return days > 0 ? `剩余${days}天` : '今天截止' } } } </script>

一个小组件就能同时服务教师端和家长端，在展示项目结构时也更好讲："我做了一些公共组件的抽取，提升了代码复用性"。这句比"我复制粘贴了很多页面"听起来专业得多。

4.4 跨域与代理配置

当后端接口是localhost:8080而前端是8081，浏览器会拦截跨域请求。前端的解决办法是配置代理。

vue.config.js里加一段：

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

注意前后端团队的约定：前端请求统一带/api前缀，代理把/api去掉后转发到后端。网上很多项目报 404、CORS 错误，八成是这里没配好。另外部署到服务器后，代理配置就不生效了，需要后端配合网关转发或者你把构建产物放进后端static目录。

5. 常见问题排查与答辩经验

5.1 实战中容易踩的坑

我把自己以前调试这类项目时遇到的问题整理成一个速查表，遇到类似报错可以直接对号入座。

这里最值得展开说的是"列表页不刷新"这个问题。Vue Router 在使用相同组件时会复用实例，比如你从"已发布作业"切到"草稿箱"，如果两个页面用了同一个组件，组件不会重新走created生命周期。解决办法是在router-view上加一个:key：

<router-view :key="'view-' + $route.fullPath" />

简单粗暴，但确实有效。

5.2 让前后端联调更顺手的三个习惯

第一个习惯：所有接口的返回结构保持统一。后端如果返回一会儿是{ code: 0 }、一会儿是{ code: 200 }，前端code !== 200的逻辑就全乱了。建议设计接口时统一为：

{ "code": 200, "message": "success", "data": {} }

第二个习惯：后端接口的路径和前端请求函数名对齐。比如"布置作业"的接口是POST /teacher/homework，前端请求函数就叫createHomework，不要出现接口叫addWork，前端函数却叫submitHomework的情况，排查问题会非常痛苦。

第三个习惯：多写console.log不如多写注释。做课设的时候你可能一周后就要答辩，到时候看到自己三个月前写的代码，没有注释真的会看不懂自己当时为什么这么写。稍微在复杂判断和接口调用处补两句注释，你会感谢自己的。

5.3 答辩时怎么讲清楚这个系统

答辩时的逻辑其实就三步。

第一步，讲清楚"做什么"：这是一个基于 Vue 的中小学家校服务系统，主要解决了教师和家长之间信息不对称的问题，提供通知、作业、成绩、请假、留言等核心功能。

第二步，讲清楚"怎么做"：前端使用 Vue 全家桶，通过路由守卫实现角色权限控制，通过 Axios 完成前后端数据交互，使用 Element UI 搭建界面。后端使用 Spring Boot 提供 RESTful API，数据存储使用 MySQL。整个过程严格按照需求分析、数据库设计、接口设计、前端开发的流程来做。

第三步，讲清楚"难点和亮点"：如果你做过权限控制，这就是亮点；如果你统计过成绩图表，这也是亮点。哪怕你只是把 Element 的表格做了一些自定义渲染，也能讲。难点的常见说法是"班級和教师的多对多关系让我花了不少时间设计中间表"，这个属于合理难点的范畴。

如果老师问"你以后会怎么改进这个系统"，不要只说"增加功能"。更稳的回答是："现在系统的通知功能是单向的，后续可以考虑加入已读回执，让教师知道哪些家长已经看到了通知。"这个问题有具体场景、有技术可行性，听上去比空泛回答真实得多。

5.4 演示之前花十分钟做这件事

把一个系统从"能跑"变成"演示不翻车"，只需要十分钟的准备工作。

• 清空数据库里测试产生的脏数据，比如乱码、重复数据。
• 核实三个测试账号的密码，重新登录一遍。
• 把浏览器缩放比例调好，字体大小正常，不要出现页面错位。
• 准备一个"断网预案"：如果现场网络不好，后端跑在本地、前端也连本地，确保演示不受网络影响。
• 把演示流程的先后顺序固定下来：先登录管理员，看整体数据；再切到教师端，展示布置作业；最后切换到家长端，展示查看作业和成绩。顺序每次一致，临场就不会乱。

我最想强调的还是权限控制那条链路。答辩老师很喜欢盯着"家长能不能访问教师页面"这类问题追问，你要是能把"前端路由守卫 + 后端接口校验 + 菜单按角色生成"三层机制讲完，整套代码的技术深度一下就会被认可。

这套系统做完，我最大的体会是：课程设计项目不是越大越好，而是要把一个真实的业务闭环打通。家校服务系统的价值不在页面的花哨，而在角色权限的严谨和信息流转的顺畅。你把它做成一个老师愿意用、家长看得懂、管理员管得住的作品，技术能力和表达能力都会成长一大截。