详解在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代码
Nov 10 Javascript
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
JavaScript与函数式编程解释
Apr 27 Javascript
网上抓的一个特效
May 11 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
jQuery之动画效果大全
Nov 09 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 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/10/09 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python如何进行矩阵运算
2020/06/05 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
计算机专业应届生求职信
2014/04/06 职场文书
汽车专业求职信
2014/06/05 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
MySQL插入数据与查询数据
2022/03/25 MySQL