实现前端UI与服务端交互，大致流程如下：
- UI调用统一管理的api请求；
- 使用封装的request.js发送请求；
- 获取服务端返回数据；
- 更新数据;
先从第一步开始，统一的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' //直接通过覆盖的方式
})
}
