vue-cli 프로젝트 에서 json-sever 로 mock 서버 구축

vue-cli 에서 json-server 설정
json-server 를 사용 하여 배경 데이터 인터페이스 구현
먼저 json 파일 을 만 듭 니 다:db.json 은 build/아래 에 놓 습 니 다.

build/dev-server.js 에 설정(변수 이름 주의)
github 설명:


시작 항목 주소 표시 줄 입력 localhost:8081

서비스 가 시작 되 었 습 니 다.8081 후 해당 접 두 사 를 추가 하면 데이터 에 접근 할 수 있 습 니 다.
localhost:8081/posts
l
localhost:8081/comments

마지막 으로 브 라 우 저 프 록 시 설정 config/index.jsr 를 해 보 겠 습 니 다.

마지막 으로 확인 해 보 겠 습 니 다.

완결 사화=-=
전역 설치 json-server

npm install json-server -g

프로젝트 디 렉 터 리 에 mock 폴 더 를 만 들 고 폴 더 에 db.json 파일 을 만 듭 니 다.

{
  "slides": [{
    "src": "/static/img/right1.png",
    "title": "xxx1",
    "href": "#"
  }, {
    "src": "/static/img/right2.png",
    "title": "xxx2",
    "href": "#"
  }, {
    "src": "/static/img/right3.png",
    "title": "xxx2",
    "href": "#"
  }, {
    "src": "/static/img/right4.png",
    "title": "xxx2",
    "href": "#"
  }],
  "list": [{
    "id": 1,
    "url": "#",
    "title": "  "
  }, {
    "id": 2,
    "url": "#",
    "title": "  "
  }, {
    "id": 3,
    "url": "#",
    "title": "  "
  }]
}

파일 형식 은 다음 과 같 습 니 다.
package.json 폴 더 를 찾 아 두 명령 을 기록 합 니 다:

"mock": "json-server --watch mock/db.json",
 "mockdev": "npm run mock & npm run dev"

나 는 여기에 하나 밖 에 쓰 지 않 았 는데,사실 하 나 는 둘 다 할 수 있 고,두 개 를 쓰 면 두 명령 을 함께 집행 할 수 있다.
npm run mockdev 를 실행 할 때 db.json 을 감청 하 는 상태 라면 두 명령 을 두 명령 줄 로 나 누 어 실행 하 는 것 을 권장 합 니 다.피 할 수 있 습 니 다.

config/index.js 에 프 록 시 설정:
요청 을 비 추기 위해 서 입 니 다.http://localhost:3000
 
메모:이 때 서비스 가 시작 되 었 다 면(npm run dev 가 시작 되 었 습 니 다)서 비 스 를 다시 시작 해 야 합 니 다.
프 록 시 를 설정 하기 전에 mock 서버 를 시작 할 수 있 는 지 먼저 테스트 할 수 있 습 니 다.
npm run mock 실행 후 접근http://localhost:3000 페이지 에 json 대상 이 존재 하고 접근 할 수 있 습 니 다.

페이지 에서 axios 를 사용 하여 데이터 요청 을 할 수 있 습 니 다.
예:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.