Vue_2电商后台管理系统：主页

11、配置Message全局弹框组件

在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保存在sessionStorage中

2、通过编程式导航跳转到后台主页，路由地址是 /home

如果要访问其他接口，如何告诉它我访问了？
可以在访问接口的时候提供token，token是登录之后服务器发我们的令牌，也就是身份认证的信息，我们只要在访问这些接口的时候，顺携带token，就能访问成功。

同时通过编程式导航发生了一次页面的跳转。

        console.log(res);
        window.sessionStorage.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()放行  next('/login') 强制跳转

//如果用户访问的是登录页，直接放行
if (to.path === '/login') return next ()

// 从 sessionStorage 中获取到保存的 token值
const tokenStr = window.sessionStorage.getItem ('token')

 // 没有token，强制跳转到登录页
if (!tokenStr) return next ('/login');
next();
})

测试：
输入Home地址会自动跳转到“/login”。

14、路由导航守卫控制页面访问权限

实现退出的原理非常简单，只需销毁token就可以。

退出功能实现原理：基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的token才可以访问页面。

methods:{
        logout() {
            window.sessionStorage.clear()
            this.$router.push("/login");
        }
    }

在Home组件页面放一个退出的button，点击button后，退回到login界面。

15、本地代码提交到码云仓库中

目前关于登录的所有功能已经搞定，接下来把代码提交到本地仓库中，并且再将本地仓库和码云的远程仓库进行同步。

源代码经过测试之后如果没问题，先合并到主分支master，再将主分支推送到云端仓库中，同时要将新建的子分支一并推送到云端仓库中。

1、在编译器里新建一个终端，因为第一个终端已经被vue的可视化工具占用了。
2、输入命令 git status 查看源代码的状态，列出的文件都是修改后的文件，下面的文件代表是新增的。
3、输入命令 git add . 将上面的文件添加到暂存区。
4、输入命令 git status 此时所有的文件变绿，说明已经添加到了暂存区
5、输入命令 git commit -m “完成了登录功能”，此时已将暂存区的代码提交了本地仓库中。

6、查看分支 git branch ，说明刚刚提交的代码都保存了login分支里

接下来把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`子分支进行保存

如图，云端仓库已有两个分支。

16、主页：实现基本的主页布局

先上下划分，再左右划分。

整个布局用到了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;
    }
  }

接下来就是渲染数据了。