个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
34
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章使用Mock.js生成前端测试数据由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
Mock.js是一个模拟数据生成器，可以让前端独立于后端进行开发。如果你正在开发一个前端页面，可是后台还没有完成供你调用的Api，并且数据格式已经确定，那么你就可以使用Mock.js模拟相关的接口，生成假数据来查看页面效果。Mock.js的功能：生成随机数据，拦截 Ajax 请求.
参考文档：https://github.com/nuysoft/Mock/wiki/Getting-Started 。
语法规范：https://github.com/nuysoft/Mock/wiki/Syntax-Specification 。
|
1
|
npm
install
mockjs
|
|
1
2
3
4
5
6
7
8
9
|
//模拟后台
Mock.mock(
'http://api.com'
, {
"user|5-10"
: [{
'name'
:
'@cname'
,
//中文名称
'age|1-100'
: 100,
//100以内随机整数
'birthday'
:
'@date("yyyy-MM-dd")'
,
//日期
'city'
:
'@city(true)'
//中国城市
}]
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
//JQuery方式
$.ajax({
url:
'http://api.com'
,
dataType:
'json'
}).done(
function
(data, status, xhr) {
console.log(
JSON.stringify(data,
null
, 4)
)
});
//原生ajax方式
function
myajax(url) {
if
(window.XMLHttpRequest) {
ajax =
new
XMLHttpRequest();
}
else
if
(window.ActiveXObject) {
try
{
ajax =
new
ActiveXObject(
"Msxml2.XMLHTTP"
);
}
catch
(e) {
try
{
ajax =
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
catch
(e) {}
}
}
if
(!ajax) {
window.alert(
"不能创建XMLHttpRequest对象实例."
);
return
false
;
}
ajax.open(
"GET"
, url,
true
);
ajax.send(
null
);
ajax.onreadystatechange =
function
() {
if
(ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
}
}
}
myajax(
'http://api.com'
);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
{
"user"
: [
{
"name"
:
"锺丽"
,
"age"
: 17,
"birthday"
:
"1983-11-01"
,
"city"
:
"内蒙古自治区 赤峰市"
},
{
"name"
:
"陈艳"
,
"age"
: 25,
"birthday"
:
"1973-07-10"
,
"city"
:
"河南省 驻马店市"
},
{
"name"
:
"冯霞"
,
"age"
: 59,
"birthday"
:
"2010-10-28"
,
"city"
:
"澳门特别行政区 离岛"
},
{
"name"
:
"贾秀英"
,
"age"
: 63,
"birthday"
:
"1973-01-22"
,
"city"
:
"新疆维吾尔自治区 伊犁哈萨克自治州"
},
{
"name"
:
"周勇"
,
"age"
: 34,
"birthday"
:
"1985-05-21"
,
"city"
:
"湖南省 衡阳市"
}
]
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 使用 Mock
var
Mock = require(
'mockjs'
)
/**
*
* 数据模板
* 属性名|生成规则: 属性值
*/
var
data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10'
: [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1'
: 1,
'name'
:
'@FIRST'
}]
})
// 输出结果
console.log(JSON.stringify(data,
null
, 4))
|
运行结果 。
{ "list": [ { "id": 1, "name": "Larry" }, { "id": 2, "name": "Edward" }, { "id": 3, "name": "Jessica" }, { "id": 4, "name": "William" }, { "id": 5, "name": "Christopher" }, { "id": 6, "name": "Michael" }, { "id": 7, "name": "Susan" }, { "id": 8, "name": "Shirley" }, { "id": 9, "name": "Angela" }, { "id": 10, "name": "George" } ] } 。
到此这篇关于使用Mock.js生成前端测试数据的文章就介绍到这了,更多相关Mock.js生成测试数据内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://blog.csdn.net/mouday/article/details/110868730 。
最后此篇关于使用Mock.js生成前端测试数据的文章就讲到这里了,如果你想了解更多关于使用Mock.js生成前端测试数据的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
34
4
0
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务，尤其是 WebScriptEndpoint。 任何人都可以对此给出任何指导吗？ 谢谢 最佳答案 这是一篇关于
我正在编写一个将运行 Linux 命令的 C 程序，例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
所以我正在尝试处理文件上传，然后将该文件作为二进制文件存储到数据库中。在我存储它之后，我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库，因为我使用 Google 应用引
我正在尝试制作一个宏，将下面的公式添加到单元格中，然后将其拖到整个列中并在 H 列中复制相同的公式 我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
问题类似于this one ，但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
我正在使用GNU bash，版本5.0.3(1)-发行版(x86_64-pc-linux-gnu)，我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
这里，为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时，它发现错误。 而且我的 jquery 类和 insertadjacentHTMl 也不
我正在尝试更改标签的innerHTML。我无权访问该表单，因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。 这是输入和标签的结构:
我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除 按钮。问题是 Delete 按钮在新插入的元素上不起作用，
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列，它是一个数字，如帐号，并按原样返回其余列。 使用 awk 或 sed 执行此操作的最佳方法是什么？ Accounti
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中，我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
所以我试图有一个输入字段，我可以在其中输入任何字符，但然后将输入的值小写，删除任何非字母数字字符，留下“。”而不是空格。 例如，如果我输入: 地球的 70% 是水，-!*#$^^ & 30% 土地 输
我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。 这是一个获取输入值、检查选择
我想使用 angularjs 从 mysql 数据库加载数据。 这就是应用程序的工作原理；用户登录，他们的用户名存储在 cookie 中。该用户名显示在主页上 我想获取这个值并通过 angularjs
我正在使用 autoLayout，我想在 UITableViewCell 上放置一个 UIlabel，它应该始终位于单元格的右侧和右侧的中心。 这就是我想要实现的目标 所以在这里你可以看到我正在谈论的
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
我尝试使用for循环声明变量，然后测试cols和rols是否相同。如果是，它将运行递归函数。但是，我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗？ 现在，在比较 col.1 和
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {
我是一名优秀的程序员,十分优秀！