关于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即可进行数据的调用