vue 는 mock 데이터 의 예제 코드 를 사용 합 니 다.

본 고 는 vue 가 mock 데 이 터 를 활용 한 예시 코드 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
프로젝트 초기 화
잔소리 하지 마 세 요.우선 프로젝트 를 초기 화 하 세 요.가장 쉬 운 것 은 vue-cli 를 사용 하 는 것 입 니 다.

vue init webpack

mock.js 도입
mockjs 설치

npm install --save-dev mockjs

Vue 원형 에 도입 하여 사용 하기 편리 합 니 다.

 import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock

이상 Vue 프로 토 타 입 에 도입 되 었 습 니 다.this.$mock 을 사용 하여 mock 데 이 터 를 직접 생 성 할 수 있 습 니 다.
여기 보 세 요.
여기 보 세 요.
프로젝트 개발 에서 앞 배경 이 분리 되 고 가짜 데 이 터 를 만 들 었 습 니 다.프로젝트 는 vue 2.0 재 구성 을 사 용 했 고 배경 도 다시 밀 렸 습 니 다.개발 과정 을 지체 하지 않 기 위해 저 는 가상 데이터 요청 을 했 습 니 다.vue-cli 비계 로 만 든 프로젝트 파일 에서 dev-server 로 가상 api 요청 을 하고 자신의 mock 의 가짜 데이터 가상 요청 배경 모델 을 방문 합 니 다.구체 적 인 방법 은 다음 과 같 습 니 다.
build/dev-server.js 파일 에서
var app=express()이 인 스 턴 스 아래 에 다음 코드 를 추가 합 니 다.

//   json-server       
//        
var appData = require('../mock.json')
//      
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
//   api             
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
//   api
app.use('/api', apiRoutes)

그 중에서 appdata 가 의존 하 는 mock.json 파일 은 자신의 mock 의 가짜 데이터 파일 로 앞 배경 수요 에 따라 자신의 mock 또는 mock.js 를 사용 하여 가짜 데 이 터 를 만 듭 니 다.
getBoardList 는 인터페이스 입 니 다.var getBoardList=appdata.getBoardList 는 바로 appdata 에서 이 인터페이스 데 이 터 를 정의 합 니 다.
var apiRoutes=express.Router()는 api 를 만 드 는 경로 입 니 다.apiRoutes.post 는 post 인 터 페 이 스 를 만 드 는 것 입 니 다.이 post 인 터 페 이 스 는 req 와 res 매개 변수 가 있 습 니 다.각각 요청 과 반환 을 수행 합 니 다.돌아 올 때 제 이 슨 을 줍 니 다.이 제 이 슨 은 상태 코드 errno 와 돌아 오 는 데이터 data(data 는 인터페이스 데이터 getBoardList 를 가리 키 고 있 습 니 다)를 포함 합 니 다.
그리고 우리 가 api 를 호출 할 때 app.use('/api',apiRoutes)는 이 서 비 스 를 정상적으로 사용 할 수 있 습 니 다.
여기 서 저 는 vue 2.0 이 추천 하 는 axios 요청 데 이 터 를 사 용 했 습 니 다.코드 는 다음 과 같 습 니 다.

this.$http.post('/api/getBoardList')
 .then(function (response) {
  console.log(response.data.data);
  alert('   ');
 })
 .catch(function (code) {
  alert('   ');
  console.log(code);
 });

브 라 우 저의 콘 솔 을 여 는 network 에서 네트워크 요청 이 발생 한 것 을 발견 할 수 있 습 니 다.

동시에 데이터 도 즐겁게 돌 아 왔 다.

인터페이스 데 이 터 를 추가 하려 면 dev-server.js 에 계속 추가 하면 됩 니 다.post,get 등 이 있 습 니 다.
dev-server.js 를 변경 할 때마다 npm run dev 시작 항목 을 다시 시작 해 야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.