vue中mock如何定义登录接口
时间: 2024-05-16 19:14:11 浏览: 7
在 Vue 中使用 Mock.js 来模拟登录接口可以按照以下步骤进行:
1. 安装 Mock.js
在终端中输入以下命令进行安装:
```
npm install mockjs --save-dev
```
2. 在 main.js 中引入 Mock.js
```
import Mock from 'mockjs'
```
3. 编写登录接口 Mock 数据
在单独的 JS 文件中编写 Mock 数据,例如在 `mock/login.js` 中编写:
```
import Mock from 'mockjs'
Mock.mock('/api/login', 'post', (options) => {
const data = JSON.parse(options.body)
if (data.username === 'admin' && data.password === '123456') {
return {
code: 200,
message: '登录成功!',
token: Mock.Random.guid()
}
} else {
return {
code: 401,
message: '用户名或密码错误!'
}
}
})
```
4. 在 main.js 中引入 Mock 数据
```
import './mock/login'
```
5. 在登录页面中请求 Mock 接口
在 `login.vue` 中使用 axios 请求登录接口:
```
import axios from 'axios'
axios.post('/api/login', {
username: 'admin',
password: '123456'
}).then(res => {
console.log(res)
})
```
这样就可以在 Vue 中使用 Mock.js 模拟登录接口了。