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.js
import 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
老师讲的内容比较符合我的项目,但是比较细的内容没有涉及(也许因为太基础了)
mock axios vue的数据传递关系的更多相关文章
- vue中使用axios(异步请求)和mock.js 模拟虚假数据
一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...
- vue-cli+mock.js+axios模拟前后台数据交互
最近工作不是很忙,自己做了一个vue的移动端的小项目,涉及到后台数据的时候,网上查阅了一些资料,因为是自己写的项目没有后台只能自己模拟数据,刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些, ...
- 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- vue项目中使用mockjs+axios模拟后台数据返回
自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来 先看下项目的目 ...
- Vue小项目二手书商城:(二)axios前后端数据交互
实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...
- vue使用axios请求后端数据
1. 安装axios $ npm install axios 2.在main.js里面导入axios import axios from 'axios' Vue.prototype.$http = a ...
- vue脚手架用axios请求本地数据
首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...
- 使用URLSearchParams处理axios发送的数据
使用URLSearchParams处理axios发送的数据 在使用axios这个ajax插件的时候,我们有些时候会遇到一些问题,比如:数据格式不正确 以最简单的例子为基础(这里使用post方法): 在 ...
- 详解vue的数据binding原理
自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...
随机推荐
- 4、架构--NFS实践、搭建web服务、文件共享
笔记 1.晨考 1.数据备份的方式有哪些 全量和增量 2.数据备份的命令有哪些,都有哪些优点缺点 cp : 本地,全量复制 scp :远程,全量复制 rsync :远程,增量复制 3.rsync的参数 ...
- tomcat的基本使用及项目部署
tomcat介绍 我们在学习Javaweb的时候,最普遍使用的服务器j就是阿帕奇的tomcat,主要是用来处理jsp和servlet的请求以及响应 tomcat的启动和关闭 在我们安装完tomcat后 ...
- MXNet源码分析 | KVStore进程间通信
本文主要基于MXNet1.6.0版本进行分析. 在上一篇文章中,我们分析了MXNet中KVStore的进程内通信机制.在这篇文章中,我们主要分析KVStore如何进行多节点分布式通信. 在KVStor ...
- [Golang]一些书城项目中出现错误的原因和解决办法(一)
跟着B站尚硅谷的GoWeb教程写书城项目,整理一下自己写的时候出现的错误和解决办法. 错误一:cartItem中只能加入一种书,SQL语句没有问题,但是购物车中的总金额和总数量正确: 原因:cartI ...
- hacker模拟环境
https://geekprank.com/hacker/
- Sqlmap数据库注入攻击
实验目的 利用sqlmap命令破解出access数据中的admin的密码bfpns 实验原理 SQLMap是一个先进的自动化SQL注入工具,其主要功能是扫描.发现并利用给定的URL的SQL注入漏洞.目 ...
- 【C# Task】开篇
概览 在学task类之前必须学习线程的知识. 以下是task命名空间的类的结构图 1.2种任务类型: 有返回值task<TResult> .无返回值task. 2.2座任务工厂 TaskF ...
- linux /etc/fstab 文件详细说明(整理版)
转至:https://blog.csdn.net/xiaolongwang2010/article/details/8657332?utm_medium=distribute.pc_relevant. ...
- Java课程设计---修改学生基本信息
1.修改窗体 2.在StudentDao中增加修改学生信息的方法 /** * 修改的方法 * * @param student * @return * @throws SQLException */ ...
- strtok:This function or variable may be unsafe.
https://jingyan.baidu.com/article/49711c616b8a1ffa441b7cdc.html