详解在vue-cli项目下简单使用mockjs模拟数据 - 行业资讯 - 肥雀云

<强>为什么要用mockjs

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

看了官方文档之后一脸懵逼,这些都是什么鬼吗? ? ? ? ?因此总结了一篇文章,来介绍mockjs的简单使用。

<强>首先搭建一个vue项目

不介绍了

<>强安装mockjs

　　　　　　npm安装mockjs——save-dev 　　　　

<>强启动项目

　　　　　　npm运行dev 　　　　

<>强创建mock.js文件

在src路径下创建mock.js文件
在main.js引入mock.js文件　　

　　
<强> mock.js使用
　　
在mock.js文件中写入测试代码
　　
此处箭头函数中的代码可以根据模拟的Git官网来进行修改随机数据及属性名称
　　　　//引入mockjs 　　const模拟=要求(“mockjs”)//获取模拟。随机对象　　const随机=Mock.Random;//使用mockjs模拟数据　　模拟。模拟(/api/数据,(要求,res)=比;{//当post或get请求到路/api/数据由时模拟会拦截请求并返回上面的数据　　让列表=[]; 　　(让我=0;我& lt;30;我+ +){ 　　让listObject={ 　　标题:随机的。csentence(5、10)//随机生成一段中文文本。　　公司:随机的。csentence (5、10), 　　attention_degree: Random.integer(100、9999),//返回一个随机的整数。　　照片:随机的。图像(114 x83 ', ' # 00405 d ', ' # FFF ', ' Mock.js ') 　　} 　　list.push (listObject); 　　} 　　返回{ 　　数据:列表　　} 　　}) 　　　　

　　
在xxxxx.vue文件中使用axios获取mock.js中的随机数据
　　　　　　从“axios”进口axios 　　　　出口默认{ 　　数据(){ 　　返回{ 　　数据:[] 　　} 　　}，　　安装:函数(){ 　　axios.get ('/api/数据”)。然后(res=比;{//get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致　　这一点。数据=https://www.yisu.com/zixun/res.data.data; 　　console.log (res.data);//在控制台中看到数据　　})。抓住(res=> { 　　alert('错误'); 　　}）　　}，　　方法:{ 　　　　} 　　} 　　　　

　　
& lt; template> & lt;/template>结构
　　

　　
效果展示
　　

　　
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
详解在vue-cli项目下简单使用mockjs模拟数据