mock.js的基本使用
时间: 2023-09-22 17:06:43 浏览: 167
Mock.js 是一个用于生成随机数据的 JavaScript 库,可以用于前后端分离开发中模拟接口数据,方便前端开发调试。
Mock.js 的基本使用步骤如下:
1. 安装 Mock.js 库
可以通过 npm 安装 Mock.js,命令如下:
```
npm install mockjs --save-dev
```
2. 编写模拟数据
在前端开发中,通常需要模拟后端接口的返回数据。使用 Mock.js 可以很方便地生成模拟数据。
示例代码:
```javascript
import Mock from 'mockjs'
// 模拟一个接口返回数据
Mock.mock('/api/user', {
'name': '@name', // 随机生成一个中文名字
'age|1-100': 100, // 随机生成一个 1-100 之间的数字
'gender|1': ['男', '女'], // 随机生成一个性别
'email': '@EMAIL', // 随机生成一个邮箱
'phone': /^1[3456789]\d{9}$/ // 随机生成一个手机号
})
```
3. 拦截 Ajax 请求
Mock.js 可以拦截 Ajax 请求,根据请求的 URL 和请求方法返回模拟数据。
示例代码:
```javascript
import Mock from 'mockjs'
// 模拟一个接口返回数据
Mock.mock('/api/user', {
'name': '@name',
'age|1-100': 100,
'gender|1': ['男', '女'],
'email': '@EMAIL',
'phone': /^1[3456789]\d{9}$/
})
// 拦截 Ajax 请求
Mock.mock('/api/user', 'get', {
code: 200,
message: 'OK',
data: Mock.mock('@user')
})
```
4. 使用模拟数据
在前端开发中,可以通过 Ajax 请求获取模拟数据,在页面上展示模拟数据。
示例代码:
```javascript
import axios from 'axios'
axios.get('/api/user')
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err)
})
```
以上是 Mock.js 的基本使用方法,还有更多高级用法,可以参考官方文档。
阅读全文