mockjs使用

来源：互联网发布：广东网络电视营业厅编辑：程序博客网时间：2024/06/16 21:18

官网：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);            });    }

0 0