vue의 mock.js 아날로그 인터페이스

2098 단어 vue
프로젝트 개발에서 백엔드 인터페이스가 전단을 잘 쓰지 않으면 디버깅하기 불편하다. 일부 자료를 참고하여 전단 디버깅은 mock을 사용할 수 있다고 정리했다.js 아날로그 백엔드 인터페이스, 물론 데이터는 사용자 정의입니다. 백엔드 인터페이스를 작성한 후에 모크 아날로그 인터페이스를 바꾸면 됩니다.방법은 다음과 같습니다. 첫째, cmd를 열고 항목에 들어가서 모크를 다운로드합니다.
npm intsall mockjs --save-dev

둘째, src 디렉터리에 폴더 모크, 모크 폴더에 모크를 만듭니다.js 파일, js 파일 코드는 다음과 같습니다.
import Mock from 'mockjs';//es6    mock  

export default Mock.mock('http://test.cn', {//    

  'name': '@name',//      

  'age|1-10': 10

  //          
});

셋째, vue 구성 요소에서 사용합니다. 예를 들어 이런 디렉터리에서: src/components/pages/goods.vue 
import data from '../../mock/mock.js';

넷째, 요청 인터페이스의 경우 예를 들어 내가 axios 요청을 사용하면 다음과 같다.
computed:{
    created(){
      Vue.prototype.$http.get('http://test.cn')
        .then(res => {
          console.log(res.data);
          this.msg=res.data.name;
          console.log(this.msg)
        })

이렇게 하면 브라우저에서 무작위로 생성된 데이터를 출력할 수 있다
Ant 패키지 안 드 로 이 드 프로그램 절차 및 주의사항
앱 실행 횟수 실행 시간 등 정보 가 져 오기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage