vue-cli+mockjs+axios 模拟数据基本使用

前言

很多前端同学应该跟我一样，自己平时会写一些小demo，练练自己想要学习的技术。我们经常会给自己造假数据，但直接在组件中造假数据的方式，相对于真实向后台发起请求获取数据还是有很大区别的。了解到mockjs可以模拟向后台发起请求之后，自己在网上搜索了一些资料，结合mockjs官网文档，对mockjs+axios基本使用做一个记录。防止自己以后再用会忘，我记性不太好。。。。

所需资料

 mockjs官网api

步骤

一、.这里默认电脑环境是已有node,npm,vue-cli。所以第一步是在项目中安装mockjs和axios : npm install mockjs --save /

npm install axios --save

二、文件结构：

1.在项目根目录创建mock文件夹，与main.js同级。mock文件夹下创建index.js主文件，拦截请求，配置请求路径，请求方式等。

2.mock文件夹下除了index配置文件，剩下的就是具体到业务的数据规则，可以根据自己的习惯创建。例如首页的数据放在homeMock.js中，登录所需数据放在loginMock.js中。结合mock的配置规则，生成自己想要的数据。，例如我现在需要一个首页的列表数据.

3.在main.js引入mock配置文件

4.在根目录下创建一个api文件夹，其中index文件用于封装axios请求,其他文件处理具体业务的请求逻辑。

5.在组件中获取数据

在控制台查看获取到的数据：

页面效果

基本使用就记录到这里，结合mockjs的api文档，可以很方便的自己做一个列表的增删改查。