详解在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压缩混淆工具
May 16 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python实现大文件分割与合并
2019/07/22 Python
python实现简单图书管理系统
2019/11/22 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
家长会邀请书
2014/01/25 职场文书
秋天的图画教学反思
2014/05/01 职场文书
保险公司演讲稿
2014/09/02 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
体育委员竞选稿
2015/11/21 职场文书
销售会议开幕词
2016/03/04 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android