> 웹 프론트엔드 > JS 튜토리얼 > vue-cli 프로젝트에서 모의 ​​데이터를 사용하는 방법

vue-cli 프로젝트에서 모의 ​​데이터를 사용하는 방법

不言
풀어 주다: 2018-06-29 14:01:47
원래의
2680명이 탐색했습니다.

이 글은 주로 vue-cli 프로젝트에서 모의 ​​데이터를 사용하는 방법을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

vue 프로젝트에서 모의 ​​데이터는 노드의 Express 모듈을 사용하여 서비스를 구축할 수 있습니다

1 루트 디렉터리에 테스트 디렉터리를 만들어 시뮬레이션된 json 데이터를 만듭니다. test 디렉터리

2의 data data.json 파일을 빌드 디렉터리#🎜 🎜에서 다음과 같이 변경합니다. #

var appData = require('../test/data.json')
// 获取数据
var apiRoutes = express.Router();

//get请求
apiRoutes.get('/seller',function(req,res){
 res.send({
  appData
 });
});

app.use('/api',apiRoutes);
로그인 후 복사

3. .vue에서 요청하면 data.json 데이터를 성공적으로 얻을 수 있습니다. 다음으로 axios를 사용하여 요청합니다. #🎜🎜 #

axios.get('/api/seller',{
     params: {
      ID: 12345
     }
   })
    .then(function (response) {
     console.log(response);
    })
    .catch(function (error) {
     console.log(error);
    });
로그인 후 복사

요청이 성공하여 데이터를 얻었습니다

4. 게시물을 요청하려면 dev-server.js 파일

apiRoutes.post('/seller',function(req,res){
 res.send({
  appData
 });
});
로그인 후 복사

을 수정해야 합니다.

vue 프로젝트에서 사용할 수 있도록

에서 ajax 요청을 시뮬레이션합니다. 위 내용은 모두의 학습에 도움이 되기를 바랍니다. , PHP 중국어 웹사이트를 주목해주세요!

관련 권장사항:

vue 연결 유지 데이터 캐싱을 통한 프로젝트 최적화 방법

#🎜 🎜## 🎜🎜#vue.extend는 경고 모달 상자 팝업 구성 요소를 구현합니다


# 🎜🎜#

위 내용은 vue-cli 프로젝트에서 모의 ​​데이터를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿