mockjs 官网: mockjs.com
安装
进入项目目录使用 npm 安装
npm install mockjs -D
安装好以后在 package.json 中可以看到相关依赖
"devDependencies": { ... "mockjs": "^1.0.1-beta3", ...
使用
在 src 文件夹下创建名为 mock.js 文件, 根据接口文档编写数据接口以及配置数据, mock.js 中代码如下
import Mock from 'mockjs' const Random = Mock.Random console.log(Random) // Login Mock.mock('/api/login', 'post', (option) => { let { username, password } = JSON.parse(option.body) console.log(username, password) return (username === 'admin' && password === '123456') })
在 main.js 引入 mock.js
import Vue from 'vue' import App from './App.vue' import './mock.js' new Vue({ render: h => h(App) }).$mount('#app')
在 Vue 组件中, 如 Login.vue 中请求数据
<script> export default { methods: { login () { this.axios.post('/api/login', { username: this.username, password: this.password }).then((res) => { console.log(res.data) if (res.data) { this.$router.push('home') } else { this.text = '登录失败! ' this.snackbar = true } }) } } } </script>
在登录页面上操作, 如果输入用户名: admin 和密码: 123456 登录成功, 输入其他登录失败, 则说明 mock 配置成功.
