프런트 엔드를 위한 범용 데이터 시뮬레이션 프레임워크를 구축하는 방법(자세한 튜토리얼)

아래 편집자는 mockjs와 json-server를 사용하여 일반적인 프런트엔드 데이터 시뮬레이션 프레임워크를 구축하는 방법에 대한 튜토리얼을 공유할 것입니다. 이 튜토리얼은 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터 따라가서 살펴볼까요

프런트엔드 개발을 직장에서 하든, 여가시간에 하든 백엔드팀이 인터페이스 개발을 완료하지 못한 것은 피할 수 없는 일이지만, 프런트엔드팀은 해당 기능을 구현해야 합니다. 이유는 묻지 마세요. 확실히 존재합니다. 이 기사는 이러한 이유로 작성되었습니다. 관련하여 필요하신 분들께 도움이 되었으면 좋겠습니다.

1. 사용된 컴포넌트 패키지

1. mockjs: 쿼리 결과 시뮬레이션에 사용

2. json-server: 시뮬레이션 서버 구축 및 CRUD 관련 작업 인터페이스 시뮬레이션

2. 구체적인 구현 1. 프로젝트를 설정하고 해당 종속성을 설치합니다.

cnpm install --save-dev mockjs json-server

위 명령은 종속성을 설치하는 것입니다. 아래 그림은 프로젝트 결과를 보여줍니다.

지침:

data: 이 폴더는 저장됩니다. mockjs로 시뮬레이션된 쿼리 결과를 사용하려면 dataProvider 뒤에

lib: ajax 요청을 시뮬레이션하는 데 사용되는 jquery 파일이 포함됩니다.

route: crud 작업을 시뮬레이션하는 데 사용되는 json-server의 라우팅 테이블입니다. 여러 개의 db.json을 구현하는 방법

index.js: 서버 항목 파일 시뮬레이션

test.html: cors 테스트

2 기본 json-server 서버 구축

var JsonServer = require('json-server');
var path = require('path')

var Server = JsonServer.create();
var defaultMid = JsonServer.defaults({
 "noCors": false,
 "static": path.join(__dirname, "/lib")
});

var router = JsonServer.router(path.join(__dirname, '/route/db.json'));

Server.use(defaultMid);
Server.use(router);
Server.listen(8009);
console.log('start 8009.....');

이 부분은 다음과 같습니다. 내용은 공식 json-server와 완전히 일치합니다. 지침을 작성할 때 미들웨어로 수행되는 static 및 noCors 설정에 주목할 가치가 있습니다.

3. mockjs의 적용 확대

여기서 mockjs는 데이터 생성의 초석으로만 사용되는 반면 dataProvider.js는 외부 액세스 인터페이스를 통합하는 기능을 제공합니다. 즉, 시뮬레이션 데이터는 모듈(MVC의 컨트롤러에 해당)과 func(MVC의 작업에 해당)로 구분됩니다. 이 구현이 가능한지 모르겠습니다. (현재 내 프로젝트에서 이것을 사용하고 있습니다.)

3.1 먼저 data 폴더에 emp.js 파일을 만들고 다음 내용을 작성합니다.

var mockjs = require('mockjs');

module.exports = {
 list: function(){ 
 var data = mockjs.mock({
 'list|3':[
 {
  'id|+1':1
 }
 ]
 });
 return data.list;
 }
}

여기에 가 답입니다. mockjs 사용

3.2 dataProvider를 사용하여 모듈 컬렉션 구현

var emp = require('./emp');

var moduels = {
 emp: emp
}

module.exports = {
 execute: function(m, f, args){
 return moduels[m][f].call(moduels[m], args);
 }
}

3.3 json에 get 메소드를 추가하여 데이터를 얻습니다

var provider = require('./data/dataProvider');

Server.get('/data',function(req,res){
 var moduleName = req.body ? req.body.moduleName : req.query.moduleName;
 var funName = req.body ? req.body.funName : req.query.funName;
 var arg = null;
 res.json(provider.execute(moduleName, funName));
 res.end();
});

emp 아래의 목록에 액세스하려는 경우 주소는 http://localhost입니다. :8009/data ?moduleName=emp&funName=list

4. 요약

1 여기에서는 여러 데이터 엔터티를 구성할 수 있습니다. 데이터 CRUD를 구현하려면 http 프로토콜을 입력하세요

이것을 보면 데이터 시뮬레이션 서버 구축이 너무 간단하다고 느껴지시나요? 물론 webapi 전용입니다. 샘플 코드 다운로드

위 내용은 제가 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JavaScript에서 탄성 효과를 얻는 방법

Axios에서 쿠키 크로스 도메인을 구현하는 방법

JS를 사용하여 공의 포물선 궤적 모션을 구현하는 방법

구현 방법 JavaScript를 사용한 이진 트리 탐색

위 내용은 프런트 엔드를 위한 범용 데이터 시뮬레이션 프레임워크를 구축하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!