mock axios vue的数据传递关系

最近有一个项目要快速出一个前端demo，选择了vue-element框架（虽然其实很想用react，但是为了求快）

本人的基础只有初级的html/css/js知识，和python后端的一些简单工作，和萌新没什么区别。

本文记录了一些开发过程中的体会。

mock axios vue的数据传递关系

vue的模板和数据绑定

// vue的 <template></template> 需要数据渲染
// 数据来自 vue的
<script>
export default {
data() {
return {
xxData:[] //数据来自这个data，可以直接写，但一般是取后端的数据来填充
}
}
}
</script>


在没有后端数据的情况下，先用Mock来模拟后端数据

my_get_data()里的res结构，和[后面的自定义函数](# 以下是getStatisticalData函数，根据需求可以完全自定义)对应

// 数据来自 vue的
<script>
// 自定义的一个get_data函数，用来绑定到vue的钩子函数
import {my_get_data} from 'xxx.js'export default {
data() {
return {
xxData:[] //数据来自这个data，可以直接写，但一般是取后端的数据来填充
}
}
}
mounted() { // vue的钩子函数，模板渲染好之后，挂在到某个DOM对象后调用。 和它类似的钩子函数还有 created()
my_get_data().then(res =>? {
// 获取返回的数据（详见）
const {code, data} = res.data
if （code
})
}
</script>


获取渲染需要的数据

vue代码中，自定义的get_data函数，一般来自 axios对某个URL地址的请求进行监听捕获

首先对axios进行二次封装，得到一个能快速得到axios request实例的类

(HttpRequest(baseUrl).request()可以得到添加好拦截器，配置好url地址的axios实例)

//该文件为 my_axios.jsimport axios from 'axios' // 标准axios
import config from '../config' //自定义的config文件，用来配置URL地址// 对axios 进行二次封装， 将配置文件与axios进行结合。可以通过配置文件的改变来修改axios请求地址// 根据配置文件config.js 来获取baseUrl
const baseUrl = process.env.Node_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro// 用于配置axios的url地址，并自动增加拦截器
class HttpRequest {
// 初始化时，读取config文件中的baseurl
constructor(baseUrl) {
this.baseUrl = baseUrl
} // 获取已保存的baseurl(来自config文件)
getInsideConfig() {
const config = {
baseUrl: this.baseUrl,
header: {}
}
return config
} // 拦截器, 传入axios的实例（axios官方示例代码）
interceptor(instance) {
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
} // 封装请求
request(options) {
// 创建axios的实例
const instance = axios.create()
// 通过getInsideConfig()，获取已保存的config中的url
options = {
...this.getInsideConfig(),
...options
}
// 为axios实例添加请求和响应拦截器
this.interceptor(instance)
// 得到添加好拦截器，配置好url地址的axios实例
return instance(options)
}
}// HttpRequest(baseUrl).request()可以得到添加好拦截器，配置好url地址的axios实例
export default new HttpRequest(baseUrl)


以下是my_get_data的实现，是一个配置了具体url的axios实例。

这样，my_get_data()就能捕获来自url=/home/getData的请求结果了

import my_axios from './my_axios.js'export const my_get_data = () => {
return my_axios.request({
url: '/home/getData' // axios对这个URL地址进行监听捕获
})
}


通过Mock模拟后端数据，作为 请求的结果，以/home/getData为例

可以通过Mock模拟，也可以直接利用后端数据，提供/home/getData 这个请求地址的结果

通过Mock模拟

import Mock from 'mockjs'
import homeApi from './mockServerData/home'// 新建一个mock，用于拦截/home/getData的请求
// 一旦有请求到这个地址，会返回getStatisticalData这个函数的内容
Mock.mock('/home/getData', homeApi.getStatisticalData)


以下是getStatisticalData函数，根据需求可以完全自定义

export default {
getStatisticalData: () => {
return {
code: 20000, //模拟的状态码
data:{
data1: [0, 1, 2],
data2: []
}
}
}
}


直接获取后端数据**

略

附：

学习视频(包括代码框架)来自 https://www.bilibili.com/video/BV1QU4y1E7qo?p=22

老师讲的内容比较符合我的项目，但是比较细的内容没有涉及（也许因为太基础了）