Vue verwendet MockJS, um simulierte Datenfalldetails zu generieren

Installieren Sie Mockjs in Ihrem Projekt

Führen Sie den folgenden Installationsbefehl im Projektverzeichnis aus

npm installiere mockjs --save

Der grundlegende Prozess der Verwendung von MockJS im Vue-Projekt

Erstellen Sie nach Abschluss der Installation ein neues mock.js im Verzeichnis src/utils des Projekts (Sie können das Verzeichnis und den Dateinamen selbst definieren), um Mock-Daten zu generieren.

// Mockjs importieren
const Mock = erfordern('mockjs')

// Simulationsdaten generieren const test = function() {
    Rückgabewert für Mock.mock({
        // Der Wert der Attributliste ist ein Array mit 1 bis 10 Elementen 'list|1-10': [{
            // Die Attribut-ID ist eine sich selbst erhöhende Zahl, die bei 1 beginnt und jedes Mal um 1 erhöht wird
            'id|+1': 1,
            // Generiere zufällige Daten durch Platzhalter 'name': '@name',
            'Alter': '@natürlich(18, 100)',
            'E-Mail': '@E-Mail'
        }]
    });
}

//Zugriffs-URL zuordnen
// Dies bedeutet, dass wenn Ajax den Pfad /mock/test anfordert, die Testfunktion zugeordnet und ausgeführt wird Mock.mock('/mock/test', test)

Erstellen Sie im Projektverzeichnis src/api MockSrv.js, um auf Ajax-Anfragen zu antworten.

Axios von „Axios“ importieren
Mock importieren aus '@/utils/mock'

Standard exportieren {
    testMock() {
        gibt axios.get('/mock/test') zurück
    }
}

Fordern Sie von Mock in der Komponente generierte Mock-Daten an.

<Skript>
importiere MockSrv von '@/api/MockSrv'

Standard exportieren {
    Name: "App",
    montiert() {
        MockSrv.testMock().then(Funktion(resp) {
            console.log("Mock:", bzw. Daten);
        });
    }
}
</Skript>

Ausführungsergebnisse

Mock-Syntaxspezifikation

Datenvorlagendefinition (DTD)

Jedes Attribut in der Datenvorlage besteht aus drei Teilen: Attributname, Generierungsregel und Attributwert:

// Attributname
// Regel generieren
// Attributwert
'Name|Regel': Wert

Datenplatzhalterdefinition (DPD)

Ein Platzhalter nimmt lediglich einen Platz in der Attributwertzeichenfolge ein und erscheint nicht im endgültigen Attributwert.
Das Format des Platzhalters ist:

@Platzhalter@Platzhalter(Parameter[, Parameter])

Mock.mock({
    Name: {
        zuerst: '@FIRST',
        Mitte: '@FIRST',
        zuletzt: '@LAST',
        voll: '@erste @Mitte @letzte'
    }
})

Mock.mock()

Generieren Sie simulierte Daten basierend auf einer Datenvorlage
Mock.mock(rurl?, rtype?, Vorlage | Funktion(Optionen))

• rurl ist optional und gibt die abzufangende URL an. Es kann sich um eine URL-Zeichenfolge oder einen regulären URL-Ausdruck handeln.
• rtype ist optional und gibt den Typ der Ajax-Anfrage an, die abgefangen werden muss. Zum Beispiel GET, POST, PUT, DELETE usw.
• Vorlage ist optional und gibt eine Datenvorlage an, die ein Objekt oder eine Zeichenfolge sein kann.
• function(options) optional, gibt die Funktion an, die zum Generieren der Antwortdaten verwendet wird
  • options bezieht sich auf die für diese Anfrage festgelegten Ajax-Optionen, die drei Attribute enthalten: URL, Typ und Text

Mock.Random()

Mock.Random ist eine Tool-Klasse zum Generieren verschiedener Zufallsdaten.
Die Methode Mock.Random wird in der Datenvorlage als „Platzhalter“ bezeichnet und das Schreibformat ist @placeholder(Parameter[, Parameter]).

var Random = Mock.Random
Zufällige E-Mail()
// => "[email protected]"
Mock.mock('@E-Mail')
// => "[email protected]"
Mock.mock( { E-Mail: '@email' } )
// => { E-Mail: "[email protected]" }

Die Methoden in Mock.Random entsprechen eins zu eins den @Platzhaltern in der Datenvorlage. Bei Bedarf kann man die Methoden von Mock.Random auch erweitern und diese dann in der Datenvorlage durch @Erweiterungsmethoden referenzieren.

Dies ist das Ende dieses Artikels über Vues Verwendung von MockJS zum Generieren simulierter Datenfälle. Weitere relevante Informationen zur Verwendung von MockJS durch Vue zum Generieren simulierter Dateninhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!