后台管理系统小结

涉及到不少知识点，关于vue全家桶及其他都用到了，下面是实现功能或者一些想记录的点
1.登录（axios实例和拦截器）
2.动态侧边栏和面包屑(this.$router.options.routes,meta路由元的使用)
3.iconfont的使用
4.页面布局和可复用组件
5.element-ui,js-cookie,一些工具方法的使用
6.vuex模块化和抽离api接口
7.es6/7和webpack的一些语法

实现思路
登录:获取用户表单信息，提交后给后端接口验证，如果匹配则返回一个token,使用cookie存储，再根据token去拉取用户信息接口获取信息，这里的具体操作主要看后端接口如何书写，登录成功后，跳转至主页面。

这里使用自定义配置创建axios实例：axios.create（[config]），指定的配置将与实例配置合并：axios＃get（url [，config]），这里会配置基本路径和超时时间。使用了axios拦截器,这里使用request拦截器是为了在每个请求头塞入token,好让后端对请求进行权限验证（根据业务而定），response拦截器，当服务端返回特殊的状态码，做统一处理。

axios配置（基准路径，请求拦截，响应拦截）

//1. 导入axios对象
import axios from "axios";
//2. 创建对象实例，create方法
const Server = axios.create({
    //请求接口的基础地址
    baseURL: 'https://www.liulongbin.top:8888/api/private/v1/',
    //设置超时时间
    timeout: 5000 // 请求超时，5000毫秒
})
 
// 请求拦截器
Server.interceptors.request.use(config => {
 
    // 给管理后台的接口设置header头，添加Authorzation属性
    let token = sessionStorage.getItem('lc_05B')
    config.headers['Authorization'] = token//给header头添加token值
 
    return config
}, error => {
    // 出现异常
    return Promise.reject(error);
})
 
// 响应拦截器
Server.interceptors.response.use(response =>{
 
    // 后台正常响应的状态，如果是200， 说明后台处理没有问题
    if (response.status == 200) {
        return response.data;
    }
    // return response.data 可以在这里统一的获取后台响应的数据进行返回，而这里面就没有请求头那些
    return response
}, error => {
    return Promise.reject(error);
})
 
export default Server // 导出自定义创建 axios 对象

API接口（封装API）

公用组件面包屑的封装（各个组件直接导入即可使用）

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in datalist" :key="index">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
  name: "breadName",
  data() {
    return {
      datalist: [],
    };
  },
  mounted() {
    this.datalist = this.$route.meta.bread;
  },
};
</script>