vue学习过程总结（07） - vue的后台服务API封装及跨域问题的解决

以登录流程为例说明接口的封装。

1.登录调用后台的登录api

登录界面的代码

<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-title">后台管理系统</div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="rules"
        auto-complete="on"
        label-position="left"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-s-custom"
            v-model="loginForm.username"
            placeholder="用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="off"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            v-model="loginForm.password"
            placeholder="密码"
            name="password"
            tabindex="2"
            auto-complete="off"
            @keyup.enter.native="submitForm()"
          />
        </el-form-item>
        <div class="login-btn">
          <el-button :loading="loading" type="primary" @click="submitForm()">登录</el-button>
        </div>
        <p class="login-tips">Tips : 一条小尾巴。。。</p>
      </el-form>
    </div>
  </div>
</template>

<script>
import { vuetest } from '@/api/index'

    var validateUsername = (rule, value, callback) => {
        console.log(value);
        if (value == undefined || value === "") {
            callback(new Error("请输入用户名"));
        } else {
            callback();
        }
    };
    var validatePassword = (rule, value, callback) => {
        if (value == undefined || value === "") {
            callback(new Error("请输入密码"));
        } else {
            callback();
        }
    };

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "111111"
      },
      rules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      },
      loading: false
    };
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          // 方法后台验证登录信息，验证成功后
          vuetest().then(res => {
            console.log("===============vue test===========");
            console.log(res);
            console.log(res.data.status);
            console.log(res.data.token);

            var tk = res.data.token;
            this.$store.dispatch("user/login", this.loginForm).then(() => {
              this.$store.dispatch("user/setTokenStore", tk);
            // 信息成功存储在vuex后跳转页面
            this.$router.push("/home");
            this.loading = false;
          });
            // this.$router.push("/home");
            // this.loading = false;
          }).catch(error => {
            console.log("===============vue test error===========");
            console.log(error);
          })
          // 将用户信息报存在vuex中
          // this.$store.dispatch("user/login", this.loginForm).then(() => {
          //   // 信息成功存储在vuex后跳转页面
          //   this.$router.push("/home");
          //   this.loading = false;
          // });
        //this.$router.push("/home");
        //localStorage.setItem('ms_username', this.loginForm.username);
        } else {
          this.$message.error("登录异常");
          return false;
        }
      });
    }
  }
};
</script>

2.请求api的封装

import { vuetest } from '@/api/index'  --- 引用src/api/idex.js文件中的export的vuetest 请求。src/api/idex.js中有请求方式、请求参数等设置

vuetest().then(res => {  ----- res请求服务端接口返回的数据

src/api/idex.js文件代码

// api封装示例

// 导入配置好的axios文件
import Axios from "@/axios" 

// 封装axios请求函数，并用export导出
export function getItemList(datas) {
    return Axios({
    url: "/api/getItemList",
    method: "post",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded' //设置请求头请求格式form
    },
    data: datas
    })
}
export function getItem(datas) {
    return Axios({
    url: "/api/getItem",
    method: "post",
    headers: {
        'Content-Type': 'application/json' //设置请求头请求格式为json
    },
    data: datas
    })
}

export function getItemInfo(datas) {
    return Axios({
    url: "/api/getItemInfo"+datas,
        method: "get",
    })
}

export function vuetest(datas) {
    return Axios({
    url: "/vue/test",
    method: "post",
    headers: {
        'Content-Type': 'application/json' //设置请求头请求格式为json
    },
    data: datas
    })
}

说明：

调用最后一个函数，专注于请求参数的处理。

return Axios({ ----- 是ajax请求的处理，Axios是import Axios from "@/axios"中导出的对象

3.ajax请求的进一步封装，主要是对所有ajax请求的一些共同的参数的设定，如超时时间、根路径

src/axios中的index文件（这个index.js文件的名字应该是不能改变的，所有导入的路径没有确定到文件而是目录）

//引入 axios库
import axios from 'axios'
//引入 node中自带的qs模块（数据格式转换）
import qs from 'qs'

/* 2.全局默认配置 */
let baseURL
// 判断开发环境（一般用于本地代理）
// if (process.env.NODE_ENV === 'development') { // 开发环境
//     baseURL = 'http://localhost:8082/VoucherWebService'   // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
// } else {               // 编译环境
//     if (process.env.type === 'test') {    // 测试环境
//         baseURL = 'http://sw.apitest.com'
//     } else {                              // 正式环境
//         baseURL = 'http://sw.api.com'
//     }
// }

// 配置axios的属性
axios.defaults.timeout = 6000;    // 请求超时时间1分钟
//axios.defaults.baseURL = baseURL; // 你的接口地址
axios.defaults.responseType = "json";
axios.defaults.withCredentials = false;  //是否允许带cookie这些

/*你也可以创建一个实例，然后在实例中配置相关属性，此方法和上面的方法一样，写法不同，怎么用随个人
*喜好，我比较喜欢用这种方法，如下：
*/
const Axios = axios.create({
    baseURL:baseURL ,               // 后台服务地址
    timeout: 60000,               // 请求超时时间1分钟
    responseType: "json",
    withCredentials: false    // 是否允许带cookie这些
});

/* 3.设置拦截器 */
/*如果不是用创建实例的方式配置，那么下面的Axios都要换成axios,也就是文件开头你用import引入axios
时定义的变量*/
Axios.interceptors.request.use((config) => {
    // 发送请求前进行拦截
    // 可在此处配置请求头信息
    // config.headers["appkey"] ="...";
  // config.headers["token"] ="...";
  console.log("======interceptors=====");
  console.log(config);
     if (config.method == "post") {
  /*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果
设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转
换，会使得参数丢失，造成请求失败。*/
         config.data = qs.stringify(config.data)
     }
    return config;
  },(error) =>{
    //console.log("错误的传参", 'fail');
    return Promise.reject(error)
  })

// Axios.interceptors.response.use((res) =>{
//    // 请求响应后拦截
//    if(res.status == 200){                       // 对响应数据做些事
//        //alert("提交成功")
//        return Promise.resolve(res)
//     }
//     return res;
//  }, (error) => {
//    //alert("网络异常!") 404等问题可以在这里处理
//    return Promise.reject(error)
//  })
export default Axios 

---

如果浏览器报这个错：: No 'Access-Control-Allow-Origin' header

这是个跨域问题：client/server同一个ip不同端口或者相同的端口不同的ip或者ip、端口都不同（个人理解）

vue-cli2解决方法（3.x网上也有），在

config/index.js文件中的proxyTable添加如下配置：

  proxyTable: {
      '/': {
            target: 'http://localhost:8082/myproject', //你要访问的服务器域名
            changeOrigin: true, //允许跨域
            pathRewrite: {
                '^/': ''
            }
        }

    },

axios中的baseURL 不能配置否则就不用这个代理的配置了。