详解在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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 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下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
客户端静态页面玩分页
2006/06/26 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vue filters的使用详解
2018/06/11 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
Python 常用 PEP8 编码规范详解
2017/01/22 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
简单了解python的break、continue、pass
2019/07/08 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
python 怎样进行内存管理
2020/11/10 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
公司投资建议书
2014/05/16 职场文书
校园绿化美化方案
2014/06/08 职场文书
大学生助学金感谢信
2015/01/21 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
迎国庆主题班会
2015/08/17 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python