【Mockjs】Vue中使用Mockjs，语法规范，常用方法

最新推荐文章于 2024-08-13 17:03:54 发布
最新推荐文章于 2024-08-13 17:03:54 发布
阅读量1.4k 收藏 8
点赞数 3
分类专栏： vue 数据交互 文章标签： Mockjs vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42345108/article/details/118314466
版权

这篇文章是学习Mockjs的一些实践和个人笔记，文章又臭又长请多担待😊

目录

1.在Vue中使用Mockjs

1.安装

安装mockjs和ajax，输入指令，使用npm安装
npm install mockjs
npm install axios
在这里插入图片描述

2.创建

在src目录下创建mock目录，添加index.js文件
在这里插入图片描述

3.引入

在main.js中引入mockjs，实践证明要引入mock下面的index，直接引入mock目录会拦截不到请求
require('@/mock/index')
*图片参考
在这里插入图片描述

4.添加代码

（1）mock.js

// 引入mock文件
require('./userapi')
// 以下可以做一些通用的配置
const Mock = require('mockjs')
// 设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
  timeout: 0 - 300
})

（2）userapi.js
***Mock.mock(url, method, option) 根据数据模板生成模拟数据。参数解释：1.第一个参数url表示要拦截的请求；2.第二个参数method表示请求的方法GET、POST、PUT等；3.第三个参数表示作为响应返回的数据。

const Mock = require('mockjs')
const R = Mock.Random // Random工具类，生成各种随机数据
// 生成数据
const data = () => {
    // 生成只有id的长度为20的userList
  const res = Mock.mock({
    'userList|20': [{
      'id|+1': 1
    }]
  })
  // 往userList中添加username属性
  res.userList.map((val, index) => {
    val.username = R.cname()
    return val
  })
  return res
}
// 拦截请求，一般情况下尽量使用正则表达式
Mock.mock('/api/userList', 'get', data)

（3）组件中请求接口

<template>
  <div class="hello">
    <button @click="getData">获取数据</button>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  methods: {
    getData () {
      axios.get('/api/userList').then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>
</style>

5.查看返回数据
mock使用成功~
在这里插入图片描述

其他接口也是跟/api/userList一样的 方法写到Mock.mock()就可以了，如下面这个接口

const data2 = () => {
  const res = {
    msg: '请求成功',
    code: 0,
    time: R.datetime()
  }
  return res
}
// mock登录接口
Mock.mock('/api/login', 'post', data2)

2.语法规范 - 数据模板定义

1.数据模板介绍

数据模板中的每个属性由3部分构成：属性名、生成规则（选填）、属性值
'name|rule': value // '属性名|规则: 属性值'

2.规则

总的有7中格式，含义根据value属性值的类型决定：

'name|min-max': value 
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

（1）‘name|min-max’: value

属性为Number：生成min-max区间的数字

// -----------代码
Mock.mock({
    'list|5': [{
      'count|1-10': 1
    }]
  })
// -----------结果
{
    "list":[
        {"count":7},
        {"count":6},
        {"count":3},
        {"count":5},
        {"count":9}
    ]
}

属性为String：重复生成属性值，重复次数在min-max区间内

// ----------代码
Mock.mock({
    'list|5': [{
      'count|1-5': 'a'
    }]
})
// ----------结果
{
    "list":[
        {"count":"aaaa"},
        {"count":"aa"},
        {"count":"aa"},
        {"count":"aaa"},
        {"count":"aaa"}
    ]
}

属性值为Boolean：随机生成布尔值，生成value的概率是min/(min+max)，生成!value的概率是max/(min+max)

// ---------代码
Mock.mock({
    'list|5': [{
      'count|1-5': true
    }]
})
// ---------结果
{
    "list":[
        {"count":false},
        {"count":true},
        {"count":false},
        {"count":false},
        {"count":false}
    ]
}

属性值为Object：在提供的属性值object中随机选择某些属性，属性个数在min-max区间内

// ---------代码
Mock.mock({
    'list|5': [{
      'count|1-5': {
        name: 'wsq',
        age: 24,
        id: 26,
        case: 1,
        work: '前端'
      }
    }]
})
// -------结果
{
    "list":[
        {"count":{"case":1}}, // 1个属性
        {"count":{"age":24,"case":1}}, // 2个属性
        {"count":{"id":26,"name":"wsq","case":1,"work":"前端","age":24}}, // 5个属性
        {"count":{"age":24}}, // 1个属性
        {"count":{"age":24,"case":1}} // 2个属性
    ]
}
``
属性值为`Array`：随机重复n次数组，组成新的数组，重复次数在min-max区间内
```javascript
// ---------代码
Mock.mock({
    'list|5': [{
      'count|1-5': ['a', 'b']
    }]
})
// ------------结果
{
    "list":[
        {"count":["a","b","a","b","a","b","a","b"]},
        {"count":["a","b","a","b"]},
        {"count":["a","b"]},
        {"count":["a","b"]},
        {"count":["a","b","a","b"]}
    ]
}

（2）‘name|count’: value

属性值为·String·：重复生成count个属性值

// --------代码
Mock.mock({
    'list|5': [{
      'count|5': 'a'
    }]
  })
// --------结果
{
    "list":[
        {"count":"aaaaa"},
        {"count":"aaaaa"},
        {"count":"aaaaa"},
        {"count":"aaaaa"},
        {"count":"aaaaa"}
    ]
}

属性值为Boolean：随机生成布尔值，true的概率为1/2，false的概率为1/2

属性值为Array：重复生成count次数组，组成一个新数组
// -----------代码
Mock.mock({
    'list|5': [{
      'count|5': ['a', 'b']
    }]
})
// ------------结果
{
    "list":[
        {"count":["a","b","a","b","a","b","a","b","a","b"]},
        {"count":["a","b","a","b","a","b","a","b","a","b"]},
        {"count":["a","b","a","b","a","b","a","b","a","b"]},
        {"count":["a","b","a","b","a","b","a","b","a","b"]},
        {"count":["a","b","a","b","a","b","a","b","a","b"]}
    ]
}

（3）‘name|min-max.dmin-dmax’: value

属性值为Number：生成浮点类型数，整数部分在min-max区间，小数部分保留的小数个数为dmin-dmax区间

// ----------代码
Mock.mock({
    'list|5': [{
      'count|1-5.1-5': 1
    }]
  })
// ----------结果
{
    "list":[
        {"count":4.56},
        {"count":3.816},
        {"count":4.1},
        {"count":4.55056},
        {"count":4.414}
    ]
}

（4）‘name|min-max.dcount’: value

属性值是Number：生成浮点类型数字，整数部分在min-max区间，小数部分保留dcount位小数

// ---------代码
Mock.mock({
    'list|5': [{
      'count|1-5.3': 1
    }]
  })
// -----------结果
{
    "list":[
        {"count":4.718},
        {"count":2.496},
        {"count":3.576},
        {"count":2.294},
        {"count":2.616}
    ]
}

（5）‘name|count.dmin-dmax’: value

属性值是Number： 整数部分固定是count，小数部分保留的位数在dmin-dmax区间

// -------------代码
Mock.mock({
    'list|5': [{
      'count|3.1-3': 1
    }]
  })
// -------------结果
{
    "list":[
        {"count":3.39},
        {"count":3.3},
        {"count":3.93},
        {"count":3.42},
        {"count":3.72}
    ]
}

（6）‘name|count.dcount’: value

属性值是Number：整数部分固定是count，小数部分保留dcount位数

// -----------代码
Mock.mock({
    'list|5': [{
      'count|3.3': 3
    }]
  })
// ------------结果
{
    "list":[
        {"count":3.448},
        {"count":3.602},
        {"count":3.776},
        {"count":3.528},
        {"count":3.787}
    ]
}

（7）‘name|+step’: value

属性值是Number：生成步长为step的连续数字

// -----------代码
Mock.mock({
    'list|5': [{
      'count|+2': 1
    }]
  })
// ------------结果
{
    "list":[
        {"count":1},
        {"count":3},
        {"count":5},
        "count":7},
        {"count":9}
    ]
}

3.语法规范 - 数据占位符定义

1.官方文档提示注意事项：

1.用@来标识其后的字符串是占位符；
2.占位符引用的是Mock.Random中的方法；
3.通过Mock.Random.extend()开扩展自定义占位符；
4.占位符也可以引用 数据模板 中的属性；
5.占位符会优先引用 数据模板 中的属性。

1.实例

// -----------代码
Mock.mock({
    'list|5': [{
      'name': '@CNAME',
      'first': '@FIRST'
    }]
  })
  
// ---------结果
{
    "list":[
        {"name":"龚丽","first":"Angela"},
        {"name":"罗娟","first":"Susan"},
        {"name":"黎敏","first":"Ruth"},
        {"name":"冯平","first":"Kevin"},
        {"name":"李秀英","first":"James"}
    ]
}

4.Mock.Random

const R = Mock.Random;

1.Basic

1.boolean

无参数：表示true和false出现的概率都为50%
有参数：Random.boolean(min, max, cur) 表示cur出现的概率是min/(min+max)，!cur出现的概率为max/(min+max)

// 无参数
 R.boolean(), // 等价于'boolean': '@BOOLEAN'
// 有参数，true出现的概率是1/10，false出现的概率为9/10
 R.boolean(1, 9, true),

2.natural

无参数：生成随机自然数（大于等于0的整数）
有参数：生成区间内的自然数

// 无参数，生成0-907199254740092之间的整数
R.natural(), // 等价于@NATURAL
// 有参数，生成1-20之间的整数
R.natural(1, 20)

3.integer

无参数：生成随机整数
一个参数min：生成大于min的整数
两个参数min，max：生成min-max区间内的整数

// 无参数，生成-9007199254740092 - 9007199254740092之间的整数
R.integer(), // 等价于'integer1': '@INTEGER'
// 一个参数，表示最小值，生成大于此参数的整数
R.integer(20),
// 两个参数，表示区间，生成区间内的整数
R.integer(20, 60)

4.float

无参数：生成随机浮点数，取值范围-9007199254740092 - 9007199254740092
一个参数min：生成大于min的浮点数
两个参数min，max：生成min-max区间的浮点数
三个参数min，max，dmin：整数部分取值区间，小数部分位数的最小值
四个参数min，max，dmin，dmax：整数部分取值区间，小数部分位数的最小值和最大值

R.float(), // 等价于'float1': '@FLOAT'
R.float(0), // min
R.float(0, 50), // 区间
R.float(0, 50, 2), // 区间，小数部分的位数最小值
R.float(0, 50, 2, 4) // 区间，小数部分位数的最小值和最大值

5.chacter

无参数：生成随机字符
一个参数：在参数字符串中随机抽取一个字符
内置参数（lower、upper、number、symbol）
lower：‘abcdefghijklmnopqrstuvwxyz’
upper：‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’
number：‘0123456789’
symbol：’!@#$%^&*()[]’

R.character(), // 等价于'character1': '@CHARACTER'
R.character('wadaeedc'),
R.character('lower'), // 从'abcdefghijklmnopqrstuvwxyz'中取
R.character('upper'), // 从'ABCDEFGHIJKLMNOPQRSTUVWXYZ'中取
R.character('number'), // 从'0123456789'中取
R.character('symbol') // 从'!@#$%^&*()[]'中取

6.string随机字符串

无参数：生成随机字符串
一个参数length：生成指定长度的字符串
两个参数min，max：生成min-max长度的字符串
三个参数pool，min，max：在pool池中生成min-max长度的字符串

R.string(), // 等价于'string1': '@STRING'
R.string(3), // 生成长度为4的字符串
R.string(3, 5), // 生成3-5位长度的字符串
R.string('abcd', 3), // 在指定字符串中生成长度为3的字符串
R.string('lower', 3, 5), // 在内置lower字符串中生成3-5位长度的字符串
R.string('upper', 3, 5), // 在内置upper字符串中生成3-5位长度的字符串
R.string('number', 3, 5), // 在内置number字符串中生成3-5位长度的字符串
R.string('symbol', 3, 5) // 在内置symbol字符串中生成3-5位长度的字符串

7.range整型数组

一个参数stop：生成从0-stop，步长为1的整型数组
两个参数start，stop：生成从star-stop步长位1的整型数组
三个参数start，stop，step：生成start-stop步长为step的整型数组

R.range(10), // 等价于'range1': '@RANGE(10)'
R.range(2, 6), // [2, 3, 4, 5]
R.range(0, 10, 2) // [0, 2, 4, 6, 8]

8.date生成随机日期

无参数：生成默认只有年月日的日期2015-06-02
有参数format：日期格式化字符串

R.date(), // 等价于'date1': '@DATE' {date1: "2015-06-02"}
R.date('yyyy-MM-dd HH:mm:ss') // "1986-11-13 21:28:14"

9.time生成随机时间

无参数：17:17:05
有参数format

R.time(), // 等价于'time1': '@TIME' 17:17:05
R.time('A HH:mm:ss'), // PM 12:48:52
R.time('a HH:mm:ss') // am 07:50:58

10.datetime日期时间

无参数： 1982-08-06 07:08:01
有参数format

R.datetime(), // 等价于'datetime1': '@DATETIME' 1982-08-06 07:08:01
R.datetime('yyyy-MM-dd A HH:mm:ss') // 2011-09-25 PM 14:06:35

11.now当前日期时间

无参数：2021-06-28 17:04:01
有参数format
内置参数year、month、week、day、hour、minute、second、week

R.now(), // 等价于'now1': '@NOW' 2021-06-28 17:04:01
R.now('year'), // 今年的第一天 2021-01-01 00:00:00
R.now('month'), // 本月的第一天 2021-06-01 00:00:00
R.now('week'), // 本周的第一天 2021-06-27 00:00:00（星期日）
R.now('day') // 今天的初始时间 2021-06-28 00:00:00

2.Image

1.image

无参数：生成随机大小的图片
一个参数size：指定图片大小
两个参数size，background：指定图片大小和背景颜色
三个参数size，background，text：指定图片大小、背景颜色、文字
四个参数size，background，color，text：指定图片大小、背景颜色、文字颜色、文字内容
五个参数size，background，color，type，text：图片大小、背景颜色、文字颜色、保存图片格式（png、jpg、gif）、文字内容

R.image(), // http://dummyimage.com/336x280
R.image('200x315'), // 指定大小 http://dummyimage.com/200x315
R.image('200x315', '#41B883'), // 指定背景颜色 http://dummyimage.com/200x315/41B883
R.image('200x315', '#41B883', '#FFFFFF', '文字'), // 指定文字和文字颜色https://dummyimage.com/200x315/41B883/FFFFFF&text=%E6%96%87%E5%AD%97
R.image('200x315', '#41B883', '#FFFFFF', 'jpg', '文字') // 指定图片格式http://dummyimage.com/200x315/41B883/FFFFFF.jpg&text=%E6%96%87%E5%AD%97

2.dataImage

无参数：生成base64图片编码，图片自带随机的背景颜色，尺寸随机
一个参数size：指定图片大小
两个参数：指定图片大小和内容文字

R.dataImage(), // "data:image/png;base64,iVBORw0KGgoAAAANSUhE...
R.dataImage('200x145'), // 指定大小
R.dataImage('200x145', '图片内容') // 指定大小和文字内容

3.color

1.color

随机生成16进制颜色

    'color': R.color() // "#f2a179"

4.Helpers

1.capitalize（word）

参数必带，将参数word的第一个字母转为大写

R.capitalize('hello') // "Hello"

2.upper（str）

将字符串str全部转为大写

R.upper('hello') // "HELLO"

3.lower(str)

将字符串str转为小写

R.lower('HeLLo') // "hello"

4.pick(arr)

从数组arr中随机选取一个元素返回

R.pick(['h', 'e', 'l', 'l', 'o']) // "h"

5.shuffle(arr)

打乱数组中的元素并返回

R.shuffle(R.range(5)) // [1, 0, 2, 4, 3]

5.Text

1.paragraph

随机生成一段文本

R.paragraph() // 随机生成一段文本，包含空格

2.sentence

随机生成一个句子，第一个字母大写，默认单词个数12-18
传一个参数len：句子中单词的个数，取值12-18
传两个参数min，max：单词个数的范围，取值在12-18之间

R.sentence()

3.word

无参数：随机生成单词
一个参数len：指定单词的长度
两个参数min，max：指定单词长度的范围

R.word(), // "ilru"
R.word(5), // "kfhst"指定单词的长度
R.word(1, 3) // 1-3个字符长度

4.title

无参数：随机生成一个标题（每个单词首字母大写）
一个参数len：指定单纯你的个数
两个参数min，max：指定单词个数的范围

R.title(), // "Khwye Difhmul Zpiwnsgn Pkdssteic"
R.title(3), // "Rxe Bjcfwkqdcw Gwvdbob"指定标题中单词的个数
R.title(2, 3), // 指定单词个数的范围2-3个单词

6.Name

1.first

随机生成一个常见的英文名

R.first() // "Richard"

2.last

随机生成一个常见的英文姓

R.last() //  "Robinson"

3.name

无参数：随机生成一个常见的英文姓名
有参数middle，值为布尔类型，表示是否生成中间名

R.name(), // "Carol Lee"
R.name(true) // "Carol Kenneth Hall"

4.cname

无参数：随机生成2位或3位中文名
有参数len，值为2或3，表示生成姓名的位数

R.cname(), // "顾秀英"
R.cname(2) // "曾艳"

7.Web

1.url

随机生成一个url

R.url() // "nntp://sjjwczmy.bj/kufw"

2.domain

随机生成一个域名

R.domain() // "enumu.no"

3.email

随机生成一个邮箱地址

R.email() // "h.pdvopio@njhp.my"

4.ip

随机生成一个ip地址

R.ip() // "215.50.135.148"

5.tld

随机生成一个顶级域名

R.tld() // "kh"

8.Address

1.region

随机生成一个（中国大区）

R.region(), // "华南"

2.province

随机生成一个省（或直辖市、自治区、特别行政区）

R.province() // "广东省"

9.其他

1.guid

随机生成一个guid

R.guid() // "d32aa8Ed-FdEF-Ed5b-b9FF-a9d38786Bd68"

2.id

随机生成一个18位身份证

R.id() // 随机生成一个18位身份证"350000201605258241"

5.Demo

LearnMock-git

sqwu
关注
专栏目录
mockjs入门必看教程
Hu153155的博客
03-21 2121
mockjs的作用 1.拦截ajax请求 2.生成随机数据 常应用于当前端开发，程序员写好了接口文档，但还没有实现接口文档，先自己造数据，模拟后端，开发前端的功能，等后端接口都做好后，和后端联调，更改baseURL 实现切换接口服务器。 第一步安装 进入黑窗口，进到自己项目的目录里，输入npm i mockjs -D，安装完毕就ok了 第二步引入 在src目录下新建mock目录并创建mock.js，然后定义mock.js // 导入mockjs import Mock from 'mockjs'; Mock
vue3 使用mockjs
weixin_45044818的博客
04-04 3476
背景 在如今的项目开发中，基本上使用的都是前后端分离的开发模式，前后端在开发前会约定一份开发文档，规定接口的结构。如果后端接口没有写好或者没有环境可以让你去调用这个接口，如果这时，什么都不做，也会影响开发的一个效率，所以前端可以使用mock来模拟接口请求。本文章在vue-cli3项目中配置mock。 安装mock npm install mockjs --save 配置mock 在项目的src下创建一个mock文件夹，mock文件夹里面的文件如图所示 _createMock.ts文件查找到当前目录下的所有
mock.js使用教程
热门推荐
meteorites的博客
08-15 1万+
     相信很多人看过mock.js官方教程， 都比较懵逼，对于前端来说只是在后端没有给接口的时候做一个简单的测试。所以我在这里给大家做简单的一个示范，告诉你如何使用。   cdn引入文件 ：&lt;script src="http://mockjs.com/dist/mock.js"&gt;&lt;/script&gt; 示例一： Mock.mock('http://www.bai...
mock.js的简单使用~
最新发布
m0_62626838的博客
08-13 1688
可以通过mock来模拟后端接口，可随机生成所需数据，模拟对数据的增删改查。并且截Ajax请求不需要修改既有代码就可以拦截，返回模拟的响应数据。2、在src目录下创建mock目录，定义mock主文件index.js，并在该文件中存放我们的mock数据。第三个参数是生成的数据，作为响应数据返回。mock.js:是一款模拟数据生成器，可以生成随机数据，拦截 Ajax 请求.3、在main.js引入mock文件，方便在其他文件中使用。4、在mock文件夹的index文件中定义mock数据。3、mock的使用。
mock.js 教程
爱睡的虫虫
03-27 1505
一、Mock.js的功能： ①基于数据模板生成数据 ②基于HTML模板生成数据 ③拦截并模拟ajax请求 二、Mock.js的安装： ① 下载mock.js文件 <script type="text/javascript" src="http://mockjs.com/bower_components/mockjs/dist/mock.js"></script> ② np...
mock.js简单教程
wingsb的博客
10-19 842
一、mockjs官网 mock.js 二、使用步骤 1.安装mock npm install mockjs 2.安装完成后，在main.js中引入 // 导入静态文件给全局使用 require(’./mock/mock.js’) 3.封装mock，在该路径下\src\mock\mock.js，创建mock.js。这里的路径和文件可以自己命名。 4.封装mock.js的代码： import Mock from 'mockjs'; import jsonData from './jsonData.js';//数
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
11-30
使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。 其主要功能是： 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 ...
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
07-06
适用人群：想要了解 Vue3 新语法以及项目的，想要查看如何引入 Element-Plus 库及 Mockjs 的假数据如何使用及引入语法的, 想要基于已经成功引入这些组件的基本工程，来事件新的 Vue3 demo 的； 其他说明：里面用的...
Mock.js在Vue项目中的使用
m0_67403073的博客
08-02 493
这里是小飞侠Pan??，立志成为一名优秀的前端程序媛！！！本篇博客收录于我的github前端笔记仓库中，持续更新中，欢迎star~??httpsvalue属性值是字符串Stringstring通过重复string生成一个字符串，重复次数大于等于min，小于等于max。string通过重复string生成一个字符串，重复次数等于count。属性值是数字Numberstring通过重复string生成一个字符串，重复次数大于等于min，小于等于max。//...
Vue项目中的mock.js的使用以及基本用法和ES6的新增方法
m0_62019369的博客
10-29 5392
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。官网注：easy-mock，一个在线模拟后台的数据平台。
mock.js 离线教程
06-20
mock.js 离线教程
mockjs的入门 基本用法
12-27
适用于前后端分离，往往在后端同学接口还没有做好的时候，前端同学不能干等着呀，所以就需要虚拟接口上场啦^-^
vue-cli3中使用mock（实际项目中快速搭建）
10-27
模块化配置mock,结合mock-api,axios,可应用于实际项目中；前后端分离开发之后，有了mock就可以不用等后端的接口完成后调用接口，前端可以自行模拟接口数据，快速开发。
vue-cli3使用mock数据的方法分析
10-15
主要介绍了vue-cli3使用mock数据的方法,结合实例形式分析了vue-cli3使用mock数据的相关实现方法与操作注意事项,需要的朋友可以参考下
Mock.js入门教程
08-22 597
1.什么是Mock.js? 生成随机数据，拦截 Ajax 请求。 通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 2.安装 使用npm安装:npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock
Mock.js入门
weixin_49092012的博客
05-11 319
什么是mock.js? Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立 于后端进行开发，帮助编写单元测试。提供了以下模拟功能： 1,根据数据模板生成模拟数据 2,模拟 Ajax 请求，生成并返回模拟数据 3,基于 HTML 模板生成模拟数据 Mock.js具有以下特点： 前后端分离,让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据，模拟各种场景。 开发无侵入 不需要修改既有代码，就可以拦截 Ajax 请.
VueCLI+Webpack下使用MockJS模拟后端数据实战教程
在Vue项目开发中，特别是在前后端分离的场景下，前端开发者常常需要在后端API未完成之前使用模拟数据进行开发。Vue CLI结合Webpack提供了一种便捷的方式，通过Mock.js来生成和拦截模拟的后端数据。Mock.js是一个强大...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值