使用的组件
本次前端使用的是Element组件,首页框架中主要用了el-header,img,el-button,el-menu,el-menu-item,el-submenu等组件。
<el-container:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。
<el-header:顶栏容器。
<el-aside:侧边栏容器。
<img:放置图片。
<el-button,按钮
<el-menu,导航栏菜单菜单内容事件
<el-submenu折叠下拉菜单
具体实现
以学生端的首页为例:
1、用el-container,el-header,el-aside实现页面的布局
2、在el-aside内放置导航栏菜单el-menu,菜单包含el-menu-item和折叠菜单el-submenu,分别对应我们项目的几个主要模块,(个人信息,班级,笔记,工具,知识图谱,教师端和学生端分类有小区别,但是整体布局一样)。el-submenu是可以点击下拉的菜单,例如工具部分,点击工具栏,包含了:图片转文字 ,语音转文字等小模块。如图:
3、实现页面跳转:
用index属性实现页面的跳转
4、点击按钮,退出系统