详解在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时间日期和毫秒的相互转换
Feb 22 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
在angular 6中使用 less 的实例代码
May 13 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 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
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php 404错误页面实现代码
2009/06/22 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
python实现的jpg格式图片修复代码
2015/04/21 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python实现扫雷游戏
2020/03/03 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
人事主管的岗位职责
2013/11/16 职场文书
大家访活动实施方案
2014/03/10 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
学校百日安全活动总结
2015/05/07 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python