Exp 智能协同管理系统前端首页框架开发

一、 需求分析

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

• 首页：显示系统的总体概览和关键功能介绍。

• 班级学员管理：实现班级管理和学员管理。

• 系统信息管理：管理部门和员工信息。

• 数据统计管理：提供员工和学员信息的统计和可视化展示。

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

二、代码解读

布局组件实现：

主布局文件

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

<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 部分：

      <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 图标提供修改密码和退出登录功能。

侧边栏部分：

<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 设置菜单标题。

样式文件：
 

.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 设置侧边栏的固定宽度、高度及边框样式，保持整体布局的一致性。

路由配置：

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 渲染子页面内容。

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

• 标签说明：

  • <el-main>：Element Plus 提供的主要内容区域容器，用于包裹主显示内容。

  • <RouterView>：Vue Router 提供的组件，用于显示匹配当前路由的页面内容。

app.vue:

<script setup lang="ts">
</script><template><RouterView></RouterView>
</template><style scoped></style>

三、 总结

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