工作日报_17昨天的报错已经得到解决了，vue最新版本node_scss下载出错终于找到了，主要原因呢就是没有配置pyt

2020年5月19日星期二

昨天的报错已经得到解决了，vue最新版本node_scss下载出错终于找到了，主要原因呢就是没有配置python的环境，昨天晚上搞到快两点了才弄出来，不过还是挺激动的。真是皇天不负有心人有心人呢。

今天呢主要就是复习了Vue的路由，还有就是在Vue中使用SVG的图片。axios的封装配置；

先说说svg吧》

SVG是一种图像文件格式，是由（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，
可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文
字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

svg的使用方法：

1. 通过img引入svg
2. 通过直接插入svg

还可以通过css样式修改svg的大小，颜色

.search {
  width:50px;
  fill:#f00;

}

vue路由

//路由懒加载
const Page = ()=>import (路径)
{
    path：‘/page’，
    name：‘/page’，
    component:Page
}

路由的高亮显示

    自定义：
    
    router-link-active { //高亮样式 }
    
    自定义高亮类名:

需要在实例化路由中添加：
const router = new VueRouter({
  routes,
  linkActiveClass: 'active'  //添加自定义类名
});

数据请求

axios封装:基本不用封装，只是对请求的接口地址，超时，报错处理

安装axios

npm i axios -S

axios官方github仓库地址：https://github.com/axios/axios
简洁语法:
//get语法语法
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
//post请求语法
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

//可以用axios同时请求多个接口，类似于Promise.all()
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));
axios通过配置对象来请求数据
//post请求
axios({
  url:'接口地址',
  baseURL：‘接口默认前缀地址’
  method:'post',
 // data:{  }, //传参,注意：post请求有可能会用qs库去转换
  data:qs.stringify(obj)
  headers:{'content-tpye':'application/x-www-form-urlencoded',......}, //请求头配置
  
});

例如：

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

//get请求
axios({
  url:'接口地址',
  method:'get',
  params:{  }, //传参
  headers:{'content-tpye':'x-www-form-urlencoded',......}, //请求头配置
  
});
axios的默认配置
axios.defaults.baseURL = '默认接口域名url';
axios.defaults.headers['x-token'] = token值;  //添加token
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
创建axios实例

const instance = axios.create({
  baseURL: '默认接口域名url',
  timeout:2500
});

//instance.defaults.timeout = 2500;  //给实例添加默认超时时间

5.axios拦截器

// 添加请求拦截
axios.interceptors.request.use(function (config) {
    //发送成功请求
    config.headers['x-token']=getToken()
    return config;
  }, function (error) {
    //发送错误请求的拦截
    return Promise.reject(error);
  });

// 添加响应拦截
axios.interceptors.response.use(function (res) {
    //成功返回
    if(res.code===2000) {
      
    }
    
    if(res.code===5000) {
      Tosst({
        title:'登录超时'
      })
      
      router.push({
      path:'/login'
      })
    }
    return res;
  }, function (error) {
    //失败返回
    return Promise.reject(error);
  });