VUE学习笔记一（创建项目与axios）

一、利用vue-cli创建项目（推荐）：

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘宝npm镜像安装相关依赖

在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装...

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装...

• vue init webpack 项目名称

  
  
  项目结构.jpg

二、axios的baseURL配置

配置

1.在pro.env.js或dev.env.js中增添API_BASEURL字段；
2.在axios文件：
2.1 在axios文件中引入pro.env.js（生产时）或dev.env.js（开发时）：

import process from '../../config/prod.env'

2.2 初始化axios时使用：

// axios初始化：延迟时间，主路由地址
let instance = axios.create({
     baseURL: process.API_BASEURL,  // 从环境进程中根据运行环境获取的api的base_url
     timeout:10000, // 请求超时时间
});

应用

/*
* 附带axios的封装
*/

import Vue from 'vue'
import  { LoadingPlugin, ToastPlugin } from 'vux'
Vue.use(LoadingPlugin);
Vue.use(ToastPlugin);
import axios from 'axios'
import process from '../../config/prod.env'


// axios初始化：延迟时间，主路由地址
let instance = axios.create({
  baseURL: process.API_BASEURL,  // 从环境进程中根据运行环境获取的api的base_url
  timeout: 10000, // 请求超时时间
});


//http request拦截器
instance.interceptors.request.use(config => {
  //在发送请求之前做某事
  Vue.$vux.loading.show({
    text: 'Loading'
  })
  config.headers = {
    "Content-Type": "application/json; charset=utf-8"
  }
  config.data = JSON.stringify(config.data);
  return config;
}, error => {
  //请求错误时做些事
  setTimeout(() => {
    Vue.$vux.loading.hide();
    Vue.$vux.toast.text('加载超时', 'middle')
  },3000)
  return Promise.reject(error);
});


//http response拦截器
instance.interceptors.response.use(response => {
  //对响应数据做些事
  Vue.$vux.loading.hide();
  return response;
}, error => {
  //请求错误时做些事
  setTimeout(() => {
    Vue.$vux.loading.hide()
    Vue.$vux.toast.text('请求失败', 'middle');
  },1000)
  return Promise.reject(error);
});

export default {
  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      instance.get(url, {
        params: params
      })
        .then(res => {
          //请求结束成功
          if (res.status === 200 || res.status === 304) {
            resolve(res.data)
          }else{
            reject(new Error(res.data.msg))
          }
        })
        .catch(res => {
          reject(res)
        })
    })
  },
  post(url, data = {}) {
    return new Promise((resolve, reject) => {
      instance.post(url, data)
        .then(res => {
          //请求结束成功
          if (res.status === 200 || res.status === 304) {
            resolve(res.data)
          }else{
            reject(new Error(res.data.msg))
          }
        })
        .catch(res => {
          reject(res)
        })
    })
  },
}

axios封装路径图.jpg

在main中引入.jpg

在.vue中请求接口

this.$http.get('/orion/verify/picVerify.do?md5=3752531FCF2BEDF6946EC2372D78B17B')
          .then(res => {
            console.log('get~~~~~~~~~~~~', res)

          })
          .catch(error => {
            console.log(error)
          })

请求接口.jpg