Grundlegende Verwendung von Mock im Vue-Projekt

1. Installieren Sie Axios und Mock.js

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

2. Erstellen Sie den Ordner „mock.js“.

Erstellen Sie einen neuen Scheinordner im src-Verzeichnis des Projekts, um die js-Dateien zu speichern, die für die Generierung simulierter Daten festgelegt sind. Zum Beispiel wie im roten Feld unten gezeigt:

Der Inhalt in bar.js ist wie folgt:

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

Der Inhalt in pie.js ist wie folgt:

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

Der Inhalt in index.js ist wie folgt (hier wird diese Datei als Scheineintragsdatei verwendet):

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

# 3. Fügen Sie die Scheineintragsdatei in main.js ein

// 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. Rufen Sie die .vue-Datei auf

In App.vue senden wir beispielsweise eine Get-Anfrage, um Daten abzurufen

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

Der Ausdruck sieht wie folgt aus:

# 5. Zusätzliche Erklärung

• Mock.mock( rurl, rtype, template|function( options ) )

• rurl: Optional und gibt die abzufangende URL an. Dabei kann es sich um eine URL-Zeichenfolge oder eine reguläre URL handeln. Zum Beispiel „/domian/list.json“.

• rtype: Optional, gibt den Typ der Ajax-Anfrage an, die abgefangen werden muss. Zum Beispiel GET, POST, PUT, DELETE usw.

• Vorlage: optional, stellt die Datenvorlage dar, die ein Objekt oder eine Zeichenfolge sein kann. Jedes Attribut in der Datenvorlage besteht aus drei Teilen: Attributname, Generierungsregel, Attributwert

• ('name|rule': value) Attributname, Generierungsregel, Attributwertwert. Beispiel: „name|1-10“:1 generiert eine Ganzzahl zwischen 1 und 10. Detaillierte Regeln finden Sie in der offiziellen Dokumentation.

• Funktion(Optionen): Optional, gibt die Funktion an, die zum Generieren von Antwortdaten verwendet wird.

• Optionen: Verweist auf den Ajax-Optionssatz dieser Anfrage, der drei Attribute enthält: URL, Typ und Text.

# 6. Einige Beispielcodes

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