前端項(xiàng)目都會(huì)用到后端的接口，但當(dāng)后臺(tái)接口沒(méi)有寫(xiě)好的時(shí)候，這時(shí)候可以用mock.js先隨機(jī)生成一些假數(shù)據(jù)來(lái)調(diào)試頁(yè)面
創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括高陽(yáng)網(wǎng)站建設(shè)、高陽(yáng)網(wǎng)站制作、高陽(yáng)網(wǎng)頁(yè)制作以及高陽(yáng)網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，高陽(yáng)網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到高陽(yáng)省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！
安裝mock.js
先用express創(chuàng)建一個(gè)nodejs的web項(xiàng)目，名字假如是 demo ，這里就不說(shuō)了
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))上面的隨機(jī)方法在最下面給出的mockjs文檔的鏈接里可以找到，Mock.Random調(diào)用的方法，直接拿來(lái)在前面加上@就可以用了，非常方便
輸出
{
"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()'
}]
})
// 延時(shí)1秒，模擬網(wǎng)絡(luò)請(qǐng)求時(shí)間
setTimeout(function() {
res.send(JSON.stringify(data))
}, 1000);
}express跨域
接口地址跟前端項(xiàng)目地址肯定會(huì)不一樣，這時(shí)候請(qǐng)求接口就會(huì)涉及到跨域的問(wèn)題，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();
});說(shuō)明：上面代碼是在網(wǎng)上找的，不過(guò)網(wǎng)上找的沒(méi)有這句 res.header('Access-Control-Allow-Credentials', true);
我前端項(xiàng)目的地址是 http://localhost:8080 所以 Access-Control-Allow-Origin 的值就是 http://localhost:8080
可以根據(jù)自己的服務(wù)器來(lái)修改
參考
•mockjs文檔
總結(jié)
以上所述是小編給大家介紹的使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
