前端使用mock工具模拟接口联调

2024-01-16  本文已影响0人  晓妆初了明肌雪

实际开发过程中,前端一般需要依赖数据模型来组织页面与组件中的交互流程 ,而数模型又依赖着后端提供的 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文件夹中,这样打包也不会有影响。

上一篇 下一篇

猜你喜欢

热点阅读