详解在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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php str_replace的替换漏洞
2008/03/15 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
jQuery cdn使用介绍
2013/05/08 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python实现KNN分类算法
2019/10/16 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python通过文本和图片生成词云图
2020/05/21 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
运行Python编写的程序方法实例
2020/10/21 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
四种会话跟踪技术
2015/05/20 面试题
机电一体化职业规划书
2014/01/07 职场文书
七个Python必备的GUI库
2021/04/27 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL