首 页最新软件下载排行文章资讯投稿发布下载专题
维维下载站
您的位置:首页编程开发网页制作Javascript → 教你如何使用mock.js随机数据和使用express输出json接口的实现办法

教你如何使用mock.js随机数据和使用express输出json接口的实现办法

作者:维维 日期:2018-1-7 14:19:08 人气:

今天维维小编要给大家分享的是一篇关于如何使用mock.js随机数据和使用express输出json接口的实现办法的文章,而本文主要为大家介绍使用mock.js随机数据和使用express输出json接口的实现方法,有兴趣的赶紧来研究一下吧。

前端项目都会用到后端的接口,可是当后台接口没有写好时,那么此时可以使用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))

然后输出:

{
 "list": [
  {
   "id": 1,
   "color": "#623442",
   "date": "2016-11-14 08:21:27",
   "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": "#32f467",
   "date": "1980-02-20 20:32:12",
   "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:82");
 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:82 因此 Access-Control-Allow-Origin 的值就是 http://localhost:82了

大家可根据自己的服务器来进行相应的更改

相关下载
栏目导航
本类热门阅览