express+mockjs에서 백그라운드 데이터 전송을 구현하는 방법

이 글에서는 시뮬레이션된 배경 데이터 전송 기능을 구현하기 위한 express+mockjs를 주로 소개합니다. 필요한 친구들은 참고하면 됩니다.

서문:

대부분의 경우 프론트엔드와 백엔드가 됩니다. 즉, 개발할 때 페이지가 완료되면 인터페이스와 코드의 효율성을 보장하기 위해 즉시 공동 디버깅 단계에 들어갈 수 없을 가능성이 높습니다. 코드의 완전한 기능을 구현하려면 데이터를 시뮬레이션해야 할 수도 있습니다.

데이터 방법 시뮬레이션

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

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

단점: 많은 변수를 생성해야 함과 동시에 해당 변수를 효과적인 코드에서 사용 , 그리고 마지막으로 삭제해야 합니다

2. ajax를 통해 json 파일을 요청

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

단점: Ajax는 도메인 간 문제가 있으며 대개 로컬 파일을 요청할 수 없습니다. Firefox도 다른 파일 디렉터리에 있는 json 파일에 액세스할 수 없습니다. 일반적으로 서비스를 직접 작성하려면 IDE 또는 직접 서비스를 시작해야 합니다. 비즈니스 로직을 포함하지 않는 요청 전송용

장점: 프런트 엔드 코드가 공동 디버깅 단계에 들어갈 때 하나의 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. 인터페이스 라우팅 구성 및 청취 설정 port

/**
 * 配置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 world' 텍스트를 참조하세요

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)));
     }
    })
   })
  })
 }
})

이 시점에서 노드 서버가 성공적으로 구축되었습니다. 하지만 단순히 백엔드를 생성하고 프런트엔드 페이지를 백엔드를 통해 액세스하지 않는 경우에는 크로스 도메인 문제가 발생하므로 이를 해결하려면 크로스를 추가하면 됩니다. -백엔드의 도메인 요청

/*为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

위 내용을 참조하세요. 여러분. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Javascript에서 경로를 base64 인코딩으로 변환하는 방법

VUE의 ie9 호환성에 대한 자세한 해석

소포를 사용하여 vue 스캐폴딩을 구성하는 방법(자세한 튜토리얼)

위 내용은 express+mockjs에서 백그라운드 데이터 전송을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!