mockjs 官网: http://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 配置成功.
