vue가 로컬 데이터 구성을 요청하는 배경 데이터를 시뮬레이션하는 방법

프런트엔드 프레임워크가 지속적으로 개발됨에 따라 점점 더 많은 회사가 프런트엔드 및 백엔드 분리 개발 모델을 사용하도록 선택합니다. 이 경우 프런트 엔드는 백그라운드와의 공동 디버깅이 원활하게 진행될 수 있도록 개발한 페이지를 테스트하기 위해 백그라운드 데이터 요청을 시뮬레이션해야 합니다. 이 기사에서는 Vue 프레임워크를 사용하여 백그라운드 데이터 요청 로컬 데이터 구성을 시뮬레이션하는 방법을 소개합니다.

1. Vue-cli 3.x 스캐폴딩 프로젝트

먼저 Vue-cli 3.x 스캐폴딩을 사용하여 프로젝트를 생성해야 합니다. 이 기사에서는 여기서 자세히 다루지 않습니다. 그런 다음 생성된 프로젝트에서 src 디렉터리에 새로운 모의 디렉터리를 생성하여 시뮬레이션 데이터를 저장할 수 있습니다.

2. Mock.js를 설치하고 구성합니다

1. Installation

다음 명령줄을 사용하여 프로젝트 디렉터리에 Mock.js를 설치합니다.

npm install mockjs -D

2. Configuration

프로젝트 디렉터리 .js 파일을 만들고 다음에서 구성합니다.

import Mock from 'mockjs'

//这是模拟数据示例
Mock.mock('/api/getList', 'get', {
    code: 0,
    message: 'ok',
    data: {
        list: [
            { id: 1, name: '兰博基尼', price: '1亿', color: 'red' },
            { id: 2, name: '法拉利', price: '2亿', color: 'blue' },
            { id: 3, name: '奥迪', price: '3亿', color: 'black' },
            { id: 4, name: '宝马', price: '4亿', color: 'white' }
        ]
    }
})

Mock.mock('/api/getList', 'get', {}), '/api/getList'는 요청된 인터페이스 주소입니다. 'get'은 요청입니다. 메서드(POST, GET 등); {}는 인터페이스에서 반환된 데이터입니다.

3. Mock.js 파일 도입

mock.js 파일을 main.js에 도입하고, 컴포넌트 API를 호출할 때 사용할 Vue.prototype의 Mock 메서드를 바인딩합니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import './mock/mock.js'

Vue.config.productionTip = false

//将mock绑定到Vue实例的原型上
Vue.prototype.$Mock = Mock

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 시뮬레이션된 데이터 호출

컴포넌트에서 시뮬레이션된 데이터를 호출하려면 Vue.prototype.$Mock.mock() 메소드를 사용할 수 있습니다.

//示例中的调用请求
methods: {
    getData() {
        this.$Mock.mock('/api/getList', 'get', {});
        this.$http.get('/api/getList').then(res => {
            //响应成功操作
            console.log(res);
        }, error => {
            //响应失败操作
            console.log(error);
         })
     }
}

이런 방식으로 페이지에서 this.$http.get('/api/getList')를 사용할 수 있습니다. 백그라운드 데이터를 요청하고, 공동 디버깅 전에 mock.js 파일에서 요청을 시뮬레이션합니다. 이러한 방식으로 공동 디버깅 중에 발생할 수 있는 문제를 방지하면서 개발 프로세스 중에 코드의 정확성을 완전히 테스트할 수 있습니다.

요약:

프런트엔드와 백엔드가 분리된 시대에 프런트엔드는 백엔드와의 인터페이스 공동 디버깅이 필요합니다. 그러나 소프트웨어 개발 과정에서 공동 디버깅에는 종종 특정 문제가 있습니다. 조인트 디버깅 시 호환성 문제 외에도 프런트엔드와 백엔드를 동시에 개발할 수 없는 문제도 해결해야 합니다. 따라서 이 문제를 해결하기 위해 백엔드 데이터 요청을 시뮬레이션하기 위해 Mock.js를 도입할 수 있습니다. 간단히 말하면: "백엔드 인터페이스를 시뮬레이션하면 프런트엔드가 프런트엔드 페이지의 논리적 정확성을 독립적으로 테스트할 수 있습니다. 이를 통해 프런트엔드의 개발 효율성이 완전히 향상되고 개발 비용이 절감되며 오류율이 감소합니다. 여러 사람이 공동으로 개발할 수 있으며 데이터를 시뮬레이션할 때 불필요한 문제를 피할 수도 있습니다

.

위 내용은 vue가 로컬 데이터 구성을 요청하는 배경 데이터를 시뮬레이션하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!