vue中使用Mock—简单易懂，3分钟掌握

序言

最近自己在写一些 demo ，在没有后端接口的情况下模拟登录页面跳转首页。于是就用到了 mock ，经过简单了解后实现了一个简单 mock 模拟登录请求。

mock 介绍

主要分以下4步就可使用 mock 数据了：

1. 下包 npm i mockjs --save，mockjs会自动拦截真实请求和定义的规则进行匹配返回对应数据
2. 定义 mock 规则

import Mock from 'mockjs'
// 脚手架会通过babel降级语法，js使用需要使用commonjs语法
// const Mock = require('mockjs')

Mock.mock('/mock/test', 'get', {
  message: 'success',
  data: ['数据1', '数据2', '数据3']
})

这里使用 Mock 最简单的语法，直接返回一个对象，相关文章很多，这里就不过多介绍。

3. 然后在页面中发送请求,这里使用 axiosnpm i axios --save

import axios from 'axios'
//....
hClick () {
      axios.get('/mock/test').then((res) => {
        console.log(res)
        this.list = res.data.data
      })
    }

4. 然后就可以获得如下数据

登录拦截的实现

首先我用的是 vue/cli 创建了一个 vue2 的 demo，使用 element-ui 创建一个简单的 form 表单

表单数据如下

data () {
    return {
      loginForm: {
        username: 'admin',
        password: '123123'
      }
    }
}，
method

然后在表单校验通过后，发送请求，获取mock 数据

hLogin () {
      this.$refs.loginForm.validate(async (valid) => {
        // 验证通过发送请求
        if (valid) {
          const res = await login(this.loginForm)
          if (res.data.code !== 200) {
            return this.$message.error(res.data.message)
          }
          // 登录成功跳转首页
          this.$router.push({ path: this.redirect || '/' })
          return this.$message.success(res.data.message)
        }
      })
    }

这里需要注意的是在 vue 项目中使用 mock 需要在main.js中导入，否则需要在单个组件中导入 Mock 和规则

• main.js中代码

// 导入 mock
import '../myMock'

• mock数据 myMock/index.js

import Mock from 'mockjs'
Mock.mock('/mock/login', 'post', (config) => {
    //需要注意返回的 json 格式数据
  const obj = JSON.parse(config.body)
  // 判断用户名密码
  if (obj.username === 'admin' && obj.password === '123123') {
    return {
      code: 200,
      message: '登录成功'
    }
  } else {
    return {
      code: 500,
      message: '用户名或密码错误'
    }
  }
})

总结

至此，就完成了一个登录功能的简单mock，当然也可以再返回一个 token 再本地缓存，这样更符合实际开发流程。当然这只是一个小demo优化的空间还很大，希望大家能用 mock 在没有后端接口的情况下更快的完成业务流程，然后痛快摸鱼[dog.emoj]。