vue 使用 mock超级简单

自从有了mockjs，我们前端工程师再也不用等后端人员开发好之后再测数据了，因为mockjs可以拦截ajax请求，有了mockjs我们可以模拟后台返回数据，以方便的进行一系列的操作。接下来就介绍一下在项目中如何使用mockjs。

首先安装mockjs

npm install mockjs

src目录下创建一个mock.js 文件

import Mock from 'mockjs'

const Random = Mock.Random

// 登录
///api/login 请求地址
Mock.mock('/api/login', 'post', (option) => {
  let { username, password } = JSON.parse(option.body)
  return (username === 'admin' && password === 'admin')
})

// 用户数据
const userData = () => {
  let users = []
  for (let i = 0; i < 10; i++) {
    let user = {
      'id': i + 1,
      'date': Random.date('yyyy-MM-dd'),
      'name': Random.cname(),
      'address': Mock.mock('@county(true)'),
      'phone': Mock.mock(/^1[0-9]{10}$/),
      'status': Random.integer(0, 1)
    }
    users.push(user)
  }
  return users
}
Mock.mock('/api/users', userData)

使用axios 请求mock

import axios from 'axios'

 axios.post('/api/login',{
                "username":'admin',
                 "password":'admin'
            }).then(res=>{
                console.log('res---',res)
            }).catch(res=>{
                console.log('err---',res)
            })

请求结果

image.png