Vue3项目开发——新闻发布管理系统(六)

文章目录

  • 八、首页设计开发
    • 1、页面设计
    • 2、登录访问拦截实现
    • 3、用户基本信息显示
      • ①封装用户基本信息获取接口
      • ②用户基本信息存储
      • ③用户基本信息调用
      • ④用户基本信息动态渲染
    • 4、退出功能实现
      • ①注册点击事件
      • ②添加退出功能
      • ③数据清理
    • 5、代码下载

八、首页设计开发

登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。

1、页面设计

系统页面主要分为三部分,左侧为系统的菜单栏,右侧上部为系统的头部,下部为系统的主体区域,也就是系统的新闻分类管理、新闻管理、个人信息各功能都会在此区域进行展示。
Vue3项目开发——新闻发布管理系统(六)_第1张图片
首页页面布局是这样设计的:
①、整个页面通过el-container组件进行布局。
②、页面左侧菜单栏部分使用el-aside组件,菜单使用el-menu组件进行布局。
③、页面右侧总体再使用一个el-container组件进行布局。右侧头部使用el-header组件,右侧主体使用el-main组件。右侧头部里面使用el-dropdown组件,右侧主体使用router-view
views\

你可能感兴趣的:(Vue知识学习及项目开发实践,Vue3,项目开发,新闻发布管理系统)