Vue-cli 는 json server 가 로 컬 에서 요청 한 데 이 터 를 모 의 하 는 예제 코드 를 사용 합 니 다.

앞 에 쓰기:
개발 할 때 앞 뒤 가 분리 되 든 안 되 든 인 터 페 이 스 는 대부분 페이지 개발 에 뒤 처 져 있다.따라서 REST 스타일 의 API 인 터 페 이 스 를 만들어 전단 페이지 에 가상 데 이 터 를 제공 하 는 것 이 필요 하 다.json server 는 아 날로 그 도구 로 설정 이 간단 하고 쉽게 시작 할 수 있 습 니 다.본 고 는 간단 한 소개 입 니 다.필요 한 친구 가 참고 할 수 있 습 니 다.좋아 하 는 것 은 파 찬 을 누 르 거나 관심 을 가 져 서 여러분 에 게 도움 이 되 기 를 바 랍 니 다.
json 서버 도구:
백 엔 드 가 인 터 페 이 스 를 주기 전에 JSON-Server 를 사용 하여 JSON 서버 를 구축 하고 인터페이스 가 되 돌아 올 데 이 터 를 json 파일 에 넣 습 니 다.그리고 이 데 이 터 를 요청 하면 우 리 는 먼저 무언 가 를 만 들 수 있 습 니 다.배경 인터페이스 가 다 된 후에 바로 교체 하면 됩 니 다.계속 바보 같이 백 엔 드 의 인 터 페 이 스 를 기다 릴 필요 가 없습니다.
설치:

npm install json-server --save //json server
npm install axios --save //  axios    

json 파일:
json 파일 을 만 듭 니 다.이름 은 db.json 입 니 다.파일 은 index.html 와 같은 디 렉 터 리 에 놓 여 있 고 static 폴 더 에 놓 여 있 습 니 다.db.json 파일 의 내용 은 대상 입 니 다.
설정:
위치:build/dev-server.js

//json-server    
var jsonServer = require('json-server') //    
var apiServer = jsonServer.create(); //     
var apiRouter = jsonServer.router('db.json') //  json    ，        json     
var middlewares = jsonServer.defaults(); //  JSON         。
apiServer.use(middlewares)
apiServer.use('/json',apiRouter)
apiServer.listen( port + 1,function(){ //json     :     8080,   json     8081  
 console.log('JSON Server is running') //json server      git bash     'JSON Server is running'
})

그림 에서 보 듯 이:
 
요청 인터페이스 에이전트:

proxyTable: {
 '/api': {
  target: 'http://localhost:8081/', //                    
  changeOrigin: true, //             
  pathRewrite: {
   '/api': '/'
  }
 },
},

다음 그림 에서 보 듯 이:
 
npm run dev 시작 항목 은 json 파일 에 접근 할 수 있 습 니 다:
현재 서버 가 성공 적 으로 시작 되 었 습 니 다.주소 표시 줄 에 localhost:8081 을 입력 하면 제 이 슨 파일 을 볼 수 있 습 니 다.해당 접 두 사 를 추가 하면 파일 의 데 이 터 를 방문 할 수 있 습 니 다.
jsonserver 서버:
 
jsonserver 서버
json 데이터:
 
json 데이터
axios 요청 json 데이터:
이 데이터 만 보면 안 됩 니 다.우 리 는 이 데 이 터 를 요청 한 후에 여러 가지 소란 을 피 워 야 합 니 다.
main.js 파일 중:

import axios from 'axios';//    
Vue.prototype.$ajax = axios;// axios   Vue    $ajax  ,           this.$ajax  

구성 요소 에서 의 사용 방식,예 를 들 어:

  this.$ajax({
    url:'/api/articles',//api    json    ，                 
    method:'get',//    
    //      axios        
   }).then(function (res) {
    console.log(res,'  ');
   }).catch(function (err) {
    console.log(err,'  ');
   })
//          
 this.$ajax.get('api/publishContent').then((res) => {
  console.log(res,'    ')
 },(err)=>{
  console.log(err,'    ');
 });

JSON-Server 는 GET 요청 만 받 습 니 다.GitHub 에서 다음 과 같이 언급 했 습 니 다.
If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb.
문서:
4json servergithub 과 axios 의 중국어 문 서 를 동봉 하 니 들 어가 서 연구 해 보 세 요.
json server 설정 과 사용 이 편리 합 니 다.관심 이 있 으 시 면 글 에 따라 한 파 를 설정 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.