json-server는 백엔드 데이터 시뮬레이션을 구현합니다.

이번에는 백엔드 데이터 시뮬레이션을 구현하기 위한 json-server를 소개하겠습니다. json-server에서 백엔드 데이터 시뮬레이션을 구현하는 데 있어 주의 사항은 무엇입니까?

개발 과정에서 프런트엔드와 백엔드가 분리되거나 분리되지 않은 인터페이스는 대부분 나중에 페이지와 함께 개발되기 때문에 프런트엔드에 가상 데이터를 제공하기 위해서는 나머지 APL 인터페이스를 구축하는 것이 매우 필요합니다. end. 그래서 여기서는 json-server를 도구로 사용합니다. CORS 및 JSONP 교차 도메인 요청을 지원하고 GET, POST, PUT, PATCH 및 DELETE 메서드를 지원하며 Limit과 같은 일련의 query 메서드도 제공합니다. , order 등을 다음으로 Document

Installation

으로 나만의 사용법을 작성했습니다. 먼저 노드 환경이 있어야 하고(json-server를 사용한다면 노드 환경이 있어야 합니다) json-을 설치합니다. server global

npm install json-server -g

설치가 완료된 후 전역 설치가 성공했는지 확인합니다

G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h
index.js [options] <source>
Options:
 --config, -c        Path to config file  [default: "json-server.json"]
 --port, -p         Set port              [default: 3000]
 --host, -H         Set host            [default: "0.0.0.0"]
 --watch, -w        Watch file(s)               [boolean]
 --routes, -r        Path to routes file
 --middlewares, -m     Paths to middleware files          [array]
 --static, -s        Set static files directory
 --read-only, --ro     Allow only GET requests          [boolean]
 --no-cors, --nc      Disable Cross-Origin Resource Sharing   [boolean]
 --no-gzip, --ng      Disable GZIP Content-Encoding       [boolean]
 --snapshots, -S      Set snapshots directory       [default: "."]
 --delay, -d        Add delay to responses (ms)
 --id, -i          Set database id property (e.g. _id) [default: "id"]
 --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
                                 [default: "Id"]
 --quiet, -q        Suppress log messages from output     [boolean]
 --help, -h         Show help                 [boolean]
 --version, -v       Show version number            [boolean]
Examples:
 index.js db.json
 index.js file.js
 index.js http://example.com/db.json
https://github.com/typicode/json-server

프로젝트 루트 디렉터리에 db.json 디렉터리를 생성한 후 정보를 작성합니다

{
 "api": [
  {
   "text": "数据统计",
   "link": "#",
   "hot": true
  },
  {
   "text": "数据检测",
   "link": "#",
   "hot": true
  },
  {
   "text": "流量分析",
   "link": "#",
   "hot": true
  },
  {
   "text": "广告发布",
   "link": "#",
   "hot": false
  }
 ]
}

스크립트에 한 줄의 명령을 추가합니다. package.json

  "json": "json-server db.json --port 3003"

프로젝트 디렉터리에서 명령을 실행하세요

npm run json

bash 인터페이스에서 이와 같은 내용을 볼 수 있습니다

> vue@1.0.0 json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project
> json-server db.json --port 3003
 \{^_^}/ hi!
 Loading db.json
 Done
 Resources
 http://localhost:3003/api
 Home
 http://localhost:3003
 Type s + enter at any time to create a snapshot of the database

성공적인 시작을 축하합니다!

지금 웹페이지에 접속하여 접속하세요

할 수 있습니다 지금 접속해 보세요

http://localhost:3003/api

전에 작성한 json 문자열을 볼 수 있습니다

이것이 json-server가 시작된 것입니다

호출 코드는 다음과 같습니다

this.$http.get('http://localhost:3003/api')
   .then((data) => {
    console.log(data.body)
   }, () => {
    console.log('这里是用了vue-source,后端没有接口')
   })

보면 알 수 있습니다 페이지 초기화 후 데이터가 완성됩니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue-cropper 이미지 자르기 단계에 대한 자세한 설명

Vue Mixin 기능 사용 단계에 대한 자세한 설명

위 내용은 json-server는 백엔드 데이터 시뮬레이션을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!