Bootstrap

mock模拟接口测试 vue_vue-vue项目中mock.js的使用

mock.js

官网地址:mockjs.com/

mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据。fa8292157e4893f59bcdc9067e3299cf.png

使用方式

这里主要讨论在vue项目中,使用axios发送ajax请求,mock.js模拟数据的流程。

vue-cli搭建项目后,安装axios和mock.js

npm install -S axios

npm install -D mockjs

复制代码在项目中新建mock.js文件夹,来设置要产生的模拟数据的格式。

474ad2afb6b9ae713fa288d26d554bb8.png

3. 设想这样一个场景,页面在打开时要从数据库获取一个新闻列表,现在我们要模拟这个列表,新闻对象包括新闻标题、新闻内容和创建时间三项。

// mock.js

// 引入mockjs

const Mock = require('mockjs')

// 获取 mock.Random 对象

const Random = Mock.Random

;