nuxt.js开发环境使用mockjs模拟数据

安装 mockjs

先安装依赖：

 yarn add mockjs -D

配置插件

在 plugins/mock.js 建立一个 mock 的插件，我们就在这里模拟数据：

const Mock = require('mockjs')Mock.mock(/\/user/, 'get', () => {return {'list|1-10': [{'id|+1': 1}]}
}
)Mock.mock(/\/info/, 'post', data => {console.log(data)return {'list|1-10': [{'id|+1': 1,name: '@cname'}]}
}
)

post 的时候带的 body 可以从 data.body 取出来。

在 nuxt.config.js 添加插件：

 plugins: ['@/plugins/mock'],

修改 xhr

如果直接使用会报：

request.upload.addEventListener is not a function

错误，这是因为 mock 自己封装了一个基于 XMLHttpRequest 的 MockXMLHttpRequest 对象。

找到 node_modules/mockjs/dist/mock.js 第 8035 行，在这之后添加一行：

 MockXMLHttpRequest.prototype.upload = createNativeXMLHttpRequest().upload

如图：

开始使用

现在就可以开始愉快的使用 mockjs 了！

nuxt.js开发环境使用mockjs模拟数据相关推荐

VUE开发环境下mock模拟数据与后端接口对接示例
在以往的前端开发中,前端严重依赖后端,必须等待后端接口开发出来才能继续开发.使用mock,可以使得前后端开发异步进行,互不影响.Mock.js 是一个模拟数据生成器,使用它可以拦截ajax请求,直接模 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数 ...
【MockJS】使用MockJS模拟数据（超级详细）
[MockJS]使用MockJS模拟数据 (超级详细) 文章目录 [MockJS]使用MockJS模拟数据 (超级详细) 2. MockJS 2.1 准备工作 2.2 语法规范数据模板定义规范 DT ...
vue 和 ssr+nuxt.js 配置环境变量以及pm2进行服务部署
前言 vue-ssr+nuxt.js开发的跨境电商的配置的项目环境变量. nuxt.js配置环境变量第一步:安装cross-env插件 npm install cross-env --save 第二 ...
【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111
032-尚硅谷-尚品汇-mockjs模拟数据官网链接第一步:安装依赖包mockjs 安装mockjs `npm install --save mockjs` 第二步:在src文件夹下创建一个文件夹 ...
vue实战-mockjs模拟数据
vue实战-mockjs模拟数据 1.在src目录下创建文件夹mock 2.将模拟的json格式的数据写入到文件夹中 banner.json [{"id": "1&quo ...
react使用mockjs模拟数据
react使用mockjs模拟数据废话少说,直接开始: mockjs简介生成随机数据,拦截 Ajax 请求注意:只能使用axios,fetch请求无法拦截官网:http://mockjs.co ...