mock模拟接口测试 vue_vue+mock.js实现前后端分离

之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离。

安装:

npm install mockjs

这里先写个小案例介绍一下具体使用,写法不规范,仅供参考。

然后案例讲完后我们讲具体的规范使用

那么一起来看看这个案例吧:

import Mock from "mockjs"

export default {

name: "FunctionsDbSource",

methods:{

// 接口测试

init(){

// 请求后端数据,查询数据源

this.axios({

method: "get",

url:`${this.baseURL}/GetAll`,

headers: {

Account: "Admin",

Password:"888888"

}

})

.then((response)=> {

console.log(response);

})

.catch((error)=> {

console.log(error);

});

}

},

created(){

Mock.mock(`${this.baseURL}/GetAll`, {

'users|5': [ {

'name': '@cname', //中文名称

'age|1-100': 100, //100以内随机整数

'birthday': '@date("yyyy-MM-dd")', //日期

'city': '@city(true)' //中国城市

}]

});

this.init();

}

}

首先引入了mock.js,然后定义了一个方法,用axios请求后台数据,在创建后调用此方法,然后我在创建后使用mock.js拦截请求,模拟数据(这里我模拟的是一个5位长度的users数组),只要mock的url地址和请求的地址相同,就会自动拦截请求。

我们打印了一下请求的结果response:

7dd997b6976094ef76f862e3cd6ae2b9.png

大家可以看到,和后端返回的数据格式一致,只是里面内容是我们自己模拟的,所以,只要提前和后端商量好数据格式,我们自己进行模拟数据,完成界面得渲染,等到后端写好数据接口,到时候只要把mock部分删除,就是我们自己想要的结果了。

但是每个请求都这样在vue页面中去写mock,后期删除起来也不方便,可维护性低,高耦合,所以我们这里就涉及到规范的写法。

1、安装:

npm install mockjs

2、手动新建mock.js文件(当然新建文件夹把它抽离出来也是可以的)

内容如下(根据实际需求更改):

import Mock from 'mockjs' // 引入mockjs

let data = 'users|5': [ {

'name': '@cname', //中文名称

'age|1-100': 100, //100以内随机整数

'birthday': '@date("yyyy-MM-dd")', //日期

'city': '@city(true)' //中国城市

}]

Mock.mock('/data/index', 'get', data) // 根据数据模板生成模拟数据

3、main.js中引入(注意自己js文件的路径)

// 引入mock

require('./mock.js');

4、页面中使用:

import Mock from "mockjs"

export default {

name: "FunctionsDbSource",

methods:{

// 接口测试

init(){

// 请求后端数据,查询数据源

this.axios({

method: "get",

url:"data/index",

})

.then((response)=> {

console.log(response);

})

.catch((error)=> {

console.log(error);

});

}

},

created(){

this.init();

}

}

以此我们就完成了抽离mock.js,之后只要往mock的js文件中添加请求即可,后续只要等后端接口写好,把main.js中的引入mock.js注释(删除)即可。

还有一种更直接的方法,因为mock只是我们生产环境需要的东西,当我们发布上线肯定不需要这部分请求,都会换成实际请求地址和数据,所以直接把mock.js配置到生产环境,上线部署打包不打包这部分即可,就和vue中的代理部分,上线是不会打包这部分的一样。

感兴趣的童鞋可以自己去研究研究哈。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-07-22

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/476020.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql slow log 分析工具_mysql slow log分析工具的比较

mysql 中的 slow log 是用来记录执行时间较长(超过 long_query_time 秒)的 sql 的一种日志工具。启用 slow log在 my.cnf 中设置[mysqld]slow_query_logonslow_query_log_filemysql-slow重启 MySQL 服务。五款常用工具mysqldumpslowmysqlslamyprofimysql-explain-slow-logmysql…

利用寄存器进入栈值交换

代码 varA, B: Word;beginA :1; B :2; asmmov ax, a //赋值 mov bx, b push ax //进栈 push bx pop ax //退栈 pop bx mov a, ax //利用栈先进后出, ax已退栈, 寄存器里的值为原bx 的值 mov b, bx //利用栈先进后出, bx已退栈, 寄存…

处理Excel,填充空白区域

在企业应用开发中经常是业务人员提供Excel的数据源,而开发人员将Excel数据导入到数据库中,然后在数据库中进行处理。在Excel中为了表示一种层次和所属关系,很多时候会产生很多空白的单元格。比如一个CRM数据,里面有销售团队、销售…

LeetCode 901. 股票价格跨度(单调栈)

1. 题目 编写一个 StockSpanner 类,它收集某些股票的每日报价,并返回该股票当日价格的跨度。 今天股票价格的跨度被定义为股票价格小于或等于今天价格的最大连续日数(从今天开始往回数,包括今天)。 例如&#xff0c…

LeetCode 1300. 转变数组后最接近目标值的数组和(二分查找)

1. 题目 给你一个整数数组 arr 和一个目标值 target ,请你返回一个整数 value , 使得将数组中所有大于 value 的值变成 value 后,数组的和 最接近 target (最接近表示两者之差的绝对值最小)。 如果有多种使得和最接近…

潜在语义分析(Latent Semantic Analysis,LSA)

文章目录1. 单词向量空间、话题向量空间1.1 单词向量空间1.2 话题向量空间2. 潜在语义分析算法2.1 例子3. 非负矩阵分解算法4. TruncatedSVD 潜在语义分析实践一种无监督学习方法,主要用于文本的话题分析其特点是通过矩阵分解发现文本与单词之间的基于话题的语义关系…

python分割提取字符串_Python 字符串操作(截取/替换/查找/分割)

python字符串连接先介绍下效率比较低的,有些新手朋友就会犯这个错误:a [a,b,c,d]content for i in a:content content iprint content说下为什么效率会低呢?原因:在循环连接字符串的时候,他每次连接一次&#xff0…

R语言chorolayer_R语言空间可视化:绘制英国脱欧投票地图

添加法国,它位于右下方,因此我们应该看到一点…plot(FR,addTRUE)然后,我们可以检索英国退欧公投数据referendumddply(referendum,.(Region,HASC_code),summarise,Remainsum(Remain),Leavesum(Leave))我们可以发现,脱欧赢得了51.89…

概率潜在语义分析(Probabilistic Latent Semantic Analysis,PLSA)

文章目录1. 概率潜在语义分析模型1.1 基本想法1.2 生成模型1.3 共现模型1.4 模型性质2. 概率潜在语义分析的算法概率潜在语义分析(probabilistic latent semantic analysis,PLSA),也称概率潜在语义索引(probabilistic …

马尔可夫链蒙特卡罗法(Markov Chain Monte Carlo,MCMC)

文章目录1. 蒙特卡罗法2. 马尔可夫链3. 马尔可夫链蒙特卡罗法4. Metropolis-Hastings 算法5. 吉布斯抽样蒙特卡罗法(Monte Carlo method),也称为统计模拟方法(statistical simulation method),是通过从概率…

蒙特卡罗法近似求解圆周率π

文章目录1. 原理2. 模拟代码1. 原理 给出 x∈[0,1),y∈[0,1)x \in [0,1),y\in[0,1)x∈[0,1),y∈[0,1) 的均匀分布随机点,模拟 ttt 次,落在以 (0,0)(0,0)(0,0) 为圆心,半径 r1r1r1 的圆以内的次数为 ccc当模拟次数足够大时,可以看成…

算法导论2.3-7

Q: 请给出一个运行时间为θ(nlgn)的算法&#xff0c;使之能在一个由n个整数构成的集合S和另一个整数X时&#xff0c;判断出S中是否存在有两个其和等于X的元素。A: 先对S[1 TO N]进行合并排序--------------------------------θ(nlgn) FOR a <- [1 TO N-1]-----------------…

LeetCode 1318. 或运算的最小翻转次数(位运算)

1. 题目 给你三个正整数 a、b 和 c。 你可以对 a 和 b 的二进制表示进行位翻转操作&#xff0c;返回能够使按位或运算 a OR b c 成立的最小翻转次数。 「位翻转操作」是指将一个数的二进制表示任何单个位上的 1 变成 0 或者 0 变成 1 。 示例 1&#xff1a; 输入&#x…

LeetCode 91. 解码方法(动态规划)

1. 题目 一条包含字母 A-Z 的消息通过以下方式进行了编码&#xff1a; A -> 1 B -> 2 ... Z -> 26给定一个只包含数字的非空字符串&#xff0c;请计算解码方法的总数。 示例 1: 输入: "12" 输出: 2 解释: 它可以解码为 "AB"&#xff08;1 2&am…

LeetCode 1238. 循环码排列(格雷编码+旋转数组)

1. 题目 给你两个整数 n 和 start。你的任务是返回任意 (0,1,2,,...,2^n-1) 的排列 p&#xff0c;并且满足&#xff1a; p[0] start p[i] 和 p[i1] 的二进制表示形式只有一位不同 p[0] 和 p[2^n -1] 的二进制表示形式也只有一位不同示例 1&#xff1a; 输入&#xff1a;n 2…

LeetCode 第 25 场双周赛(718/1832,前39.2%)

文章目录1. 比赛结果2. 题目1. LeetCode 5384. 拥有最多糖果的孩子 easy2. LeetCode 5385. 改变一个整数能得到的最大差值 medium3. LeetCode 5386. 检查一个字符串是否可以打破另一个字符串 medium4. LeetCode 5387. 每个人戴不同帽子的方案数 hard1. 比赛结果 做出来了 1、2…

target java_java元注解 @Target注解用法

Target&#xff1a;Target说明了Annotation所修饰的对象范围&#xff1a;Annotation可被用于 packages、types(类、接口、枚举、Annotation类型)、类型成员(方法、构造方法、成员变量、枚举值)、方法参数和本地变量(如循环变量、catch参数)。在Annotation类型的声明中使用了tar…

LeetCode 第 187 场周赛(1336/3107,前43.0%)

文章目录1. 比赛结果2. 题目1. LeetCode 5400. 旅行终点站 easy2. LeetCode 5401. 是否所有 1 都至少相隔 k 个元素 medium3. LeetCode 5402. 绝对差不超过限制的最长连续子数组 medium4. LeetCode 5403. 有序矩阵中的第 k 个最小数组和 hard1. 比赛结果 15分钟做出来了 1、2 …

场景编辑器竣工!

今天接着做XML解析&#xff0c;对那个遍历的结构作了些修改&#xff0c;插入了几个函数。 终于&#xff0c;新的场景编辑器竣工了&#xff01; 一个比较复杂的场景了&#xff0c;用3dsMax制作材质&#xff0c;安排物件位置和所用材质 导出到DirectX中&#xff0c;效果感觉比Max…

将MathType公式转换为Blog可用的LaTeX公式(MD编辑器)

会LaTex语法的同学敲起来还是会快一些的。 符号参考&#xff1a; LaTeX 各种命令&#xff0c;符号Latex所有常用数学符号整理 不会的同学&#xff0c;可以按照以下方式操作&#xff1a; 在MathType内先敲好公式 可以手敲&#xff0c;也可以手写&#xff08;手写调用windows的…