2018-03-12 Vue搭建接口

在src下新建一个config文件夹，在config文件夹下新建LXHR.js文件
安装：
cnpm i qs -D
cnpm i axios -D
在LXHR.js文件下：

引入路由
import { router } from "@/router/index"
引入访问地址
import { baseUrl } from './env.js'

const axios = require('axios')
const qs = require('qs')
创建axios实例
const service = axios.create()
访问方式：post 或  get   通过duoduo 方法
export const duoduo = {
  POST(url, params, type) {
    判断是否为json。
    if(type === 'json') {
      如果是json，直接调用此方法
      return service.post(baseUrl + url, params)
    }else {
       如果不是json，则需要格式化json参数
      return service.post(baseUrl + url, qs.stringify(params))
    }
  },
  GET(url, parmas) {
    return service.get(baseUrl + url, parmas)
  }
}

在congif文件夹下新建env.js，并在LXHR.js里引入

let env = process.env.NODE_ENV
自动判断当前环境
let baseUrl = env === "production" ? "http://192.168.1.114:8080/lxtd-cca-apis" : "http://59.110.0.186/test"

export { baseUrl }

新建service文件夹。在service文件夹下新建index.js文件

index.js :

引入LXHR.js下的duoduo方法
import { duoduo } from "../config/LXHR.js"
通过post方式调用接口
export const Login = params => duoduo.POST('/auth/login', params)  

在vue文件中引入：

import { Login } from "@/service/index.js"

在方法中直接调用Login即可。

例如：

<script>
import { Login } from "@/service/index.js"
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    }
  },
  methods: {
    login() {
      Login({
          name: this.username,
          password: this.password
      }).then(res => {
          console.log(res.data)
      })
    },
  },
}
</script>