Vue 项目使用 mock.js

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 配置成功.