【综合教程】如何使用mock.js随机数据和使用express输出json接口的实现办法发布时间:2019-09-05文章来源:网络
    琪琪词资源网-如何使用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了

    大家可根据自己的服务器来进行相应的更改
    如何使用mock.js随机数据和使用express输出json接口的实现办法综合教程-琪琪词资源网
版权声明:以上文章中所选用的图片及文字内容来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系:bug1234567@qq.com,我们立即下架或删除。

综合教程