MockJS模拟接口使用

MockJS 是一个用于生成模拟数据的 JavaScript 库，它可以帮助开发者快速生成各种类型的模拟数据，用于测试、填充界面或其他需要模拟数据的场景。以下是使用 MockJS 的基本步骤和示例：

这里使用Vue和axios为演示：

模板结构：

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
    <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
  </div>
</template>
<style scoped>
form {
  max-width: 300px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>

Script：

<script>
import Mock from 'mockjs';
import axios from 'axios';
export default {
  setup () {
    return {}
  },
  data () {
    return {
      username: '',
      password: '',
      errorMessage: ''
    };
  },
  methods: {
    login () {
      const apiUrl = '/api/login'; // 假设后端 API 端点
      // 使用 MokeJS 生成模拟的 API 响应数据
      Mock.mock('/api/login', 'post', {
        success: false,
        message: '登录成功',
        token: '@string("1234", 32)' // 生成一个随机的 token
      });
      axios.post(apiUrl, {
        username: this.username,
        password: this.password
      })
        .then(response => {
          // 处理后端返回的数据
          console.log(response.data);
          if (response.data.success) {
            // 登录成功，跳转到首页或执行其他操作
            alert('登录成功！欢迎回来！');
          } else {
            // 登录失败，显示错误消息
            this.errorMessage = response.data.message;
          }
        })
        .catch(error => {
          // 处理请求错误
          console.error('登录失败：', error);
          this.errorMessage = '登录失败，请重试。';
        });
    }
  }
}
</script>

Mock.js 提供了丰富的规则来生成各种类型的随机数据。以下是一些常用的 Mock.js 模拟数据规则示例：

基本规则

数字

Mock.mock({
  'number|1-100': 100
});
// 生成一个1到100之间的随机整数

字符串

Mock.mock({
  'string|1-10': '★'
});
// 生成一个包含1到10个星号的字符串

布尔值

Mock.mock({
  'boolean|1': true
});
// 生成一个随机的布尔值，true或false

数组

Mock.mock({
  'array|1-5': [1, 2, 3]
});
// 生成一个包含1到5个元素的数组，每个元素是1、2或3中的一个

对象

Mock.mock({
  'object|2': {
    'a': 1,
    'b': 2,
    'c': 3
  }
});
// 从对象中随机选择2个属性生成一个新的对象

函数

Mock.mock({
  'function': function() {
    return 'Hello, Mock.js!';
  }
});
// 使用函数生成数据

高级规则

生成随机日期

Mock.mock({
  'date': '@date("yyyy-MM-dd")'
});
// 生成一个随机的日期，格式为yyyy-MM-dd

生成随机图片

Mock.mock({
  'image': '@image("200x100", "#4A7BF7", "Hello Mock.js")'
});
// 生成一个200x100大小的随机图片，背景色为#4A7BF7，文字为Hello Mock.js

生成随机段落

Mock.mock({
  'paragraph': '@paragraph(3)'
});
// 生成3段随机的文本段落

生成随机姓名

Mock.mock({
  'name': '@cname'
});
// 生成一个随机的中文姓名

自定义规则

Mock.mock({
  'custom': {
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/
  }
});
// 使用正则表达式定义自定义规则

基本规则

高级规则

更多示例