vue全家桶+Echarts+百度地图，搭建数据可视化系统（【续】接口篇）

接上篇

vue全家桶+Echarts+百度地图，搭建数据可视化系统

1 前 言

1.1 业务场景

实现数据监控的系统。有线图、柱状图、地图，并具有定时刷新的功能。

1.2 业务分析

上一篇分析的步骤大致有：

1. 系统搭建vue-cli
2. vuex记录登录信息
3. vue-router路由跳转
4. 3个维度的页面，提取出共用的组件
5. 各个组件开发
6. 调节样式，增加UI
7. 加入后台接口数据
8. 优化显示
9. 测试
10. 上线

上一篇介绍了 1-6 部分。本篇将介绍一下剩下的 7-10 部分。

??

主要内容是 对数据的处理方式 和 整体的数据逻辑 。

望各位看官多提 建议和不足 哈，也希望能本篇能给需要人带来 启发。

成品效果图不方便发，还是用上一篇，纯前端的效果图吧。

2 正 文

2.1 请求处理数据

Vue 中 与后台交互通常使用的是 axios

2.1.1 安 装

npm i axios

也可通过cdn引用

2.1.2 定 义

新建一个api.js

//  api.js
import axios from 'axios'
const http = axios.create ({
    baseURL : apiurl,       // 连接后端地址
    timeout : 1000 * 30,    // 超时时间，单位为毫秒
    headers ： {},          // 请求头，可添加'Authorization'、'X-Requested-With'、'Accept-Language'、'token'等
})

// 请求拦截
http.interceptors.request.use(config =>{
    // 可添加自己的设置，如修改参数、增加参数、修改headers
    return config
},error =>{
    // 可添加报错处理
    return Promise.reject(error)
})

// 响应拦截
http.interceptors.response.use(response =>{
    // 可添加处理逻辑
    return response
},error =>{
    return Promise.reject(error)
})

export default http

同时可在main.js中添加一个自定义全局对象，或者可在单独页面中引用

// main.js
import http from './api.js'

Vue.prototype.$http = http

2.1.3 使 用

a. get请求

在页面中处理时

query(){
    this.$http.get('/xxx/xxx?id='+id).then(res =>{
        // 返回的处理
        console.log(res)
        // res 一般包含code data
    },rej =>{
        // 报错的处理
        console.log(rej)
    })
}

b. post请求<