官网:http://mockjs.com/examples.html
控制台中可以输入:
var data = Mock.mock({"success":true,"data|10":[{"video":"blob:http%3A\/\/www.imooc.com\/114999a0-8c02-4654-982c-403ace01404a","_id":"@ID","thumb":"@IMG(1200x600,@color())"}]})
data.data.forEach(function(item){$('#examples').append('<h3>' + item._id + '</h3><image src=" '+ item.thumb +' "/>')})
这样就可以也页面底部看到获得到的数据并显示在页面上
1.工程目录中安装mockjs
npm i mockjs --save
2.安装好后找到已安装模块中的node_modules\mockjs\dist\mock.js,删除
如下代码(第一行的 “’‘’逗号也要删的,因为该方法用到一些依赖的模块,而本工程没有安装)
,
/*
生成一段随机的 Base64 图片编码。
https://github.com/imsky/holder
Holder renders image placeholders entirely on the client side.
dataImageHolder: function(size) {
return 'holder.js/' + size
},
*/
dataImage: function(size, text) {
var canvas
if (typeof document !== 'undefined') {
canvas = document.createElement('canvas')
} else {
/*
https://github.com/Automattic/node-canvas
npm install canvas --save
安装问题:
* http://stackoverflow.com/questions/22953206/gulp-issues-with-cario-install-command-not-found-when-trying-to-installing-canva
* https://github.com/Automattic/node-canvas/issues/415
* https://github.com/Automattic/node-canvas/wiki/_pages
PS:node-canvas 的安装过程实在是太繁琐了,所以不放入 package.json 的 dependencies。
*/
var Canvas = module.require('canvas')
canvas = new Canvas()
}
var ctx = canvas && canvas.getContext && canvas.getContext("2d")
if (!canvas || !ctx) return ''
if (!size) size = this.pick(this._adSize)
text = text !== undefined ? text : size
size = size.split('x')
var width = parseInt(size[0], 10),
height = parseInt(size[1], 10),
background = this._brandColors[this.pick(this._brandNames())],
foreground = '#FFF',
text_height = 14,
font = 'sans-serif';
canvas.width = width
canvas.height = height
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillStyle = background
ctx.fillRect(0, 0, width, height)
ctx.fillStyle = foreground
ctx.font = 'bold ' + text_height + 'px ' + font
ctx.fillText(text, (width / 2), (height / 2), width)
return canvas.toDataURL('image/png')
}
3.回到工程里面的js页面,
import Mock from 'mockjs'//引入
_fetchData() {
return fetch('http://rapapi.org/mockjs/18145/api/creation? accessToken=ac')
.then((response) => response.json())
.then((responseJson) => {
//console.log(responseJson) 打印出来数组里只有1条
var data = Mock.mock(responseJson)
console.log(data)//此时data数组里面是10条,而不是1条
})
.catch((error) => {
console.error(error);
});
}