管理系统前端框架开发案例学习

一、需求分析

本案例的主要目标是开发一个智能学习辅助系统的前端界面，涵盖以下功能模块：

首页：显示系统的总体概览和关键功能介绍。
班级学员管理：实现班级管理和学员管理。
系统信息管理：管理部门和员工信息。
数据统计管理：提供员工和学员信息的统计和可视化展示。

此系统的目标用户包括学校管理者和教师，主要目的是简化教育管理的流程，提高工作效率。

二、代码解读

布局组件实现：

主布局文件

代码中通过 el-container 组件实现整体布局，总体代码：

TypeScript 复制代码

<script setup lang="ts">


</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <span class="title">Exp 智能协同管理系统</span>
        <span class="righttool">
          <a href=""><el-icon :size="20">
              <EditPen />
            </el-icon>修改密码</a> &nbsp;&nbsp; &nbsp;&nbsp;
          <a href=""><el-icon :size="20">
              <SwitchButton />
            </el-icon>退出登录</a>
        </span>
      </el-header>


      <el-container>
        <el-aside width="200px" class="aside">
          <el-scrollbar>
            <el-menu router>
              <!-- 首页菜单 -->
              <el-menu-item index="/index"> <el-icon>
                  <Location />
                </el-icon>首页
              </el-menu-item>


              <!-- 班级管理菜单 -->
              <el-sub-menu index="/manage">
                <template #title>
                  <el-icon>
                    <Grid />
                  </el-icon>班级学员管理
                </template>
                <el-menu-item index="/clazz"><el-icon>
                    <HomeFilled />
                  </el-icon>班级管理</el-menu-item>
                <el-menu-item index="/stu"><el-icon>
                    <UserFilled />
                  </el-icon>学员管理</el-menu-item>
              </el-sub-menu>


              <!-- 系统信息管理 -->
              <el-sub-menu index="/system">
                <template #title>
                  <el-icon>
                    <Share />
                  </el-icon>系统信息管理
                </template>
                <el-menu-item index="/dept"><el-icon>
                    <HomeFilled />
                  </el-icon>部门管理</el-menu-item>
                <el-menu-item index="/emp"><el-icon>
                    <Avatar />
                  </el-icon>员工管理</el-menu-item>
              </el-sub-menu>



              <!-- 数据统计管理 -->
              <el-sub-menu index="/report">
                <template #title>
                  <el-icon>
                    <Histogram />
                  </el-icon>数据统计管理
                </template>
                <el-menu-item index="/empReport"><el-icon>
                    <Avatar />
                  </el-icon>员工信息统计</el-menu-item>
                <el-menu-item index="/stuReport"><el-icon>
                    <UserFilled />
                  </el-icon>学员信息统计
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>



        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>


    </el-container>
  </div>
</template>

<style scoped>
.header {
  background-image: linear-gradient(to right top, #00affb, #00b8f9, #00c0f6, #00c8f1, #12cfeb);
}

.title {
  color: white;
  font-size: 40px;
  font-family: 楷体;
  line-height: 60px;
}

.righttool {
  float: right;
  line-height: 60px;
}

a {
  color: white;
  text-decoration: none;
}

.aside {
  width: 220px;
  border: 1px solid #ccc;
  height: 690px;
}
</style>

Header 部分：

TypeScript 复制代码

      <el-header class="header">
        <span class="title">Exp 智能协同管理系统</span>
        <span class="righttool">
          <a href=""><el-icon :size="20">
              <EditPen />
            </el-icon>修改密码</a> &nbsp;&nbsp; &nbsp;&nbsp;
          <a href=""><el-icon :size="20">
              <SwitchButton />
            </el-icon>退出登录</a>
        </span>
      </el-header>

标签说明：
- <el-header>：Element Plus 提供的头部容器组件，包裹顶部导航内容。
- <span>：定义系统标题和右侧工具栏的内容。
- <el-icon>：用于显示图标，这里通过 EditPen 和 SwitchButton 图标提供修改密码和退出登录功能。

侧边栏部分：

html 复制代码

<el-aside width="200px" class="aside">
  <el-scrollbar>
    <el-menu router>
      <el-menu-item index="/index">
        <el-icon><Location /></el-icon>首页
      </el-menu-item>
      <el-sub-menu index="/manage">
        <template #title>
          <el-icon><Grid /></el-icon>班级学员管理
        </template>
        <el-menu-item index="/clazz"><el-icon><HomeFilled /></el-icon>班级管理
        </el-menu-item>
        <el-menu-item index="/stu"><el-icon><UserFilled /></el-icon>学员管理
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar>
</el-aside>

标签说明：
- <el-aside>：Element Plus 提供的侧边栏组件，用于定义页面的导航区域。
- <el-scrollbar>：实现侧边栏内容的滚动条，便于内容超出时的查看。
- <el-menu>：导航菜单组件，使用 router 属性支持路由跳转。
- <el-menu-item>：定义具体的导航菜单项，对应一个页面路径。
- <el-sub-menu>：定义可展开的菜单组，通过 template #title 设置菜单标题。

样式文件：

css 复制代码

.header {
  background-image: linear-gradient(to right top, #00affb, #00b8f9, #00c0f6, #00c8f1, #12cfeb);
}
.title {
  color: white;
  font-size: 40px;
  font-family: 楷体;
  line-height: 60px;
}
.righttool {
  float: right;
  line-height: 60px;
}
.aside {
  width: 220px;
  border: 1px solid #ccc;
  height: 690px;
}

功能性描述：
- header 定义渐变背景颜色，用于提升顶部栏的视觉效果。
- aside 设置侧边栏的固定宽度、高度及边框样式，保持整体布局的一致性。

路由配置：

TypeScript 复制代码

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/layout/index.vue'),
      redirect: '/index',
      children: [
        {
          path: 'index',
          name: 'index',
          component: () => import('../views/index/index.vue'),
        },
        {
          path: 'emp',
          name: 'emp',
          component: () => import('../views/emp/index.vue'),
        },
        {
          path: 'dept',
          name: 'dept',
          component: () => import('../views/dept/index.vue'),
        },
        {
          path: 'clazz',
          name: 'clazz',
          component: () => import('../views/clazz/index.vue'),
        },
        {
          path: 'stu',
          name: 'stu',
          component: () => import('../views/stu/index.vue'),
        },
      ],
    },
  ],
});
export default router;

标签说明：
- routes：定义路由规则的数组，包含路径、组件及子路由配置。

组件注册与页面展示:

主页面通过 RouterView 渲染子页面内容。

TypeScript 复制代码

<el-main>
  <RouterView></RouterView>
</el-main>

标签说明：
- <el-main>：Element Plus 提供的主要内容区域容器，用于包裹主显示内容。
- <RouterView>：Vue Router 提供的组件，用于显示匹配当前路由的页面内容。

app.vue:

TypeScript 复制代码

<script setup lang="ts">
</script>

<template>
  <RouterView></RouterView>
</template>

<style scoped></style>

三、总结

通过本案例的学习，我们完成了智能学习辅助系统的前端开发，实现了包括布局设计、导航菜单配置以及路由管理在内的核心功能。这种基于组件化的开发方式具有高复用性和可维护性。接下来可以考虑：

管理系统前端框架开发案例学习

一、 需求分析

二、代码解读

布局组件实现：

主布局文件

样式文件：

路由配置：

组件注册与页面展示:

三、 总结

一、需求分析

三、总结