Mock

Version
mockjs: 1.0.1-beta3

mock 生成随机数组, 数组内数据部分随机

let arr = Mock.mock({
  'array|4-111': [{
    'uid': '@natural(1, 100)',
    'username': '@word',
    'avatar': Random.image('200x200', '#ecc247', '#fff', 'png', 'A'),
    'email': 'admin@sg-ai.com',
    'permission': '@natural(1, 5)'
  }]
})

生成数组结果

{
  "array": [{
    "uid": 60,
    "username": "ksepels",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 1
  }, {
    "uid": 28,
    "username": "dqwsni",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 3
  }, {
    "uid": 48,
    "username": "ongutpmtb",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 4
  }, {
    "uid": 63,
    "username": "ekpgvg",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 3
  }, {
    "uid": 6,
    "username": "hprlhn",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 4
  }, {
    "uid": 11,
    "username": "hdoocljebn",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 1
  }, {
    "uid": 34,
    "username": "ftk",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 4
  }, {
    "uid": 19,
    "username": "tkkpi",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 3
  }, {
    "uid": 92,
    "username": "ricibvek",
    "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A",
    "email": "admin@sg-ai.com",
    "permission": 4
  }]
}

mock.js

import Mock from 'mockjs'

const Random = Mock.Random

let arr = Mock.mock({
  'array|4-111': [{
    'uid': '@natural(1, 100)',
    'username': '@word',
    'avatar': Random.image('200x200', '#ecc247', '#fff', 'png', 'A'),
    'email': 'admin@sg-ai.com',
    'permission': '@natural(1, 5)'
  }]
})

// get users
Mock.mock('/api/v1/admin/users', 'get', (option) => {
  return {
    status: true,
    data: {
      users: arr.array
    }
  }
})

// delete users
Mock.mock('/api/v1/admin/users', 'delete', (option) => {
  console.log('delete user ', option)
  let i = arr.array.filter((item, index) => {
    if (item.username === option) {
      return index
    }
  })
  console.log('arr: ', arr.array.length)
  arr.array.splice(i, 1)
  console.log('arr2: ', arr.array.length)
  return {
    status: true
  }
})

在 Vue 项目中使用

Install

进入项目目录使用 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 配置成功.