vue-cli 3 mock 데이터 사용 방법 분석

이 글 은 vue-cli 3 에서 mock 데 이 터 를 사용 하 는 방법 을 실례 로 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
앞 뒤 가 분 리 된 개발 모델 에서 백 엔 드 는 전단 에 인 터 페 이 스 를 제공 하고 전단 에서 백 엔 드 로 요청 하 며 데 이 터 를 얻 은 후 전단 에 렌 더 링 을 합 니 다.앞 뒤 단 개발 진도 가 일치 하지 않 기 때문에 전단 은 현지의 테스트 데 이 터 를 사용 하여 데이터 렌 더 링 테스트 를 한다.
본문 시작
vue-cli 에서 구 축 된 프로젝트 에서 저 희 는 devserver 를 통 해 서 비 스 를 시작 할 수 있 습 니 다.그리고 저 희 는 경로 시 뮬 레이 션 인 터 페 이 스 를 통 해 테스트 할 수 있 습 니 다.
vue-cli 2 와 vue-cli 3 의 설정 방식 은 다르다.다음은 따로 보 여 드 리 겠 습 니 다.
##　vue-cli2
vue-cli 2 생 성 항목 그림 을 먼저 놓 습 니 다.

mock 폴 더 는 제 가 만 든 아 날로 그 데 이 터 를 저장 하 는 폴 더 입 니 다.그 중 에 json 파일 이 있 습 니 다.다음은 build 디 렉 터 리 아래 webpack.dev.conf.js 를 설정 하 겠 습 니 다.


//     
const goodsList = require('../mock/goods.json');
// ……
//   devServer
devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
   poll: config.dev.poll,
  },
  before(app){
   app.get('/goods/list',(req,res,next)=>{
    res.json(goodsList);
   })
  }

뒤의 before(app)부분 은/goods/list 에 get 요청 을 보 내 서 우리 가 원 하 는 json 파일 을 얻 을 수 있 도록 정의 합 니 다.
동료


//    axios
axios.get("/goods/list").then(res => {
    this.goodsList = res.data.result;
   }).catch(error=>{
    console.log(error);
   });

데 이 터 를 요청 할 수 있 습 니 다.
vue-cli3
vue-cli 3 메 인 자동화,0 설정.그러나 우 리 는 설정 을 해 야 합 니 다.이 럴 때 설정 파일 을 만들어 야 합 니 다.디 렉 터 리 구 조 는 다음 과 같다.

vue.config.js 는 우리 가 수 동 으로 만 든 프로필 입 니 다.전체 설정 항목 은 홈 페이지 에서 볼 수 있 습 니 다.여기 서 devserver 에 중심 을 두 고 있 습 니 다.


const mockdata = require('./mock/test.json');

module.exports={
 devServer: {
  port:4000,
  before(app){
   app.get('/goods/list',(req,res,next)=>{
    res.json(mockdata);
   })
  }
 }
}

이렇게 해서 똑 같은 효 과 를 얻 었 습 니 다.
본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

처음 vue.js ① ~로컬 환경에서의 개발/환경 구축/vue-cli3~

Vue.js에 대해 많은 기사가 있지만 장을 나누어 로컬 환경에서 FCM과 제휴까지 기사를 써 갑니다. 이번에는 「로컬 환경」에서 Vue.js의 템플릿을 이용한 사이트를 작성해 갑니다. Vue.js 개발 환경의 토대...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue-cli 3 mock 데이터 사용 방법 분석

좋은 웹페이지 즐겨찾기