vue-cli与服务端交互

实现前端UI与服务端交互，大致流程如下：

1. UI调用统一管理的api请求；
2. 使用封装的request.js发送请求；
3. 获取服务端返回数据；
4. 更新数据;

先从第一步开始，统一的api请求都放到/src/api文件夹中，按照模块拆分文件，如下：

src/
  api/
    login.js
    article.js
    index.js
    ...

列如 login.js的api代码

import request from '@/utils/request' //封装好的发送请求

export function login(username, password, code, uuid) {
  return request({
    url: 'auth/login',
    method: 'post',
    data: {
      username,
      password,
      code,
      uuid
    }
  })
}

export function getInfo() {
  return request({
    url: 'auth/info',
    method: 'get'
  })
}

export function getCodeImg() {
  return request({
    url: 'auth/captcha',
    method: 'get'
  })
}

export function logout() {
  return request({
    url: 'auth/logout',
    method: 'delete'
  })
}

request.js

request.js基于axios的封装,方便统一管理GET、POST等请求参数，请求头，以及错误提示信息等。它可以封装全局request拦截器，response拦截器,统一的错误处理,统一超时处理,baseURL设置等。代码如下：

import axios from 'axios'
import Config from '@/config'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url，会根据启动方式获取不同url
  timeout: Config.timeout // 请求超时时间
})

export default service

//TODO 拦截器、错误提示

注意：api的baseURL需要到vue项目config配置文件(不是src/config)中添加

开发者模式：npm run dev，修改dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  //添加后台api根地址,测试环境
  //npm run dev
  BASE_API: '"http://localhost:9000"' //新添加的
})

生产模式(上线)：npm run build，修改prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  //新添加的，正式发布才配置
  //npm run build
  BASE_API: '"正式环境api根地址"' //新添加的
}

不通过配置，最简单方式，直接覆盖，如下：

export function getCodeImg() {
  return request({
    url: 'auth/captcha',
    method: 'get',
    baseURL: 'http://localhost:9000' //直接通过覆盖的方式
  })
}