详解在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 相关文章推荐
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
原生js实现购物车功能
Sep 23 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
substr()函数中文版
2006/10/09 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
讲解Python中的标识运算符
2015/05/14 Python
用pycharm开发django项目示例代码
2019/06/13 Python
OpenCV 边缘检测
2019/07/10 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
项目计划书范文
2014/01/09 职场文书
旷课检讨书大全
2014/01/21 职场文书
网络教育自我鉴定
2014/02/04 职场文书
生物制药专业求职信
2014/03/11 职场文书
三好学生事迹材料
2014/12/24 职场文书
全陪导游词开场白
2015/05/29 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
SpringBoot 集成Redis 过程
2021/06/02 Redis
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技