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,一经查实,立即删除!

相关文章

进一步的去了解正则[一]

1 正则是什么. 请先看 http://www.phpchina.com/html/11/n-34811.html 几k 的解释后. 原地址已被更改&#xff0c;重新找了一个教程&#xff0c;请点击。 http://deerchao.net/tutorials/regex/regex.htm2 实例剖析.1. $str <FORM NAME"ADFA" ACTION"AS…

LeetCode 123. 买卖股票的最佳时机 III(动态规划)

1. 题目 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意: 你不能同时参与多笔交易&#xff08;你必须在再次购买前出售掉之前的股票&#xff09;。 示例 1: 输入: […

mysql异步复制参数_MySQL Replication(异步复制)基本原理

1、复制进程Mysql的复制(replication)是一个异步的复制&#xff0c;从一个Mysqlinstace(称之为Master)复制到另一个Mysqlinstance(称之Slave)。实现整个复制操作主要由三个进程完成的&#xff0c;其中两个进程在Slave(Sql进程和IO进程)&#xff0c;另外一个进程在Master(IO进程…

SQL Server 2005之PIVOT/UNPIVOT行列转换(转)

SQL Server2005引入了很多迎合开发者口味的新特性&#xff0c;虽然改动不大&#xff0c;却大大了减少了开发者的工作量&#xff0c;这种替用户考虑的开发思路&#xff0c;值得称赞。 在SQL Server2000中&#xff0c;要实现行列转换&#xff0c;需要综合利用聚合函数和动态SQL&a…

LeetCode 188. 买卖股票的最佳时机 IV(动态规划)

1. 题目 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 k 笔交易。 注意: 你不能同时参与多笔交易&#xff08;你必须在再次购买前出售掉之前的股票&#xff09;。 示例 1: 输入: [2…

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已退栈, 寄存…

LeetCode 309. 最佳买卖股票时机含冷冻期(动态规划)

1. 题目 给定一个整数数组&#xff0c;其中第 i 个元素代表了第 i 天的股票价格 。​ 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#xff09;: 你不能同时参与多笔交易&#xff08;你必须在再…

mysql new map_使用构造器模式动态构建Map作为mybatis的查询条件

Map filter mapper.convertValue(this,Map.class);System.out.printf("查询条件:%s\n", JSON.toJSONString(filter));returnfilter;}//https://stackoverflow.com/questions/6796187/java-introspection-object-to-map/57057596#57057596public MaptoFilter2(){Map …

处理Excel,填充空白区域

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

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

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

今天动手熟悉了一下css和php

手又痒了&#xff0c;动了动css和php&#xff0c;复习了已经忘了很久的csshttp://www.the520.cn/files/cssstudy/转载于:https://www.cnblogs.com/x2048/articles/1793996.html

Python核心教程(第二版)读书笔记(三)

第三章Python基础 2010-04-09 换行 一行过长的语句可以使用反斜杠‘\’分解成几行。有两种例外情况一个语句不使用反斜线也可以跨行。 1、在使用闭合操作符时&#xff0c;单一语句可以跨多行。例如&#xff1a;在含有小括号、中括号、花括号时可以多行书写。 2、三引号包括下的…

mysql没有写入权限_MySQL的权限系统

一、MySQL权限系统一)MySQL权限系统介绍权限系统的作用&#xff1a;授予来自某个主机的某个用户可以查询、插入、修改、删除等数据库操作的权限不能明确指定拒绝某个用户的连接权限控制(授权与回收)的执行语句包括create user&#xff0c;grant&#xff0c;revoke授权后的权限都…

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

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

AJAX 弹出窗消息类

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.IO;using System.Text;using System.Web.UI;namespace WebApplication{ /// <summary> /// 消息类 /// /// /// </summary> public class Me…

mysql 创建初始化帐号_MySQL创建SCOTT用户及初始化数据

表结构create table dept(-- 部门编号deptno int unsigned auto_increment primary key,-- 部门名称dname varchar(15) ,-- 部门所在位置loc varchar(50))engine InnoDB;create table emp(-- 雇员编号empno int unsigned auto_increment primary key,-- 雇员姓名ename varchar…

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

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

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

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

CURL详解[全]

PHP中的CURL函数库&#xff08;Client URL Library Function&#xff09;curl_close — 关闭一个curl会话curl_copy_handle — 拷贝一个curl连接资源的所有内容和参数curl_errno — 返回一个包含当前会话错误信息的数字编号curl_error — 返回一个包含当前会话错误信息的字符串…