详解在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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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 循环列出目录内容的函数代码
2010/05/26 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
浅析return false的正确使用
2013/11/04 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
大学生如何写自荐信
2014/01/08 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2014年协会工作总结
2014/11/22 职场文书
2014司机年终工作总结
2014/12/05 职场文书
城南旧事电影观后感
2015/06/16 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python