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