使用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 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
js实现简单页面全屏
2019/09/17 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python安装selenium包详细过程
2019/07/23 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
办公室文书岗位职责
2013/12/16 职场文书
综合办公室主任职责
2013/12/16 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
装配出错检讨书
2014/09/23 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2015年服务员工作总结
2015/04/08 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书