详解在vue-cli项目下简单使用mockjs模拟数据


Posted in Javascript onOctober 19, 2018

为什么要用mockjs

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

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

首先搭建一个vue项目

不介绍了

安装mockjs

npm install mockjs --save-dev

启动项目

npm run dev

创建mock.js文件

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

详解在vue-cli项目下简单使用mockjs模拟数据

mock.js使用

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

此处箭头函数中的代码可以根据mock的Git官网来进行修改随机数据及属性名称

//引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random;
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
  let list = [];
  for(let i = 0; i < 30; i++) {
    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);
  }
  return {
    data: list
  }
})

详解在vue-cli项目下简单使用mockjs模拟数据

在xxxxx.vue文件中使用axios获取mock.js中的随机数据

import axios from 'axios'

export default {
   data() {
    return {
     data:[]
    }
   },
   mounted:function() {
    axios.get('/api/data').then(res => {//get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致
     this.data = res.data.data;
     console.log(res.data);//在console中看到数据
    }).catch(res => {
     alert('wrong');
    })
   },
   methods:{
     
   }
}

详解在vue-cli项目下简单使用mockjs模拟数据

<template></template>结构

详解在vue-cli项目下简单使用mockjs模拟数据

效果展示

详解在vue-cli项目下简单使用mockjs模拟数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 #Javascript
js中自定义react数据验证组件实例详解
Oct 19 #Javascript
值得收藏的八个常用的js正则表达式
Oct 19 #Javascript
深入理解移动前端开发之viewport
Oct 19 #Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 #Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 #Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 #Javascript
You might like
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
python实现Zabbix-API监控
2018/09/17 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
工程总经理工作职责
2013/12/09 职场文书
护士辞职信范文
2014/01/19 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
九一八事变演讲稿
2014/09/05 职场文书
服务明星事迹材料
2014/12/29 职场文书
小学中队活动总结
2015/05/11 职场文书