前端模拟数据——mockjs的使用总结(该方法有点问题,已写新文章)

160 阅读1分钟

一、使用背景

  • 场景一:近期,我们接到一些演示项目需求,要求是代码简洁体积小,可方便拷贝在任何电脑上带走演示。
  • 场景二:在项目进行的过程中我们会遇到前后端进度不一致或者数据库无真实数据的情况,这时候为了不耽误自身进度,在与后端明确好数据结构后,我们需要在前端制作些模拟数据来渲染前端页面,调整前端样式。

二、mockjs 使用流程

① 安装 mockjs

  • npm install mockjs

② 配置 mock

  • 在 src 目录下新建 mock 文件夹,里面新建 index.js 文件

image.png

  • 在 index.js 文件内进行相应配置

image.png

  • 在 src 目录下 api 文件夹下新建 mockAjax.js ,用于拦截转发 ajax 请求,其中的 baseURL 由 api 变为 mock

image.png

image.png

③ 使用 mockServer

  • 在需要使用的请求文件里引入、使用

image.png

  • 当需要换成真实请求时,只需要修改引入的文件,其他都不需要修改

image.png