json-server를 사용하여 백엔드 데이터를 생성하는 방법

이번에는 json-server가 백엔드 데이터를 생성하는 방법과 json-server가 백엔드 데이터를 생성하는 방법에 대한 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

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

Installation

먼저 노드 환경이 있어야 합니다(json-server를 사용하는 경우 노드 환경이 있어야 합니다). 그런 다음 전역적으로 json-server를 설치합니다

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Angular 데이터 바인딩 메커니즘 사용 방법

캘린더 범위 선택 플러그인 작동 방법

위 내용은 json-server를 사용하여 백엔드 데이터를 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!