Vue3项目开发——新闻发布管理系统（六）
文章目录
- 八、首页设计开发
- 1、页面设计
- 2、登录访问拦截实现
- 3、用户基本信息显示
- ①封装用户基本信息获取接口
- ②用户基本信息存储
- ③用户基本信息调用
- ④用户基本信息动态渲染
- 4、退出功能实现
- ①注册点击事件
- ②添加退出功能
- ③数据清理
- 5、代码下载
八、首页设计开发
登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。
1、页面设计
系统页面主要分为三部分，左侧为系统的菜单栏，右侧上部为系统的头部，下部为系统的主体区域，也就是系统的新闻分类管理、新闻管理、个人信息各功能都会在此区域进行展示。
首页页面布局是这样设计的：
①、整个页面通过el-container组件进行布局。
②、页面左侧菜单栏部分使用el-aside组件，菜单使用el-menu组件进行布局。
③、页面右侧总体再使用一个el-container组件进行布局。右侧头部使用el-header组件，右侧主体使用el-main组件。右侧头部里面使用el-dropdown组件，右侧主体使用router-view。
views\