实际开发过程中,前端一般需要依赖数据模型来组织页面与组件中的交互流程 ,而数模型又依赖着后端提供的 API 接口。在后端还没能提供接口进行联调时,我们可以使用Mock工具来模拟接口进行联调,以便快速进行前后端分离,而不至于傻傻等着后端。
步骤如下:
step1: 安装mock依赖 npm install mockjs --save
step2: 在项目src文件夹下新建mock文件夹,在mock文件夹中新建custTag.json文件和mockServe.js文件
step3: custTag.json文件里写mock数据源
step4: mockServe.js文件中通过mockjs插件来模拟数据
step5: main.js文件引入mockServe
step6:定义api接口请求方法
step7:在需要的页面调用step6的方法即可
tips:mock数据里若有图片资源,则需要把图片资源放在public文件夹中,这样打包也不会有影响。