2019-11-28

关于mockjs模拟数据的使用

一、 本文主要结合webpack+vue+mockjs，前后端分离，模拟后端接口数据，进行前端数据交互。

详细步骤：

1. 需要安装的条件：node, npm, mockjs, axios, vue

2. 主要mockjs和axios的安装 

npm install mockjs                 npm install axios

3. <1> 在src目录下创建mock.js文件， 写上模拟数据的代码，用来生成数据，并暴露出去。

    <2>在main.js中引用mock.js文件， 这样全项目都可以用mock数据了。

    <3>在xxx.vue文件中，使用mock数据，只需引用api.js即可

    <4>新建api.js文件，进行封装请求， 建议新建的文件路径是 src/lib/api.js,这样对项目规范。

4. 具体代码如下：

mock.js文件中模拟数据：

main.js文件中引入mock.js

api.js文件中封装get和post请求

xxx.vue需要请求数据时，引用api.js即可进行数据的调用