시뮬레이션된 백그라운드 데이터 전송 기능을 구현하기 위한 express 및 mockjs 공유 예

대부분의 경우 프론트엔드와 백엔드가 동시에 개발됩니다. 즉, 페이지 개발이 완료되면 바로 공동 디버깅 단계에 진입하지 못할 수도 있습니다. 인터페이스의 효율성과 코드의 완전한 기능을 보장하기 위해 모의 데이터가 필요할 수 있습니다. 이 글은 시뮬레이션된 배경 데이터 전송 기능을 구현하기 위한 express+mockjs를 주로 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

데이터 시뮬레이션 방법

1. js 변수를 통해 배경 데이터 시뮬레이션

장점: 서버가 필요하지 않음

단점: 많은 변수를 생성해야 하고, 유효한 코드에서 해당 변수를 사용하고 최종적으로 삭제해야 함

2. ajax를 통해 json 파일 요청

장점: 액세스할 경로만 구성하면 되며, 공동 디버깅 단계에 들어갈 때 많은 js 코드를 수정할 필요가 없습니다.

단점: Ajax는 도메인 간 문제가 있으며, 일반적으로 Firefox에서도 로컬 파일을 요청할 수 없습니다. 다른 파일 디렉터리에 있는 json 파일에 액세스할 수 없습니다. 일반적으로 IDE 또는 직접 서비스를 시작해야 합니다.

3 요청 전송을 위한 서비스를 작성하려면 nodejs를 사용하세요. 비즈니스 로직을 포함하지 않음

장점: 프런트 엔드 코드가 공동 디버깅에 들어갑니다. 이 단계에서는 하나의 basePath만 수정하면 됩니다. 모든 인터페이스 이름은 합의된 경로와 일치할 수 있으며 네트워크 환경을 시뮬레이션할 수 있습니다. 단점: 백엔드를 직접 작성해야 합니다. 1과 2는 데모용으로 사용하기 적합하지만, 온라인 프로젝트인 경우에도 노드 백엔드를 직접 구축하는 것이 좋습니다

1. , npm/cnpm

2. express, mockjs

3. 서비스 생성 server.js 파일 종료, 관련 모듈 소개

let express = require('express'); //引入express模块
let Mock = require('mockjs');  //引入mock模块
let app = express();    //实例化express

4. 인터페이스 라우팅 구성, 리스닝 포트 설정

/**
 * 配置test.action路由
 * @param {[type]} req [客户端发过来的请求所带数据]
 * @param {[type]} res [服务端的相应对象，可使用res.send返回数据，res.json返回json数据，res.down返回下载文件]
 */
app.all('/test.action', function(req, res) {
 res.send('hello world');
});
/**
 * 监听8090端口
 */
app.listen('8090');

http://localhost:8090/test.action에 직접 접속하면 인터페이스 세계' 텍스트에서 직접 'hello'를 볼 수 있습니다

5. mockjs를 사용하여 형식화된 json 데이터를 반환합니다

app.all('/test.action', function(req, res) {
 /**
  * mockjs中属性名‘|'符号后面的属性为随机属性，数组对象后面的随机属性为随机数组数量，正则表达式表示随机规则，+1代表自增
  */
 res.json(Mock.mock({
  "status": 200,
  "data|1-9": [{
   "name|5-8": /[a-zA-Z]/,
   "id|+1": 1,
   "value|0-500": 20
  }]
 }));
});

이 때 페이지 데이터를 사용하면 임의의 json 데이터를 얻을 수 있습니다

6. 시뮬레이션 데이터 폴더 testData를 만들고 시뮬레이션 데이터 json 파일을 만듭니다(참고: json 파일에서는 정규식을 사용할 수 없으며 개체 속성은 큰따옴표로 묶인 문자열이어야 합니다)

7. 시뮬레이션 데이터 파일을 탐색하고 해당 경로를 생성합니다

/*readdir读取目录下所有文件*/
fs.readdir('./testData', function(err, files) {
 if(err) {
  console.log(err);
 } else {
  /*成功读取文件，取得文件名，拼接生成对应action，监听对应接口并返回对应文件数据*/
  files.forEach(function(v, i) {
   app.all(`/${v.replace(/json/, 'action')}`, function(req, res) {
    fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) {
     if(err) {
      console.log(err);
     } else {
      res.json(Mock.mock(JSON.parse(data)));
     }
    })
   })
  })
 }
})

이 시점에서 노드 서버가 성공적으로 구축되었습니다. js가 서버를 실행하면 프런트 엔드에서 직접 인터페이스에 액세스할 수 있습니다. 백엔드만 생성했는데 백엔드를 통해 프런트엔드 페이지에 액세스할 수 없으면 도메인 간 문제가 발생하게 됩니다. 이 문제를 해결해야 하는 경우 백엔드에 도메인 간 요청을 추가할 수 있습니다.

/*为app添加中间件处理跨域请求*/
app.use(function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header('Access-Control-Allow-Headers', 'Content-Type');
 next();
});

ps: mock은 정규 표현식을 사용해야 합니다. express 및 mockjs에 대한 자세한 지침은 공식 웹사이트 api

를 확인하세요. 관련 권장 사항:

jquery ajax 백그라운드 데이터를 프런트 데스크 테이블로 반환하는 방법 예제 코드 상세 설명

jQuery Ajax가 백그라운드 데이터를 요청하고 포그라운드에서 수신하는 코드 조각을 공유합니다

Angular를 사용하여 로컬 Localstorage 데이터를 실시간으로 얻어 시뮬레이션된 백그라운드 데이터 로그인 효과를 얻습니다