Vue mockjs编写假数据并请求获取实现流程

Vue MockJS是一款用于前端mock数据的工具。其可以模拟请求API返回假数据，用于前端开发时进行数据调试、测试。本文将详细介绍Vue MockJS编写假数据并请求获取的实现流程。

1. 安装Vue MockJS

在使用Vue MockJS之前，需要确保在项目中已经安装了Vue，接着可以通过npm或yarn来安装Vue MockJS。

# 使用npm进行安装
npm install mockjs --save-dev

# 或者使用yarn进行安装
yarn add mockjs --dev

2. 编写假数据

在编写假数据之前，需要了解一些常用的MockJS语法，例如：

• @string: 随机生成字符串
• @number: 随机生成数字
• @boolean: 随机生成布尔值
• @date: 随机生成日期
• @image: 随机生成图片
• @paragraph: 随机生成文本
• @cname: 随机生成中文名字
• @url: 随机生成URL

在对假数据格式有了一定了解之后，可以开始编写假数据，例如：

// mockjs.js

import Mock from 'mockjs';

Mock.mock('/api/login', 'post', {
  'code': 200,
  'msg': '登录成功',
  'data': {
    'nickname': '@cname',
    'avatar': '@image("200x200")',
    'token': '@string(32)'
  }
});

上述代码定义了一个POST类型的API，当请求路径为/api/login时，返回如下JSON数据：

{
  "code": 200,
  "msg": "登录成功",
  "data": {
    "nickname": "张三",
    "avatar": "https://loremflickr.com/200/200",
    "token": "hHzHWMMYwwi56tmgWdeRQDGT04EZfT8o"
  }
}

在这个假数据中，@cname表示生成中文名字，@image("200x200")表示生成200x200大小的随机图片，@string(32)表示生成32位长度的随机字符串。

3. 发送AJAX请求获取假数据

使用Vue MockJS向后台请求数据的流程与正常请求数据的流程相同，只是前端需要手动拦截请求，然后使用MockJS返回预设数据。具体实现如下：

// main.js

import Vue from 'vue';
import axios from 'axios';
import Mock from 'mockjs';
import './mockjs.js';

Vue.prototype.$http = axios;

Mock.setup({
  timeout: 300
});

Vue.prototype.$mock = (url, data) => {
  return new Promise((resolve, reject) => {
    Mock.mock(url, data);
    axios.post(url, {}).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    });
  });
};

在上述代码中，我们添加了一个$mock方法用于发起AJAX请求获取假数据。该方法的实现如下：

1. 使用MockJS拦截请求，并返回预设数据。
2. 发起一个POST类型的AJAX请求，调用后端API。
3. 在请求结果返回时，使用Promise将数据返回给调用者。

使用方法如下：

// UserInfo.vue

export default {
  mounted() {
    this.$mock('/api/login', {}).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  }
};

在上述代码中，我们在UserInfo.vue组件mounted钩子函数中，模拟了一次登录请求，并将解析结果打印到控制台。

4. 示例应用

在这里，我们建立一个假的留言板应用。使用Vue MockJS实现向留言板提交留言、获取留言列表的假数据。

完整代码如下：

// main.js

import Vue from 'vue';
import axios from 'axios';
import Mock from 'mockjs';
import './mockjs.js';

Vue.prototype.$http = axios;

Mock.setup({
  timeout: 300
});

Vue.prototype.$mock = (url, data) => {
  return new Promise((resolve, reject) => {
    Mock.mock(url, data);
    axios.post(url, {}).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    });
  });
};

//App.vue

<template>
  <div class="app">
    <h1>留言板</h1>

    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">名字</label>
        <input id="username" type="text" class="form-control" v-model="username" required>
      </div>

      <div class="form-group">
        <label for="content">内容</label>
        <textarea id="content" class="form-control" v-model="content" required></textarea>
      </div>

      <button type="submit" class="btn btn-primary">提交留言</button>
    </form>

    <hr>

    <h2>留言列表</h2>

    <ul class="list-group">
      <li class="list-group-item" v-for="message in messages" :key="message.id">
        <h3>{{ message.username }}</h3>
        <p>{{ message.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      content: '',
      messages: [],
    };
  },

  mounted() {
    this.getMessages();
  },

  methods: {
    handleSubmit() {
      this.$mock('/api/messages', {
        'code': 200,
        'msg': '添加留言成功',
        'data': {
          'id': '@increment',
          'username': this.username,
          'content': this.content,
          'datetime': '@date'
        }
      }).then(() => {
        this.getMessages();
      }).catch((err) => {
        console.log(err);
      });
    },

    getMessages() {
      this.$mock('/api/messages', {
        'code': 200,
        'msg': '获取留言列表成功',
        'data|5-10': [{
          'id': '@increment',
          'username': '@cname',
          'content': '@paragraph(2)',
          'datetime': '@date'
        }]
      }).then((res) => {
        this.messages = res.data;
      }).catch((err) => {
        console.log(err);
      });
    },
  },
};
</script>

在上述代码中，我们使用$mock方法模拟了后端API，分别是提交留言和获取留言列表。同时，我们使用Vue的双向数据绑定机制实现向留言板提交留言，并在获取留言列表成功后展示留言信息。