vue-cli结合mockjs模拟后台数据

mockjs在vue中使用:html

准备工做:
一、安装vue-cli
二、加载模块mockjs、axios(http请求库)
npm install mockjs axios --savevue

开始:
一、建立mock.js文件(用于定于接口返回的数据)到src目录下的任何一个合适的文件夹下,设置好拦截信息,,设置规则能够看mock官网规则ios

clipboard.png

二、在mock.js文件中写入如下模拟数据
单条数据:vue-cli

clipboard.png

多条数据:npm

clipboard.png

三、在组件中引入axios和mock.js文件axios

import axios from 'axios';
import mockdata from '../mock/mockjs';
在mounted中:this

axios.get('msg').then(res=>{
    // this.data1 = res.data;
    console.log(res);
})

clipboard.png

四、运行项目 npm run dev,查看控制台spa

clipboard.png

以上,结束
文章结合了多位前辈的经验得出,若是更好的方法,请你们在评论区评论,谢谢!
https://www.cnblogs.com/vicky...
https://www.imooc.com/article...code

相关文章
相关标签/搜索