三、vue-cli3.0配置axios使用iview实现前后台交互

1、src目录下创建config文件夹，config下创建index.js

let baseURL = process.env.VUE_APP_URL
export default {
  baseURL: baseURL,
  timeout: 10000, // 请求超时
  version: "1.0.0"
}

2、src目录下创建http文件夹，http下创建axios.js，http.js ，http下创建文件夹user，user文件夹下创建login.js

axios.js

// 服务器响应前后拦截
import axios from "axios";
import qs from "qs"
import config from "@/config"

// 创建 axios 实例
const {baseURL, timeout} = config
const ax = axios.create({
  // 是否跨站点访问控制请求使用凭证(Cookie)
  withCredentials: true,
  baseURL: baseURL, // 配置接口地址
  // 修改请求的数据再发送到服务器
  transformRequest: [
    (data, headers) => qs.stringify(data) // 序列化请求的数据
  ],
  timeout: timeout // 配置请求超时
})

// 请求拦截
ax.interceptors.request.use(config => {
  // 1. 这个位置就请求前最后的配置
  // 2. 当然你也可以在这个位置 加入你的后端需要的用户授权信息
  // config.headers.common['token'] = ""
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截
ax.interceptors.response.use(response => {
  // 请求成功
  // 1. 根据自己项目需求定制自己的拦截
  // 2. 然后返回数据
  return response;
}, error => {
  // 请求失败
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        // 对400错误您的处理\
        break
      case 401:
        // 对 401 错误进行处理
        break
      default:
        // 如果以上都不是的处理
        return Promise.reject(error);
    }
  }

})

export default ax

http.js

 // 封装axios请求
import axios from "./axios.js"

export default {
  /**
   * get 请求
   * @param url 接口路由
   * @param auth 是否需要带登录信息
   * @returns {AxiosPromise<any>}
   */
  get(url, data, auth = false) {
    if (auth) {
      return axios.get(url, {headers: {Authorization: 'Your back-end user authenticates information'}});
    } else {
      return axios.get(url);
    }
  },

  /**
   * post 请求
   *
   * @param url 接口路由
   * @param data 接口参数
   * @param auth 是否需要带登录信息
   * @returns {AxiosPromise<any>}
   */
  post(url, data, auth = false) {
    if (auth) {
      return axios.post(url, data, {headers: {Authorization: 'Your back-end user authenticates information'}});
    } else {
      return axios.post(url, data);
    }
  },

  /**
   * put请求
   * @param url 接口路由
   * @param data 接口参数
   * @param auth 是否需要带登录信息
   * @returns {AxiosPromise<any>}
   */
  put(url, data, auth = false) {
    if (auth) {
      return axios.put(url, data, {headers: {Authorization: 'Your back-end user authenticates information'}});
    } else {
      return axios.put(url, data);
    }
  },

  /**
   * 删除
   * @param url 接口路由
   * @param auth 是否需要带登录信息
   * @returns {AxiosPromise}
   */
  del(url, auth = false) {
    if (auth) {
      return axios.delete(url, {headers: {Authorization: 'Your back-end user authenticates information'}});
    } else {
      return axios.delete(url);
    }
  },

  /**
   * 上传文件
   * @param url 接口路由
   * @param file 接口文件
   * @param auth 是否需要带登录信息
   */
  uploader(url, file, auth = false) {
    let param = new FormData();
    param.append("file", file)
    if (auth) {
      return axios.post(url, param, {headers: {Authorization: 'Your back-end user authenticates information'}})
    } else {
      return axios.post(url, param)
    }
  }
}

login.js

import ax from "../http.js"

export const Login = params =>ax.post("/login", params)

以上配置就完成了,然后集成iview4

1、在package.json中的dependencies下配置

"view-design": "^4.0.0"

2、执行

npm install  
// 或
cnpm install  

3、配置main.js  加入

import ViewUI from "view-design";
import "view-design/dist/styles/iview.css";

Vue.use(ViewUI);

4、在iview4.0.0官网找到一个模板复制到About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
      <FormItem prop="username">
        <Input type="text" v-model="formInline.username" placeholder="Username">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input type="password" v-model="formInline.password" placeholder="Password">
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
  import {Login} from "@/http/user/login"
  export default {
    name: 'About.vue',
    components: {
    },
    data () {
      return {
        formInline: {
          username: '',
          password: ''
        },
        ruleInline: {
          username: [
            { required: true, message: 'Please fill in the user name', trigger: 'blur' }
          ],
          password: [
            { required: true, message: 'Please fill in the password.', trigger: 'blur' },
            { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            setTimeout(() => {
              Login(this.formInline).then(res => {
                debugger
                let data = res.data
                if (data) {
                  if (data.status === 0) {
                    // 登录成功
                    this.$Message.success(data.msg)
                  } else {
                    // 登录失败
                    this.$Message.success(data.msg)
                  }
                }  else {
                  this.$Message.success("登录异常")
                }
              }).catch(() => {
                this.$Message.error("访问失败!");
              })
            })
          } else {
            this.$Message.error('Fail!');
          }
        })
      }
    }
  }

</script>
<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }
  .layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }
</style>

 访问结果：后台自己写一个登录方法即可