vue笔记

Vue 单文件配置

1.安装npm

npm 全程为Node Package Manager,是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包

2.由于网络原因 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装 vue-cli

cnpm install -g @vue/cli

4.安装 webpack

cnpm install -g webpack
webpack 是 JavaScript 打包器（module bundler）

创建Vue+eleme 项目

1.vue ui

2.npm i element-ui -S

3.删除 package.json 和 package-lock.json 里面的  core-js 配置信息

4.npm i core-js -S

5.yarn install

6.yarn serve

使用axios 插件请求数据

1.安装 axios

 cnpm install axios -S
 //说明：带--save 或 -S 意思是将其写入到package.json文件中，供拷贝代码后添加使用

2.在main.js中引入

import Axios from "axios"
Vue.prototype.$axios = Axios

3.使用：

• get请求传参

axios.get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
      params: {
         id: 5
      }
   })
  .then(res => {
    console.log('数据是:', res);
  })
  .catch((e) => {
    console.log('获取数据失败');
  });

• post请求

this.$axios.post('http://rap2api.taobao.org/app/mock/121145/post',{
  name: '小月'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

• 一次合并发送多个请求

分别写两个请求函数，利用axios的all方法接收一个由每个请求函数组成的数组，可以一次性发送多个请求，如果全部请求成功，在axios.spread方法接收一个回调函数，该函数的参数就是每个请求返回的结果。

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
this.$axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(res1,res2){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
}))

4.全局配置

//写在main.js中
axios.defaults.baseURL = 'https://api.example.com';  //URL可以少写一部分
axios.defaults.headers.common['token'] = "";
axios.defaults.headers.post['Content-Type'] = 'application/json

5.拦截器

写在main.js中：发送请求或响应（接收）请求对数据进行判断

// 拦截器
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么，利用qs进行格式转换
  if(config.method === "post"){
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
Axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if(!response.data){
    return {
      msg:"数据返回不合理"
    }
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

6.跨域问题

• 写在config文件的index.js中 配置：

proxyTable: {
      '/doubai_api':{
          target: 'http://api.douban.com',
          pathRewrite: {
                 '^/doubai': ''
          },
          changeOrigin: true
       }
    }

• main.js

Vue.prototype.HOST = "/doubai_api"

• 访问：修改配置文件以后，需要重启服务器

var url = this.HOST + "/v2/movie/top250";
    this.$axios({
      method: 'get',
      url: url
    })
    .then(res => {
      console.log(res.data);
    })
    .catch(error => {
      console.log(error);
    })