Vue 프로젝트에서 모의 데이터를 읽는 단계: Mock.js 설치, Mock.js 파일 생성, 모의 데이터 정의, Vue 구성 요소의 $http 서비스를 사용하여 모의 데이터를 얻고 저장하는 요청 시작
Vue 프로젝트에서 테스트를 위해 Mock 데이터를 사용할 때 다음 단계를 통해 Mock의 데이터를 읽을 수 있습니다.
1. Mock.js
npm install --save-dev mockjs
src 디렉터리에mock.js
라는 파일을 만들고 여기에 모의 데이터를 정의합니다:
const Mock = require('mockjs'); // 定义 Mock 数据 Mock.mock(/api\/users/, { 'list|10': [{ id: '@id', name: '@cname', age: '@integer(18, 60)', }] });
mock.js
的文件,并在其中定义 Mock 数据:
import mock from '@/mock'; // 导入 Mock.js 文件 export default { data() { return { users: [], }; }, created() { this.$http.get('/api/users').then(response => { this.users = response.data; }); }, };
3. 在 Vue 组件中使用 Mock 数据
在需要使用 Mock 数据的 Vue 组件中,引入 Mock.js 文件并使用$http
服务发起请求:
4. 获取 Mock 数据
请求发送后,Vue 组件将收到 Mock.js 生成的响应,响应数据会存储在this.users
中。
注意:
$http
3. Vue 구성 요소에서 모의 데이터 사용$http
서비스를 사용하여 요청을 시작합니다: rrreee4. 모의 데이터 가져오기 요청이 전송된 후 Vue 구성 요소는 Mock.js에서 생성된 응답을 수신하고 응답 데이터는
this.users
에 저장됩니다. 참고:
$http
서비스는 Vue-resource 플러그인을 통해 제공됩니다. Vue-resource를 사용하지 않는 경우 실제 상황에 따라 다른 HTTP 요청 라이브러리(예: Axios)를 사용할 수 있습니다.위 내용은 vue는 모의 테스트 데이터를 어떻게 읽습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!