html网页中使用mock,Vue中使用mock.js

mock.js生成随机数据，拦截 Ajax 请求返回模拟的响应数据，让前端攻城师独立于后端进行开发。

开始使用吧。

1.npm下安装

1 npm install mockjs --save

2.在vue项目中创建mock.js

在mock.js中引入mockjs，添加一个login的接口如下：

1 import Mock from ‘mockjs‘

2

3 Mock.mock(‘/api/login‘,4 {5 ‘message‘: ‘success‘

6 }7 )

在使用mock.js的页面中引入mock.js，另外使用axios进行请求，因此也要引入

1 import axios from ‘axios‘

2 import ‘@/mock/mock‘

使用方法：

1 axios.get(‘/api/login‘)2 .then(res =>{3 console.log(res.data)4 })5 .catch(err =>{6 console.log(err)7 })

console显示如下：

3.为了更真实也可以给指定被拦截的 Ajax 请求的响应时间

在mock.js中添加

1 Mock.setup({2 timeout: 3000

3 })

可以看到刷新页面3s之后才有返回。

4.mock.js能支持各种格式的数据，参考官网 http://mockjs.com/

示例中/api/user就用mock.js模拟了随机返回几个用户信息列表的接口。

mock.js完整代码如下：

1 import Mock from ‘mockjs‘

2

3 Mock.setup({4 timeout: 1000

5 })6 Mock.mock(‘/api/login‘,7 {8 ‘message‘: ‘success‘

9 }10 )11

12 Mock.mock(‘/api/user‘,13 {14 ‘array|1-10‘: [15 {16 ‘name‘: [email protected],17 ‘age|20-40‘: 25,18 ‘gender|1‘: [‘male‘, ‘female‘]19 }20 ]21 }22 )

注：这样的写法就是导入时执行该js文件，先让mock的接口生效，后面才能对ajax进行拦截

原文：https://www.cnblogs.com/jyughynj/p/12177279.html