js使用MOCK来进行测试

最新推荐文章于 2024-05-01 01:21:56 发布
最新推荐文章于 2024-05-01 01:21:56 发布
阅读量299 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47801382/article/details/122971792
版权

mock.js:

mock.js我是分开写的，把mock的加载的js写在HTML中，mock还有很多的方法：

https://github.com/nuysoft/Mock/wikiicon-default.png?t=M1FBhttps://github.com/nuysoft/Mock/wiki

Mock.mock('/user/userinfoOne','get',{
		id:"@id()",
		username:"@cname()",
		date:"@date()",
		ip:"@ip()",
		email:"@email"
	})

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加数据</title>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
	</head>
	<body>
		<div>
			<table id="stutab" border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>日期</th>
					<th>IP</th>
					<th>邮箱</th>
				</tr>
			</table>
		</div>
	</body>
	<script src="mock/indexs.js" type="text/javascript" charset="utf-8"></script>
</html>

js:

$(function() {
		getstudata()
	})
	
	function getstudata() {
		console.log(1111);
		$.ajax({
			type: "get",
			url: "/user/findAllUser",
			dataType: "json",
			success: function(data) {
				console.log(data);
				showdata(data)
			}
		})
	}
	
	function showdata(data) {
		console.log(data + ".....");
		for (var i = 0; i < data.length; i++) {
			var tr = $("<tr></tr>");
			tr.html("<td>" + data[i].id + "</td><td>" + data[i].username + "</td><td>" + data[i].date + "</td><td>" +
				data[i].ip + "</td><td>" + data[i].email + "</td>")
			$("#stutab").append(tr)
		}
	}

图片：

 

疑似忘川落九天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node.js测试中的Mock文件系统详解
12-23
Mock文件系统相关的工具包括：  Mock fs 模块的工具mock-fs 。  Mock require 模块的工具mock-require 。 安装 mock-fs和 mock-require 都是NPM软件包，在项目中可通过npm直接安装： npm install mock-fs mock-...
使用mock.js快速搭建一个模拟接口
qq_40999228的博客
03-11 2433
本系列主要是记录我在做前端项目学习到的一些常用组件或功能，方便后面复习时用；同时也是想把我学习到的内容做一个总结，或许能帮到有需要的人，或许能有大佬指出我的错误，让我能能及时更正学习；希望与大家一起共勉！本文并非零基础入门，需要学习例如promise、axios、vue-cli等基础知识以上就是今天要讲的内容，本文介绍了mock.js的使用，算是一个比较基础的使用，目的就是能快速入手模拟接口进行项目开发，更详细的random随机生成数据等之后有时间研究研究再说吧。
Mock.js模拟数据
zu123sh的博客
09-08 230
mock.js模拟数据
Mock.js快速入门
最新发布
okay_ing的博客
05-01 578
mockjs是一门快速生成项目化模拟数据，它不需要修改代码就能拦截Ajax请求，模拟后端API真实发送数据，让前端独立于后端开发
使用Mock.js
weixin_66716478的博客
05-06 189
打开官网http://mockjs.com/，映入眼帘的就是“生成随机数据，拦截 Ajax 请求”。Mock.js就是一款方便进行前后端分离开发的工具，能够拦截Ajax请求，并返回模拟数据，保证前端工程师们的开发不依赖于后端开发进度。具有：前后端分离、开发无侵入、数据类型丰富、用法简单、方便拓展的特点。 1.示例 在这里我使用vue-cli脚手架的spa项目做栗子： 首先下载mockjs E:\VueProject\medpro>npm i mockjs -D npm i ...
解决 mockjs引入报错
weixin_52954097的博客
02-13 799
解决mockjs引入 部分报错
mockjs——mockjs定义、mockjs安装、mockjs使用、mockjs方法、mockjs语法、代码示例
热门推荐
TKY666的博客
08-07 2万+
拦截ajax请求，生成伪数据应用场景:在工作中,后端已经出接口文档,还没有实现代码由前端依照接口文档模拟伪数据,实现前端开发功能。
---Mock---基本使用
weixin_44195250的博客
08-02 888
一、mock解决的问题 开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集 二、mock优点 1、前后端分离 　　让前端工程师独立于后端进行开发。 2、增加单元测试的真实...
SPA项目开发之首页导航+左侧菜单
CJQYQX的博客
09-28 237
mock.js模拟响应ajax请求 1. Mock.js使用步骤 1.1.安装mockjs依赖 npm install mockjs -D #只在开发环境使用 查看是否成功： 1.2 引入 为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置 (1)dev.env module.exports = merge(prodEn...
【JavaScript源代码】使用Mock.js生成前端测试数据.docx
12-29
使用Mock.js生成前端测试数据 　Mock.js是一个模拟数据生成器，可以让前端独立于后端进行开发。如果你正在开发一个前端页面，可是后台还没有完成供你调用的Api，并且数据格式已经确定，那么你就可以使用Mock.js模拟...
egg-mock:模拟鸡蛋测试库
05-01
使用mm.app启动模拟服务器 // test/index.test.js const path = require ( 'path' ) ; const mm = require ( 'egg-mock' ) ; describe ( 'some test' , ( ) => { let app ; before ( ( ) => { app = mm . app ( {...
junit单元测试及Mock应用，超详细的PPT实战应用
04-17
并有详细的代码示例、异常测试的概念的测试代码、 超时测试的概念及测试代码、忽略测试的概念及测试代码、Mock学习及前后端代码调试、Mockito基本使用方法简介、MockMVC基于RESTful风格的测试、Mock.js基本简介、...
快速入门jest单元测试、mock测试、dom测试、快照测试
三月和九月的博客
09-22 3206
本文作为jest新手入门教程，从项目的搭建，jest简单的测试用例的编写出发，介绍了jest相关的mock测试、dom测试、快照测试，旨在通过快速入门小案例让大家快速的了解jest并快速上手。
js中的mock操作
poleanNa的博客
12-17 817
通常情况下，在软件开发过程中会采取前后端分离的架构。这样做非常好的一点是，无论是前端开发人员，还是后端开发人员，他们都可以更加聚焦自己所处的领域，在自己的那片小天地里深耕，精心打磨自己的工艺。所谓“闻道有先后，术业有专攻”大抵讲的就是这样一则道理吧。但事物总是有两面性的，有好的一面，也必然会存在不好的一面。前后端分离的架构在这一点上也没有表现出一丝的特殊性。那前后端分离的架构的弊端在哪里呢？在软件开发中，往往边界的地方是最容易出问题的。而前后端分离的架构问题也多出现在前后端的交互上，本来各自...
如何使用mock.js实现接口测试的自动化？
MXB_1220的博客
06-26 173
Mock.js是一个常用于生成随机数据和拦截Ajax请求的JavaScript库。本文将介绍Mock.js的用法，包括安装和基础用法，在开始前我们可以看下看：了解 Mock.js 的语法规范。本文介绍了Mock.js的基础用法，包括随机生成用户信息、随机生成用户信息数组、Mock.js API的常用方法、生成数据模板和模拟接口请求。Mock.js是一个非常实用的数据模拟和接口测试工具，能够大大提高前端开发效率。想进阶成为一位 Mock 高手？
Mock.js测试接口使用方法
xyx107的博客
08-14 1306
mock.js是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 思考: 提个简单的开发需求: 请求后台某个接口,返回10-15条学生数据: 要求包含 姓名,年龄,性别. 成功状态码:200 .成功状态信息: success. `响应数据结构分析:` { status:200, msg:'success', stuInfo: { name:'abc', a.
MOCKJS 的使用
weixin_45249564的博客
08-05 84
创建api.js 文件 导入mock import Mock from 'mockjs'; //定义接口及 json Mock.mock('/api/user/login',{ "status": 0, "data": { "id |10001-11000": 0, "username": "@cname", "email": "@email", "phone": /^(13[0-9]|14[01456879]|15[.
mock.js使用方法
dkh_321的博客
10-30 608
简介 生成随机数据，拦截 Ajax 请求 前后端分离 让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据，模拟各种场景。 开发无侵入 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 用法简单 符合直觉的接口。 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 方便扩展 ...
mock(模拟)-虚拟数据
m0_69502730的博客
08-31 1854
mock(模拟)-虚拟数据
如何使用Mock.js来mock动态生成数据
03-29
Mock.js可以动态生成各种类型的数据，包括数字、字符串、布尔值、数组、对象等等。以下是使用Mock.js来mock动态生成数据的步骤： 1. 安装Mock.js 可以通过npm安装Mock.js，命令如下： ``` npm install mockjs ``` 也可以在HTML文件中直接引用Mock.js的CDN链接： ``` <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script> ``` 2. 定义Mock数据模板 Mock.js的核心是数据模板，它是一个JavaScript对象，用来描述Mock数据的结构和类型。例如，以下是一个简单的Mock数据模板： ``` var data = { name: '@cname', // 随机生成中文名字 age: '@integer(18, 60)', // 随机生成18到60之间的整数 gender: '@boolean', // 随机生成布尔值 hobbies: ['@word', '@word', '@word'] // 随机生成三个英文单词组成的数组 }; ``` 3. 使用Mock数据模板生成Mock数据 使用Mock.js的`Mock.mock()`方法可以根据数据模板生成Mock数据，例如： ``` var mockData = Mock.mock(data); ``` `mockData`就是根据`data`模板生成的Mock数据。 4. 使用Mock数据 生成Mock数据后，可以将其用于测试、演示或其他目的。例如，将Mock数据渲染到页面中： ``` document.getElementById('name').innerHTML = mockData.name; document.getElementById('age').innerHTML = mockData.age; document.getElementById('gender').innerHTML = mockData.gender ? '男' : '女'; document.getElementById('hobbies').innerHTML = mockData.hobbies.join(', '); ``` 以上就是使用Mock.js来mock动态生成数据的基本步骤。Mock.js还支持更多高级功能，例如数据占位符、数据生成规则、拦截Ajax请求等等，可以根据需要进行学习和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值