主页面搭建--简单理解步骤4

登录和获取用户信息都完成了，现在要进行主页面搭建

一：前台

1：先配置一个路由，同时在component里面创建Layout.vue文件，在router文件夹里面的index.js里面配置

引入Layout组件，如果访问根目录 就加载layout页面

2：在layout里面搭建页面

主页面包括头部区域，左侧区域 右侧区域-----这其中分为三个子组件方便管理

同时要在总组件里面引入这三个组件进行注册使用

3：分完组件之后就应该写组件了----都在ui里面找到的

头部区域功能有个logo   和下拉菜单能够退出登录和修改密码

现在进行左侧导航

 4：左侧导航要把首页和学员管理教师管理分成三个组件，进行页面切换普通组件放进compontents（他们都是路由组件所以放进views文件夹里面（在这里创建一个home文件夹里面再写一个index.vue 同理再写连个students和teachers文件夹）

同时再router.js里面引入这几个组件

5：现在引入完了  就要在前端路由里面配置因为是layout的子路由所以在layout路由里面写这三个路由----路由渲染出口在Appmain里面    同时访问根目录应该出现的是首页 所以在layout路由配置里面重定向一下路由

 6：现在进行右侧主区域-------这时候点击首页 学员管理和教师管理都可以进行页面切换了 

上面有个可以首页框点击可以回到首页页面；（ui里的面包屑）

在这时首页这个需要隐藏 单独抽出一个组件 进行判断 如果是home页面就显示，不是就隐藏

----------------接下来写右上角的退出系统---------------

二：后台

1：在后台router里面搭建退出登录的接口

先接受前台传过来的数据，然后进行查询，如果错误存在就输出错误信息

如果数据查不到，返回错误信息，能够查到就成功退出

 

三：前台

1：写退出登录api方法

 

2：组件调用这个api---在退出登录里面引用调用，token获取  如果退出成功本地token就清除掉，

用户也清除掉，然后回到登录页面