详解在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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
Python基于twisted实现简单的web服务器
2014/09/29 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
自荐书格式
2013/12/01 职场文书
自荐书模板
2013/12/15 职场文书
工作时间上网检讨书
2014/02/03 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
学校课外活动总结
2014/05/08 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript