详解在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 相关文章推荐
js替代copy(示例代码)
Nov 27 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
vue构建动态表单的方法示例
Sep 22 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
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
php实现的通用图片处理类
2015/03/24 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
php生成微信红包数组的方法
2019/09/05 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
Python读写ini文件的方法
2015/05/28 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
Python合并多张图片成PDF
2021/06/09 Python