详解在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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
微信小程序提交form操作示例
Dec 30 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
第八节--访问方式
2006/11/16 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
JavaScript 异步调用
2017/10/25 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
vue生命周期的探索
2019/04/03 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
深入分析python 排序
2020/08/24 Python
Python自动登录QQ的实现示例
2020/08/28 Python
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
重阳节简报
2015/07/20 职场文书
Python基础详解之邮件处理
2021/04/28 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL