집 > 기사 > 웹 프론트엔드 > mock.js 임의 데이터 및 Express를 사용하여 json 인터페이스 출력에 대한 예제 튜토리얼

mock.js 임의 데이터 및 Express를 사용하여 json 인터페이스 출력에 대한 예제 튜토리얼

小云云원래의: 2018-01-09 09:35:242261검색

프런트 엔드 프로젝트는 모두 백엔드 인터페이스를 사용하지만 백엔드 인터페이스가 제대로 작성되지 않은 경우 mock.js를 사용하여 가짜 데이터를 무작위로 생성하여 페이지를 디버그할 수 있습니다. 이 글은 주로 mock.js 랜덤 데이터를 사용하고 express를 사용하여 json 인터페이스를 출력하는 구현 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

mock.js 설치

먼저 express를 사용하여 nodejs 웹 프로젝트를 생성하세요. 이름이 데모라면 여기서는 자세히 다루지 않겠습니다.

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이 호출하는 메소드를 바로 사용할 수 있다는 것을 알 수 있습니다. 매우 편리합니다

output

{
 "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 cross-domain

을 출력합니다. 인터페이스 주소와 프런트 엔드 프로젝트 주소는 확실히 다를 것입니다. 이때 요청 인터페이스에는 도메인 간 문제가 포함됩니다. 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

자신의 서버에 맞게 수정하시면 됩니다.

mock.js 임의 데이터 및 Express를 사용하여 json 인터페이스 출력에 대한 예제 튜토리얼

관련 기사