详解在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监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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 一元分词算法
2009/11/30 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python素数筛选法浅析
2018/03/19 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python集合常见运算案例解析
2019/10/17 Python
Python底层封装实现方法详解
2020/01/22 Python
Tensorflow 实现释放内存
2020/02/03 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
幼儿园小班教学反思
2014/02/02 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
导游词之凤凰古城
2019/10/22 职场文书
数据设计之权限的实现
2022/08/05 MySQL