快捷導(dǎo)航

使用mock.js隨機數(shù)據(jù)和使用express輸出json接口的實現(xiàn)方法

更新時間：2018年01月07日 11:13:56 作者：朋也

這篇文章主要介紹了使用mock.js隨機數(shù)據(jù)和使用express輸出json接口的實現(xiàn)方法,需要的朋友可以參考下

前端項目都會用到后端的接口，但當(dāng)后臺接口沒有寫好的時候，這時候可以用mock.js先隨機生成一些假數(shù)據(jù)來調(diào)試頁面

安裝mock.js

先用express創(chuàng)建一個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調(diào)用的方法，直接拿來在前面加上@就可以用了，非常方便

輸出

{
"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秒，模擬網(wǎng)絡(luò)請求時間
 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();
});

說明：上面代碼是在網(wǎng)上找的，不過網(wǎng)上找的沒有這句 res.header('Access-Control-Allow-Credentials', true);

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

可以根據(jù)自己的服務(wù)器來修改

參考

•mockjs文檔

總結(jié)

以上所述是小編給大家介紹的使用mock.js隨機數(shù)據(jù)和使用express輸出json接口的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: