详解在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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
jquery实现数字输入框
Feb 22 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
Vue实现验证码功能
Dec 03 Javascript
js判断密码强度的方法
Mar 18 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
vue 组件简介
2020/07/31 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
理解Python中的With语句
2015/02/02 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python之list对应元素求和的方法
2018/06/28 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
入党自我鉴定
2014/03/25 职场文书
市场营销专业求职信
2014/06/17 职场文书
建筑学专业自荐书
2014/07/09 职场文书
物业管理交接协议书
2016/03/24 职场文书
Go timer如何调度
2021/06/09 Golang
python如何为list实现find方法
2022/05/30 Python