用 Element Plus 快速搭建教务系统管理后台

本文是「EduCore 教务系统实战系列」第 8 篇，也是当前阶段性收官篇，重点讲解前端如何利用 Vue3 + Element Plus 构建一个完整的教务系统后台管理界面，支持菜单路由、权限控制、分页展示、表单增删改查等核心功能。

🎯 项目目标

✅ 构建统一的后台布局（侧边菜单 + 顶部栏 + 主内容区）；
✅ 实现模块化页面路由（如学生管理、成绩管理、课程管理）；
✅ 支持基于角色的菜单权限显示；
✅ 快速实现常用表格 / 表单页面；
✅ 页面交互简洁清晰、风格统一；

🛠️ 技术选型

技术	说明
Vue3	核心框架，Composition API 组织
Vue Router v4	路由管理
Pinia	状态管理（用于角色权限）
Element Plus	UI 组件库（页面基础搭建）
Axios	请求封装，统一通信

📐 页面布局设计

后台系统典型结构：

sql 复制代码

+----------------------------------------------------+
| 顶部导航栏（显示角色、用户信息、退出按钮等）      |
+----------------+-----------------------------------+
| 左侧菜单栏     | 主内容展示区（router-view）       |
|（支持收缩）    |                                   |
+----------------+-----------------------------------+

布局组件组织如下：

plaintext 复制代码

├── layout
│   ├── Index.vue         // 页面主框架
│   ├── Sidebar.vue       // 侧边菜单栏
│   ├── Navbar.vue        // 顶部导航栏
│   └── AppMain.vue       // router-view 占位区

🧱 路由结构设计（动态加载）

ts 复制代码

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: 'student', component: () => import('@/views/student/Index.vue') },
      { path: 'course', component: () => import('@/views/course/Index.vue') },
      { path: 'score', component: () => import('@/views/score/Index.vue') },
      { path: 'teacher', component: () => import('@/views/teacher/Index.vue') },
      { path: 'notice', component: () => import('@/views/notice/Index.vue') },
    ]
  },
  { path: '/login', component: () => import('@/views/Login.vue') },
  { path: '/:pathMatch(.*)*', redirect: '/404' }
]

🧑‍🔧 角色权限控制

使用 Pinia 管理登录用户信息：

ts 复制代码

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    role: '',
    token: ''
  }),
  actions: {
    setUser(data) {
      this.user = data;
      this.role = data.role;
    }
  }
});

菜单根据 role 动态渲染：

vue 复制代码

<template>
  <el-menu :default-active="route.path">
    <el-menu-item v-if="role === 'ADMIN'" index="/student">学生管理</el-menu-item>
    <el-menu-item v-if="role !== 'STUDENT'" index="/course">课程管理</el-menu-item>
    <el-menu-item index="/score">成绩查询</el-menu-item>
    <!-- 其他角色菜单控制 -->
  </el-menu>
</template>

<script setup>
import { useUserStore } from '@/stores/user';
const { role } = useUserStore();
</script>

🧾 示例模块：学生管理页面

🔹 页面结构

plaintext 复制代码

├── views
│   └── student
│       ├── Index.vue         // 学生管理主页
│       ├── FormDialog.vue    // 添加 / 编辑表单弹窗
│       └── tableData.json    // Mock 数据（可删除）

🔹 Index.vue 页面要素

搜索框
表格展示（Element Plus el-table）
添加、编辑、删除按钮
弹窗表单（el-dialog + el-form）

🔹 示例截图（建议你配图上传）

✅ 表格展示学生信息（分页、筛选）
✅ 点击"添加"弹出表单
✅ 修改学生信息
✅ 删除学生记录二次确认

⚙️ 表单组件复用示例

vue 复制代码

<el-dialog v-model="dialogVisible" title="添加学生">
  <el-form :model="formData" label-width="80px">
    <el-form-item label="姓名"><el-input v-model="formData.name" /></el-form-item>
    <el-form-item label="学号"><el-input v-model="formData.studentNo" /></el-form-item>
    <el-form-item label="性别">
      <el-select v-model="formData.gender">
        <el-option label="男" value="M" />
        <el-option label="女" value="F" />
      </el-select>
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </template>
</el-dialog>

🧠 页面通用交互规范

交互功能	设计标准
表格展示	使用 `el-table`，分页组件为 `el-pagination`
弹窗操作	使用 `el-dialog` + `el-form`
表单校验	`rules` 配置于 `<el-form>` 上
按钮提示	删除等危险操作需 `type="danger"` + `el-popconfirm`
加载状态	使用 `v-loading` 处理异步状态

🔒 权限级别控制示意

模块	管理员 ADMIN	教师 TEACHER	学生 STUDENT
学生管理	✅	✅	❌
教师管理	✅	❌	❌
成绩管理	✅	✅	✅（仅查看）
通知管理	✅	✅	✅
课程管理	✅	✅	❌

📌 页面样式与主题

默认使用 Element Plus 官方主题；
后续可接入 unocss 或 dark theme 实现暗黑模式；
页面尽量采用响应式设计，支持平板与浏览器自适应；

🔚 总结

通过这一套页面体系构建，我实现了：

✅ 教务后台管理系统的完整 UI 框架；
✅ 所有模块权限角色可控；
✅ 页面风格统一、结构清晰；
✅ 具备良好的复用能力与扩展能力；
✅ 前端开发效率大幅提升，后期维护更方便；

🔗 项目源码地址

GitHub：github.com/ZapcoMan/ed...
所有页面代码、组件、布局、权限机制已上传，欢迎查阅 + Star ⭐

🙋‍♂️ 如果你觉得这篇文章对你有帮助：

点个赞 👍 鼓励一下
收藏 ⭐ 便于后续参考
评论 💬 你在项目中遇到的困难
关注我 👇 获取下一阶段系统化项目实战专栏