JSon - server 전단 가상 REST API 서비스 구축

한담 하 다
왜 제 이 슨 - server 를 자세히 소개 해 주 시 겠 어 요?우리 전단 개발 자 들 이 백 스테이지 관리 프로젝트 를 개발 하 는 과정 에서 가장 많이 접촉 하 는 것 은 API 연결 이 고 그 다음 에 데이터 렌 더 링 페이지 나 동적 데이터 바 인 딩 이기 때 문 입 니 다.
그러나 매우 모순 되 는 문 제 는 앞 뒤 가 함께 개 발 된 경우 가 많 고 백 엔 드 의 진도 가 전단 의 진 도 를 따라 가지 못 할 수도 있다 는 것 이다.일반적인 상황 에서 해결 방법 은 전단 응용 에서 데 이 터 를 모 의 기록 하 는 것 이다. 요청 한 과정 이 부족 한 후에 데 이 터 를 업데이트 하고 데 이 터 를 삭제 하 는 등 일부 페이지 가 복잡 한 상호작용 을 전환 하 는 장면 에서 데 이 터 는 vuex 나 redux 의 지원 이 필요 하 다.
전단 에 json - server 의존 을 설치 하면 이러한 문 제 를 잘 해결 할 수 있 습 니 다. 전단 페이지 논 리 를 쓸 때 직접 상호작용 을 요청 할 수 있 습 니 다. 데 이 터 를 추가, 업데이트, 삭제 하면 로 컬 json 파일 의 데 이 터 를 직접 수정 할 수 있 습 니 다.전역 정의 변수 에 데 이 터 를 저장 할 필요 가 없습니다.또한 도 메 인 을 직접 넘 어 요청 할 수 있 습 니 다. 같은 소스 요청 이 필요 하지 않 아 도 연결 할 수 있 습 니 다.
설치 하 다
1. npm 설치 (cnpm 설치 권장)   npm install -g json-server  2. yarn 설치   yarn  global add json-server
설치 완료 후 출력:

C:\Users\92809>yarn global add json-server
yarn global v1.10.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
      - json-server

2. json 데이터베이스 데이터 시트 만 들 기
1. 사용자 정의 dbname. json / dbname. js 파일 을 만 듭 니 다. 2. dbname 파일 의 파일 형식 은 json 스타일 을 유지 합 니 다. 3. JSon 스타일 은 다음 과 같 습 니 다.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment1", "author": { "name": "typicode1", "age": 10 },"postId": 1 },
    { "id": 2, "body": "some comment2", "author": { "name": "typicode2", "age": 12 },"postId": 2 },
    { "id": 3, "body": "some comment3", "author": { "name": "typicode3", "age": 15 },"postId": 3 }
  ],
  "profile": { "name": "typicode" }
}

4. Js 스타일 은 다음 과 같다.

module.exports = function() {
  return {//...}
};

3. json - server 서비스 열기
(1) 원생 태 개방

D:\me\json-server\jserver-one>json-server --w onedb.json

  \{^_^}/ hi!

  Loading onedb.json
  Done

  Resources
  http://localhost:3000/news
  http://localhost:3000/comments

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

(2) 원 격 제 이 슨 데이터베이스 파일 열기

$ json-server http://example.com/file.json
$ json-server http://jsonplaceholder.typicode.com/db

(3) 서비스 포트 번호 설정

json-server --watch db.json --port 3004

(4) yarn / npm 오픈
  2-1.  yarn init / npm init   2 - 2. 초기 화 된 package. json 파일 에 추가: 

 "scripts": {
     "server": "json-server onedb.json --port 3003"
    }

  2 - 3. 실행:

npm run server / yarn run server /. yarn server

(4) 서버 로 로 컬 정적 웹 페이지 불 러 오기

md asset
cd asset
echo asset.html > asset.html
json-server onedb.json --port 3006 --static asset [       ]

접근:http://localhost:3006/asset.html （OK）
주: 시작 할 때 디 렉 터 리 설정 이 없 으 면 - > json - server onedb. json -- port 3006 
4 - 1. Public 디 렉 터 리 를 설정 하면,http://localhost:3006/Public 의 index. html 파일 4 - 2 에 접근 합 니 다. Public 디 렉 터 리 나 index 가 없 으 면 html 파일 은 {} 을 표시 합 니 다. 
4. json - server 가 제공 하 는 요청 방식
요약: Get 요청 은 주로 데 이 터 를 가 져 오 는 데 사 용 됩 니 다. POST 요청 은 데 이 터 를 추가 하 는 데 사 용 됩 니 다. PUT 요청 은 교체 데 이 터 를 수정 하 는 데 사 용 됩 니 다. PATCH 는 일부 교체 데 이 터 를 표시 합 니 다. OPTIONS 는 서버 가 지원 하 는 HTTP 요청 방법 및 기타 요청 기능 옵션 (GET, POST, PUT, DELETE, PATCH, OPTIONS)
주: POST \ PUT \ PATCH 요청 은 요청 헤드 를 설정 해 야 합 니 다. Content - type: application / json
1. 기본 요청 방식

GET    /posts
GET    /posts/:id
POST   /posts
PUT    /posts/:id
PATCH  /posts/:id
DELETE /posts/:id

2. json 데이터베이스 의 모든 데이터 가 져 오기

GET /db

3. 매개 변수 찾기 요청 방식

GET /posts?title=json-server&author=typicode
GET /posts?id=1&postid=2
GET /comments?author.name=typicode1  *   .       

4. 페이지 링크 요청 (first, last, prev, next)

GET /posts?_page=7
GET /posts?_page=7&_limit=20

5. 승강 순서 정렬 요청

GET /users?_sort=id&_order=asc
GET /users?_sort=name&_order=asc

      ： GET /posts?_sort=user,views&_order=desc,asc

6. 범위 조회 데이터

GET /users?_start=2&_end=20 （   substring）
GET /users?_start=2&_limit=3    （   substr）

7. 문자 모호 일치 에 따라 데이터 조회

GET /users?q=  

5. 사용자 정의 경로 설정
1. 새 routes. json 파일: echo {} > routes. json 2. 파일 에 쓰기:

{
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/books/:name": "/books?name=:name",
  "/articles\\?id=:id": "/books/:id",
  "/articles/:id": "/books/:id"
}

3. 시작 서비스: json - server onedb. js -- routes routes. json
인쇄: 

 \{^_^}/ hi!

  Loading onedb.js
  Loading routes.json
  Done

  Resources
  http://localhost:3000/users
  http://localhost:3000/books

  Other routes
  /api/* -> /$1
  /:resource/:id/show -> /:resource/:id
  /books/:name -> /books?name=:name
  /articles\?id=:id -> /books/:id
  /articles/:id -> /books/:id

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database

4. ap 인터페이스 테스트

  GET /api/users      GET /users
  GET /users/1/show     GET /users/1
  GET /books/       GET/books?name=  
  GET /articles?id=3     GET /books/3

6. Node 모듈 에 사용 방법 도입
1. 새 server. js 파일: echo server > server. js 2. json - server, express 설치 에 의존: 

cnpm install express --save-dev
cnpm install json-server --save-dev
  ：
yarn add express  --dev
yarn add json-server --dev 

서비스 시작: node server. js
2 - 1. express 로 서비스 시작:

const app = require('express')();

app.get('/',(req,res)=>{
    res.send({'name':'  A '});
});

var server = app.listen(3008,()=>{
    var host = server.address().address;
    var port = server.address().port; 
    console.log('example app listening at http://%s:%s',host,port);
});

2 - 2. json - server 로 서비스 시작

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('onedb.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(3009, () => {
  console.log('JSON Server is running at port 3009.')
})

7. json - server node 에서 의 진급 사용
1. 사용자 정의 경로 설정
(1) 상기 json - server. js 파일 에 추가:

// JSON Server router         
server.get('/echo', (req, res) => {
  res.jsonp(req.query)
})

//       body-parser   POST，PUT PATCH
//     JSON Server     
server.use(jsonServer.bodyParser)
server.use((req, res, next) => {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  //   json-server  
  next()
})

(2) 시작 서비스 node json - srevr. js (3) 테스트 사용자 정의 인터페이스:

    : GET /echo?id=2&pid=3&page=20
    : { "id": "2", "pid": "3", "page": "20" }

2. 접근 권한 제어

server.use((req, res, next) => {
 if (isAuthorized(req)) { //            
   next() //   json-server  
 } else {
   res.sendStatus(401)
 }
})

3. 로 컬 json 데 이 터 를 걸 러 내 고 포맷 후 요청 에 응답 합 니 다.

// In this example, returned resources will be wrapped in a body property
router.render = (req, res) => {
  res.jsonp({
    body: res.locals.data  // res.locals.data    onedb.json        
  })
}

4. 사용자 정의 복귀 상태 코드

// In this example we simulate a server side error response
router.render = (req, res) => {
  res.status(500).jsonp({
    body: res.locals.data,
    error: "error message here"
  })
}

5. 경로 재 설정 규칙 추가 

// Add this before server.use(router)
server.use(jsonServer.rewriter({
  '/api/*': '/$1',
  '/blog/:resource/:id/show': '/:resource/:id'
}))

테스트: GET / api / coments 등가 GET / coments
6. 하위 경로 대상 만 들 기

server.use('/api', router)

여덟, 다시 이야기
  Angular 의 유닛 테스트 에서 json - server 를 접 한 후에 이 가상 전단 서 비 스 를 사용 하 는 것 이 매우 편리 하 다 고 생각 합 니 다.그리고 하루 종일 json - srever 에 관 한 지식 과 사용 방법 을 훑 어 보 았 습 니 다. 정말 좋 은 서비스 입 니 다. 하지만 node 와 결합 하면 어색 합 니 다.제 가 express 를 사용 하 는 것 에 습관 이 되 었 을 수도 있 습 니 다. 그런데 뭐라고 해 야 할 까요? 기능 이 정말 강하 지만 뒤에 express 와 결합 하여 개발 할 때 약간 무 거 운 느낌 이 듭 니 다.가 볍 고 빠 르 고 교묘 한 취지 에 어 긋 나 지만 이것 도 개인의 취향 에 따라 개인 적 인 건 의 는 npm 또는 yarn 과 결합 하여 사용 하 는 것 이 좋 습 니 다. 한 줄 의 명령 으로 해결 하고 시원 하 게 하 는 것 이 좋 습 니 다. 
아홉, 몇 마디 더, 하하
좋 은 프로젝트 는 우리 모두의 지원 이 필요 합 니 다. 많은 칭찬 을 눌 러 야 작 가 는 우리 에 게 더욱 좋 은 학습 과 사용 할 수 있 는 소스 코드, github 소스 코드 프로젝트 주 소 를 제공 할 수 있 습 니 다.https://github.com/typicode/json-server#mounting-json-server-on-another-endpoint-example