Использование mock.js с Vue-cli

Vue.js
Использование mock.js с Vue-cli

1, Mock.js Перехват запрос AJAX, генерирует случайные данные

Чему я научился, я поделюсь по-своему.Во время разработки нам нужен бэкенд для предоставления API-интерфейса, а затем получить интерфейс для прохождения сгенерированных данных и рендеринга их на страницу для отображения. В некоторых случаях, когда интерфейс, предоставляемый серверной частью, не был получен, внешний интерфейс может сам имитировать серверную часть, чтобы создавать простые данные в формате json для разработки.

mock.js использует:Обратитесь к официальному сайту mock.js

1. Предварительные требования. После сборки проекта Vue-cli загрузите axios и mock.js.

Установить: npm установить mockjs axios

2. Чтобы имитировать данные, создайте новую фиктивную папку в каталоге src проекта, а затем создайте файл данных формата json xxx.json.

图一.png

3, создание MOCK MOCK MOCK MOCKSERVER.js ввела макет, тест издевательства, обратитесь к диаграмме

图二.png

4, чтобы изменить запрос на MOCK AJAX Path (BaseURL: '/ API' Измените его в «/ MOCK», на самом деле является исходным API)

图三.png

5. Внесите файл mockAjax.js в папку API index.js для тестирования.

图四.png

6. Это результат моего теста

图五.png

2. Mock.js быстро и легко имитирует данные, самый простой способ его использования.

1、还是先在脚手架中，下载axios和mock.js // npm install mockjs axios
2、然后在src目录中分别创建mock文件夹和index.js文件，并在main.js中引入 require('./mock/index');

3、开始模拟数据 （目录提示 --> 在src目录下的mock文件夹index.js文件中书写以下代码）

// 1、引入mockjs
const Mock = require('mockjs');

// 2、获取 mock.Random 对象
const random = Mock.Random;
console.log(random); // 简单使用就不操作了，需要操作的可以去看文档

// 3、基本用法 Mock.mock(url, type, data) // 参数文档 https://github.com/nuysoft/Mock/wiki
Mock.mock('/user/list', 'get', {
  code: 200,
  message: '成功',

  data: {
    // 生成十个如下格式的数据
    'list|10': [
      {
        'id|+1': 1, // 数字从当前数开始依次 +1
        'age|18-40': 20, // 年龄为18-40之间的随机数字
        'sex|1': ['男', '女'], // 性别是数组中随机的一个
        name: '@cname', // 名字为随机中文名字
        email: '@email', // 随机邮箱
        isShow: '@boolean', // 随机获取boolean值
      },
    ],
  },
});

4、在app.vue中请求数据，引入axios发送请求即可

<template>
  <div>app</div>
</template>

<script>
import axios from 'axios'; // 引入axios
export default {
  name: 'App',
  data() {
    return {};
  },

  mounted() {
    axios.get('/user/list').then((res) => {
      console.log(res);
    });
  },
};
</script>
<style scoped></style>

Результат запроса следующий:

8.png

Категории