Uso básico de simulacro en proyecto vue

1. Instale axios y simulacro.js

npm install mockjs --save
npm install axios --save

2. Cree la carpeta simulada.js

Cree una nueva carpeta simulada en el directorio src del proyecto para almacenar los archivos js configurados para generar datos de simulación. Por ejemplo, como se muestra en el cuadro rojo a continuación:

El contenido de bar.js es el siguiente:

// bar.js 文件
let Mock = require('mockjs');
const random = Mock.Random; // Mock.Random 是一个工具类，用于生成各种随机数据
let data = [];
for (let i = 0; i < 8; i++) { 
    let obj = {
        id: random.string(18,20),
        name: random.name(), 
       value: random.integer(60, 100),
    }
    data.push(obj)
}
Mock.mock('/api/mock/bar', data) // 后面讲这个api的使用细节

El contenido de pie.js es el siguiente:

// pie.js 文件
const Mock = require('mockjs');
let data = Mock.mock({
    'status': 200,
    'data|1-9': [{
        'key|+1': 1,
        'mockTitle|1': ['肆无忌惮'],
        'mockContent|1': ['角色精湛主题略荒诞', '理由太短 是让人不安', '疑信参半 却无比期盼', '你的惯犯 圆满', '别让纠缠 显得 孤单'],
        'mockAction|1': ['下载', '试听', '喜欢']
    }]
});
Mock.mock('/api/mock/pie', data);

El contenido de index.js es el siguiente (este archivo se utiliza aquí como archivo de entrada simulado):

// index.js 文件
require('./pie/pie');  //引入pie.js 文件
require('./bar/bar');  //引入bar.js 文件

# 3. Introduce el archivo de entrada simulado en main.js

// main.js 文件
import axios from 'axios' //引入axios
import qs from 'qs'        //引入qs
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.$qs = qs           //全局注册，使用方法为:this.$qs
require('./mock')  //引入 mock 入口文件

# 4. Llame al archivo .vue

Por ejemplo, en App.vue enviamos una solicitud de obtención para obtener datos.

<template>
  <div></div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      value: 0
    }
  },
  created () {
    this.getdata()
  },
  methods: {
    getdata() {
      this.$axios.get("/api/mock/bar", {            
            params: {id:1,name:'bs'}        
        }).then(res => {  // url即在 bar.js 中定义的
           console.log(res.data);
      }).catch(function(error) {
           console.log(error);
      });
      this.$axios.post("/api/mock/pie",{
        id:1,name:'bs'
      }).then(res => {  // url即在 pie.js 中定义的
           console.log(res.data);
      }).catch(function(error) {
           console.log(error);
      });
    }
  }
}
</script>
<style scoped>
</style>

La impresión es la siguiente:

# 5. Explicación adicional

• Mock.mock( rurl, rtype, plantilla|función( opciones ) )

• rurl: Opcional, indica la URL que necesita ser interceptada, que puede ser una cadena de URL o una URL normal. Por ejemplo '/domian/list.json'.

• rtype: opcional, indica el tipo de solicitud Ajax que debe interceptarse. Por ejemplo, OBTENER, PUBLICAR, PONER, BORRAR, etc.

• plantilla: opcional, representa la plantilla de datos, que puede ser un objeto o una cadena. Cada atributo en la plantilla de datos consta de 3 partes: nombre del atributo, regla de generación, valor del atributo

• ('nombre|regla': valor) nombre del atributo nombre, regla de generación regla, valor del atributo valor. Por ejemplo: 'nombre|1-10':1 generará un número entero entre 1-10; consulte el documento oficial para conocer las reglas detalladas

• función (opciones): opcional, que indica la función utilizada para generar datos de respuesta.

• Opciones: apunta al conjunto de opciones Ajax de esta solicitud, que contiene tres atributos: URL, tipo y cuerpo.

# 6. Parte del código de muestra.

import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
let data = [] // 用于接受生成数据的数组
for(let i = 0; i < 10; i ++) { // 可自定义生成的个数
  let template = {
    'Boolean': Random.boolean, // 可以生成基本数据类型
    'Natural': Random.natural(1, 10), // 生成1到100之间自然数
    'Integer': Random.integer(1, 100), // 生成1到100之间的整数
    'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
    'Character': Random.character(), // 生成随机字符串,可加参数定义规则
    'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
    'Range': Random.range(0, 10, 2), // 生成一个随机数组
    'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
    'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
    'Color': Random.color(), // 生成一个颜色随机值
    'Paragraph':Random.paragraph(2, 5), //生成2至5个句子的文本
    'Name': Random.name(), // 生成姓名
    'Url': Random.url(), // 生成web地址
    'Address': Random.province() // 生成地址
  }
  data.push(template)
}
Mock.mock('/data/index', 'post', req =>{
    console.log(req);
    return data;
}) // 根据数据模板生成模拟数据

let data = Mock.mock({
    'status': 200,
    'data|1-9': [{
        'key|+1': 1,
        'mockTitle|1': ['肆无忌惮'],
        'mockContent|1': ['角色精湛主题略荒诞', '理由太短 是让人不安', '疑信参半 却无比期盼', '你的惯犯 圆满', '别让纠缠 显得 孤单'],
        'mockAction|1': ['下载', '试听', '喜欢']
    }]
});
Mock.mock('/api/mock/pie','get' , req =>{
    console.log(req);
    return data;
}) ;