详细解释在vue-cli项目下使用mockjs模拟数据的简单方法

为什么使用mockjs

在实际开发中，前端和后端是分离的，前端需要后端的接口来完成页面渲染，但不能等到后端成员写完接口后再开始测试。大多数情况下，前端和后端需要同时开发。因此，需要mockjs为后端接口模拟制造随机数据。

看完官方文件，我看起来很傻。这些到底是什么？因此，总结一篇文章来介绍mockjs的简单使用。

首先，建立一个vue项目

没有介绍

安装mockjs

NPM安装模拟js-save-dev启动项目

Npm运行dev创建mock.js文件

在src路径下创建mock.js文件，并在main.js中导入mock.js文件

使用mock.js

在mock.js文件中编写测试代码

这里，箭头函数中的代码可以根据mock的Git官方网站修改随机数据和属性名称

//引入mock js const mock=require(' mock js ')//获取mock。随机对象常量随机=模拟。随机；//使用Mockjs模拟数据mock.mock ('/api/data '，(req，RES)={//当post或get请求被路由到/api/data时，mock会拦截该请求并返回上述数据let list=[]；for(设I=0；i 30I){ let listobject={ title : random . csentence(5，10)，//随机生成一个中文文本。Company : random.csentence (5，10)，attention _ degree : random . integer(100，9999)，//返回一个随机整数。photo: Random.image('114x83 '，' #00405d '，' #FFF '，' mock . js ')} list . push(listObject)；}返回{ data : list } })

在…里