Uso básico do projeto mock in vue

1. Instale axios e mock.js

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

2. Crie a pasta mock.js

Crie uma nova pasta simulada no diretório src do projeto para armazenar os arquivos js configurados para gerar dados de simulação. Por exemplo, conforme mostrado na caixa vermelha abaixo:

O conteúdo em bar.js é o seguinte:

// 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的使用细节

O conteúdo em pie.js é o seguinte:

// 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);

O conteúdo em index.js é o seguinte (este arquivo é usado como arquivo de entrada simulado aqui):

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

# 3. Insira o arquivo de entrada simulado em 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. Chame o arquivo .vue

Por exemplo, no App.vue enviamos uma solicitação get para obter dados

<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>

A impressão é a seguinte:

# 5. Explicação adicional

• Mock.mock( rurl, rtype, template|function(opções))

• rurl: Opcional, indicando a URL que precisa ser interceptada, que pode ser uma URL string ou uma URL regular. Por exemplo '/domian/list.json'.

• rtype: opcional, indicando o tipo de solicitação Ajax que precisa ser interceptada. Por exemplo, GET, POST, PUT, DELETE, etc.

• template: opcional, representa o template de dados, que pode ser um objeto ou uma string. Cada atributo no modelo de dados consiste em 3 partes: nome do atributo, regra de geração, valor do atributo

• ('name|rule': value ) Nome do atributo nome, regra de regra de geração, valor do valor do atributo. Por exemplo: 'name|1-10':1 irá gerar um número inteiro entre 1 e 10. Para regras detalhadas, consulte a documentação oficial.

• function(options): Opcional, indicando a função usada para gerar dados de resposta.

• options: Aponta para o conjunto de opções Ajax desta requisição, contendo três atributos: url, type e body.

# 6. Alguns exemplos de códigos

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;
}) ;