Vue篇--Mock.js基础使用方法(建议收藏)

什么是Mock.js?
mock.js是一款模拟数据生成器,生成随机数据,拦截Ajax请求

生成随机数据,拦截ajsx

安装:npm i mockjs -D

使用:

import Mock from 'mockjs'

Mock.mock(url,data)

官网网址:Mock.js

Mock.js的特点:

前后端分        

        让前端工程师独立于后端端进行开发。

增加单元测试的真实性

        通过随机数据,模拟各种场景。

开发无侵入

        不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。

用法简单

        符合直觉的接口。

数据类型丰富

        支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

方便扩展

        支持扩展更多数据类型,支持自定义函数和正则

安装和使用
安装步骤

Vue篇--Mock.js基础使用方法(建议收藏)_第1张图片

Vue篇--Mock.js基础使用方法(建议收藏)_第2张图片 

 

        window+r然后输入cmd按回车打开。(我的文件在f盘,如果在c盘可以直接cd /自己的文件名),步骤看下图

使用mock.js 

Vue篇--Mock.js基础使用方法(建议收藏)_第3张图片

 

 数据模板定义

String

Vue篇--Mock.js基础使用方法(建议收藏)_第4张图片

Number

Vue篇--Mock.js基础使用方法(建议收藏)_第5张图片

 

Boolean

Vue篇--Mock.js基础使用方法(建议收藏)_第6张图片

 

Object

Vue篇--Mock.js基础使用方法(建议收藏)_第7张图片

 

Array

Vue篇--Mock.js基础使用方法(建议收藏)_第8张图片

 

Function

Vue篇--Mock.js基础使用方法(建议收藏)_第9张图片

 

RegExp

Vue篇--Mock.js基础使用方法(建议收藏)_第10张图片

 

Path

Vue篇--Mock.js基础使用方法(建议收藏)_第11张图片

 

数据占位符定义

Basic

Vue篇--Mock.js基础使用方法(建议收藏)_第12张图片

 

Date

Vue篇--Mock.js基础使用方法(建议收藏)_第13张图片

 

Color

Vue篇--Mock.js基础使用方法(建议收藏)_第14张图片

 

Image

Vue篇--Mock.js基础使用方法(建议收藏)_第15张图片

代码示例: 

Vue篇--Mock.js基础使用方法(建议收藏)_第16张图片

Vue篇--Mock.js基础使用方法(建议收藏)_第17张图片

运行结果:

Vue篇--Mock.js基础使用方法(建议收藏)_第18张图片 

 

 

你可能感兴趣的:(javascript,vue.js,开发语言)