使用mock.js随机数据和使用express输出json接口的实现方法


Posted in Javascript onJanuary 07, 2018

前端项目都会用到后端的接口,但当后台接口没有写好的时候,这时候可以用mock.js先随机生成一些假数据来调试页面

安装mock.js

先用express创建一个nodejs的web项目,名字假如是 demo ,这里就不说了

yarn add mockjs

使用

const Mock = require('mockjs')

var data = Mock.mock({
 'list|2': [{
 'id|+1': 1,
 'color': '@color()',
 'date': '@datetime()',
 'img': '@image()',
 'url': '@url(http)',
 'email': '@email()',
 'name': "@name(1,2)",
 'text': '@paragraph()'
 }]
})
console.log(JSON.stringify(data))

上面的随机方法在最下面给出的mockjs文档的链接里可以找到,Mock.Random调用的方法,直接拿来在前面加上@就可以用了,非常方便

输出

{
 "list": [
 {
  "id": 1,
  "color": "#8179f2",
  "date": "2015-06-22 12:10:08",
  "img": "http://dummyimage.com/250x250",
  "url": "http://hwujcvh.fk/vfrjfmi",
  "email": "y.ahbatuekk@mbkhfybrh.pl",
  "name": "James Ronald Rodriguez",
  "text": "Zsogshtw qjscoe qwggnfk ppbdpqd avftd pvczrvnu gsyfyefm rbnbjyy tgemy buple ieghyjp klcxauofu lhjmnb kjpyodk. Njync ysrvx jevei stawy mcosrlpo iacryqob wkkcfuh nkrrdutr zduikjvtf dcv pppbhi ygjnkmg xvpusp ayu lvu. Wgqmtwvo ibqzp cct kodyh ovz slo cpc uqaseuwv ubjgbf hihh oudly mooztiojpi tubmwhsmb kktbkyqp hsvwgoluu jrkosqudm. Wpumdvtw riytwoa sbittrr xtjy beorkb osnjpigntu ndrgxhozeq iufhu hpuirgmh lstoijpqx hopk lkxceqhvr uymj pgdms njjmu ivxijmokn."
 },
 {
  "id": 2,
  "color": "#94f279",
  "date": "1980-02-20 19:46:44",
  "img": "http://dummyimage.com/336x280",
  "url": "http://voyqj.cx/jjyksqzur",
  "email": "k.ydgui@gixl.cr",
  "name": "Ronald Nancy Harris",
  "text": "Lbdpwqwpgd sodipqu oncnnyis ebtwho dnbt fqxnjyzr qtrriop gfbjt prto dgmtgff gwaqnhon sdlvpxpj pqomfflsc skj. Cvteunoj oqmjnfm vowvmw ypywtr klcazkvg cvsyzayytl bgvywe kfqqzhfg iahm jwury xsgf xnr pvfxwhaed nauookwi xuxtgnwq flcbmnrm qglgziy vegml. Cexit vdotefuj nptmei hekmljnt bukxrd ndhj lkfyjcv oldpgo rrj kprfklt nfks yvrvc. Aynbyd hxguza ftjrn kmlirqo wxald jqjkvahim jnhezpgm usev qbynwhm yotehgkwdg eyxj vfnm icchnds dgmd odxajing vqrdl yhpp eba. Tykxnhe njod bslwbsjcj rwlv rkvxk rypew fpfqrqi psislxuwgs jcwrbtfn qeszy leovhc jwupwzo kitct nhbdhjq xyiajxms. Gfgkw nnlg drcqnpwn bowqknwy oiw yysaohk fqqsbgvp mulik vusikwv nbp kpbo nhti dhf hrgql."
 }
 ]
}

集成到express里输出json

const Mock = require('mockjs')

exports.index = function(req, res) {
 var data = Mock.mock({
 'list|2': [{
  'id|+1': 1,
  'color': '@color()',
  'date': '@datetime()',
  'img': '@image()',
  'url': '@url(http)',
  'email': '@email()',
  'name': "@name(1,2)",
  'text': '@paragraph()'
 }]
 })
 // 延时1秒,模拟网络请求时间
 setTimeout(function() {
 res.send(JSON.stringify(data))
 }, 1000);
}

express跨域

接口地址跟前端项目地址肯定会不一样,这时候请求接口就会涉及到跨域的问题,express里的解决办法如下

app.all('*', function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "http://localhost:8080");
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
 res.header("X-Powered-By",' 3.2.1')
 res.header("Content-Type", "application/json;charset=utf-8");
 res.header('Access-Control-Allow-Credentials', true);
 next();
});

说明:上面代码是在网上找的,不过网上找的没有这句 res.header('Access-Control-Allow-Credentials', true);

我前端项目的地址是 http://localhost:8080 所以 Access-Control-Allow-Origin 的值就是 http://localhost:8080

可以根据自己的服务器来修改

参考

•mockjs文档

总结

以上所述是小编给大家介绍的使用mock.js随机数据和使用express输出json接口的实现方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 #Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 #Javascript
12条写出高质量JS代码的方法
Jan 07 #Javascript
js数组方法reduce经典用法代码分享
Jan 07 #Javascript
javascript中的replace函数(带注释demo)
Jan 07 #Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 #Javascript
js实现复制功能(多种方法集合)
Jan 06 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
php中的实现trim函数代码
2007/03/19 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP实现下载功能的代码
2012/09/29 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
汇科协同Java笔试题
2012/03/31 面试题
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
党员违纪检讨书
2015/05/05 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL