JSON 서버를 사용한 목업 API

개요

소프트웨어 개발 프로젝트에서 때때로 성가신 일반적인 문제는 프런트엔드 개발자가 백엔드 개발자가 API 작업을 마칠 때까지 기다려야 한다는 것입니다. 그렇기 때문에 목업 API를 만들어야 하므로 백엔드 및 프런트엔드 개발자 모두 병렬로 작업할 수 있습니다.

JSON 서버는 가짜 REST API를 만드는 쉬운 방법이며, 초보자나 프로그래머가 아닌 사람도 만들 수 있습니다. 유일한 전제 조건은 JSON 구조를 이해해야 한다는 것입니다. 다음은 JSON 서버로 가짜 REST API를 만드는 자습서입니다.

설정

노드 js 설치: [ https://nodejs.org/en/download/ ]

터미널 열기(bash/shell/linux)

mock-api(또는 원하는 대로) 디렉토리 호출을 생성합니다

.

초기 새 프로젝트. npm init 입력 후 아래와 같이 표시될 때까지 입력 후 yes를 입력합니다.

JSON 서버 작업

전역으로 설치하려면 json server npm install -g json-server를 설치하고 로컬로 설치하려면 npm i json-server를 설치하십시오. 이 튜토리얼에서는 전역적으로 설치합니다.

npm install -g json-server

db.json 파일 생성

이 구조 json 작성

{
    "users": [
        {
            "id": 1,
            "first_name": "Sonny",
            "last_name": "Allward",
            "email": "[email protected]",
            "gender": "Genderfluid",
            "ip_address": "24.3.199.140"
        },
        {
            "id": 2,
            "first_name": "Manfred",
            "last_name": "Erickson",
            "email": "[email protected]",
            "gender": "Genderfluid",
            "ip_address": "103.30.222.192"
        }
    ],
    "products": [
        {
            "id": 1,
            "product_name": "Beets",
            "sku": "54949-004",
            "price": 27,
            "category": "Beauty",
            "quantity": 69
        },
        {
            "id": 2,
            "product_name": "Wine - Mondavi Coastal Private",
            "sku": "46122-146",
            "price": 63,
            "category": "Home",
            "quantity": 12
        }
    ]
}

JSON 서버 실행

npm run json:server --watch db.json

통화 요청

모든 데이터 가져오기

http://localhost:3000/users

하나의 데이터 가져오기, 메소드 GET

http://localhost:3000/users/1

검색 데이터, 메소드 GET

http://localhost:3000/users?first_name=Manfred

페이지 매김, 메서드 GET

http://localhost:3000/users?_limit=10&_page=5

정렬, 메소드 GET

http://localhost:3000/users?_sort=id&_order=DESC

데이터 생성, 메소드 POST

http://localhost:3000/users
body:
{
    "id": 51,
    "first_name": "Itje",
    "last_name": "Juice",
    "email": "[email protected]",
    "gender": "Helicopter",
    "ip_address": "44.73.130.666"
}

데이터 삭제, 메소드 DELETE

http://localhost:3000/users/1

Github URL: [ https://github.com/rocklinda/mock-api ]
NPM JSON 서버: [ https://www.npmjs.com/package/json-server ]