vue3.0 mock.js简单使用方法

前提：本项目已提前安装vue cli脚手架、并安装了router、axios具体安装方法百度，篇文章主要介绍vue利用mock.js模拟后台数据。

# 安装
npm install mockjs

main.js引入mock

require('./mock');

项目src新建mock目录，并新建index.js。

mock/index.js

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

另外，新建一个user.js模拟用户数据。

mock/user.js

const Mock = require('mockjs');
let userList = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|10': [{
    id: '@id', //随机id
    name: '@cname', //随机名称
    nickName: '@last', //随机昵称
    phone: /^1[34578]\d{9}$/, //随机电话号码
    'age|11-99': 1, //年龄
    address: '@county(true)', //随机地址
    email: '@email', //随机邮箱
    isMale: '@boolean', //随机性别
    createTime: '@datetime', //创建时间
  }]
})
export default {
  'get|/getUsers': option => {
    return {
      status: 200,
      message: 'success',
      data: userList
    };
  }
}

组件获取请求方法，首先新建一个AxiosGet.vue。

<template>
  <table>
    <th>ID</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>昵称</th>
    <th>手机</th>
    <th>邮箱</th>
    <th>地址</th>
    <tr v-for="user in users" v-bind:key="user">
      <td>{{user.id}}</td>
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>{{user.nickName}}</td>
      <td>{{user.phone}}</td>
      <td>{{user.email}}</td>
      <td>{{user.address}}</td>
    </tr>
  </table>
</template>

<script>
  import axios from 'axios'
  export default{
    data(){
      return{
        users:[]
      }
    },
    created() {
      axios.get('/getUsers')
      .then(response => {
        console.log(response.data.data);
        this.users=response.data.data.list
      })
      .catch(function (error) { // 请求失败处理
              console.log(error);
          });
    }
  }
</script>

<style>
</style>

设置好路由，启动服务器访问页面，渲染效果如下：