11、配置消息全局边界组件，在element UI中找到所需组件，然后导入此组件边界提示。
这个组件的配置需要全局挂载到Vue的原型对象上， 每个组件都能通过this来访问这个组件。只要访问到$message 这个自定义属性，就能进行弹框提示。
import { message } from ' element-ui ' vue.prototype.$ message=message if (RES.meta.status！==200 ) return this.$message.error ('登录失败！' )； this.$message.success ('登录成功^_^ )； 12、完善登录后操作token，/home 1、将登录成功之后的token，保存到客户端的sessionStorage中
1.1除项目登录外，其他API接口必须在登录后访问
1.2 token仅在当前站点打开时有效，因此将token保存到会话存储中
2、通过编程式导航跳转到后台主页，路由地址是 /home
如果要访问其他接口，如何告诉它我访问了？
可以在访问接口时提供token。 token是登录后从服务器发送来的令牌，也就是认证的信息。 我们在访问这些接口时，只要顺路携带token，就能成功访问。
同时在编程式导航中发生了一次页面跳转。
控制台. log (RES； window.session storage.setitem (' token '，res.data.token )； this.$router.push ()/home )；在components下在新建Home.vue页面，后在路由里引入import Home from '../components/Home.vue'，添加路径{ path: '/home', component: Home }。
13、访问根导航卫士控制页面权限如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。
//表示beforeEach导航守护router.beforeeach((to，from，next ) )/to访问路由对象的路径//form从哪个路径跳转而来的函数发行版//next ) )发行版next(/login ) )强制跳转//用户访问登录页面时发行版if(to.path==='/login ' )返回下一个) sesses next (； } )测试：
输入Home地址后，会自动跳转到“/login”。
14、访问根导航卫士控制页面权限实现退出的原理非常简单，只需销毁token就可以。
退出功能实现原理：基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的token才可以访问页面。
methods:(logout ) ({ window.sessionStorage.clear ) ) this.$router.push ) (/login )； 将退出的button放在Home组件页面上，单击button，然后返回login界面。
15、将本地代码提交代码云仓库目前关于登录的所有功能已经搞定，接下来把代码提交到本地仓库中，并且再将本地仓库和码云的远程仓库进行同步。
源代码经过测试后，如果没有问题，将其合并为主分支master，然后将主分支推送到云仓库。 此外，将新创建的子分支推送到云仓库。
1、在编译器上制作新的终端。 因为第一个终端已经被vue的可视化工具占用了。
2、输入命令git status查看源代码状态，列出的文件都是修改后的文件，下面的文件表示是新添加的。
3、输入命令git add .将上面的文件添加到暂存区。
4、输入命令git status后，所有文件均变为绿色，表示已添加到暂存区
5、在git commit -m命令中输入“登录功能完成”，此时已将暂存区代码提交到本地仓库。
6、分支git branch显示刚提交的代码都保存在登录分支中
rong>接下来把login里的代码合并到master主分支里。 第一步 切换到master主分支里 输入命令`git checkout master`第二步 `git branch` 说明正处于master主分支里第三步 合并 `git merge login`接下来进行远程推送 把本地的master分支推送到云端的码云中。
7、输入命令 git push ，此时本地的代码已经更新到了云端的码云中。
登录码云，点击仓库进行查看。
但是，本地有两个分支，master、login，云端只有master一个分支。
接下来要将本地的login分支推送到云端进行保存。
输入命令 `git checkout login` 切换到子分支输入命令 `git branch` 查看状态输入命令 `git push -u origin login`，将本地的login子分支推送到云端`origin`仓储里同时命名为`login`子分支进行保存
如图，云端仓库已有两个分支。
先上下划分，再左右划分。
整个布局用到了element-UI中的组件。在官网找到所需的布局结构，复制代码。
刷新页面后，发现三个部分的布局都挤在一起，原因是，因为我们用的组件并没有注册。
先导入组件，然后再注册组件。
//element.js文件//导入import { container,header,aside,main } from 'element-ui'//注册Vue.use(container)Vue.use(header)Vue.use(aside)Vue.use(main)基本的布局结构出来后，再设置背景颜色。
需要注意的是，每一个组件名都是一个类名，我们可以用这个类名给三个部分分别加上背景颜色。
但是颜色并没有充满整个屏幕，检查元素查出原因。
div 是充满屏幕的，说明与div无关。分析下一级section里的代码得出，是Home.vue里最外层的el-container，只需给它高度让它全屏，颜色就能充满屏幕了。
17、主页：美化主页的header区域 <el-header> <div> <img src="../assets/logo.png" alt="" /> <span>电商后台管理系统</span> </div> <el-button type="info" @click="logout">退出</el-button> </el-header> .el-header { background-color: #373f41; display: flex; justify-content: space-between; padding-left: 0; align-items: center; font-size: 20px; color: #fff; > div{ display: flex; align-items: center; } img { width: 60px; height: 60px; } span{ padding-left: 15px; }} 复习相关知识点： 1、display:flex; flex布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 传统布局：兼容性好，布局繁琐，局限性，不能在移动端很好的布局flex布局：操作方便，布局极为简单移动端应用很广泛； PC端浏览器支持情况较差； IE 11或更低版本不支持，或仅部分支持。 建议：如果是PC端页面布局，我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。2、flex容器的justify-content属性：定义了项目在主轴上的对齐方式。.box { justify-content: flex-start | flex-end | center | space-between | space-around; }3、align-items属性：定义项目在交叉轴上如何对齐。----------------------跳转：弹性布局知识点----------------------
18、主页：实现导航菜单的基本结构在element-UI中找到所需组件类，复制代码并删减不必要的代码。
19、主页：通过axios拦截器添加token验证需要授权的API，必须在请求头中使用Authorization字段提供token令牌。
也就是说，API文档里有很多接口，除了登录接口之外，其他所有的接口必须要授权才能正常调用。
比如说调用登录接口的时候，服务器端会返回一个登录成功的token令牌，这个token令牌就是我们权限认证的字段。
通过axios请求拦截器添加token，保证拥有获取数据的权限。
// axios请求拦截axis.interceptors.request.use(config => {// 为请求头对象添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem(’token’);return config;})这时候请求头里就有Authorization了，只不过值为null，因为我们刚发起的是登录请求，登录期间服务器不会颁发令牌。
如果登录之后再去调用其他接口，值就不为null，会是一个真正的token令牌。服务器接收请求的时候会先判断Authorization是否符合要求，符合要求会给响应，如果不符合要求或者这个字段的值不存在，服务器就会驳回这次请求。
20、主页：获取左侧菜单数据 ### 1.4.2. 左侧菜单权限- 请求路径：menus- 请求方法：get- 响应数据```json{ "data": { "id": 101, "authName": "商品管理", "path": null, "children": [ { "id": 104, "authName": "商品列表", "path": null, "children": [] } ] } "meta": { "msg": "获取菜单列表成功", "status": 200 }}定义一个生命周期函数，在methods中获取所有菜单。
get函数返回值是promise，简化操作可以用async和await，再解构赋值，把data属性结构出来并重命名为res接收 。
export default { //把获取到的数据挂载到data中 data() { return { // 左侧菜单数据 menulist: [], }; }, created() { // 获取所有的左侧菜单 this.getMenuList(); }, methods: {async getMenuList() {const { data: res } = await this.$http.get('menus');// console.log(res);if(res.meta.status !== 200) return this.$message.error(res.meta.msg);this.menulist = res.data; } }接下来就是渲染数据了。