Heim > Artikel > Web-Frontend > So erstellen Sie ein universelles Datensimulations-Framework für das Frontend (ausführliches Tutorial)
Der folgende Herausgeber wird Ihnen ein Tutorial zum Erstellen eines gemeinsamen Front-End-Datensimulations-Frameworks mit Mockjs und JSON-Server zur Verfügung stellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Herausgeber und werfen wir einen Blick darauf
Ob Sie bei der Arbeit oder in Ihrer Freizeit Front-End-Entwicklung betreiben, es ist unvermeidlich, dass das Back-End-Team die Entwicklung der Schnittstelle noch nicht abgeschlossen hat Das Front-End-Team muss die entsprechenden Funktionen implementieren. Fragen Sie nicht nach dem Grund, es existiert definitiv. Aus diesem Grund wurde dieser Artikel erstellt. Ich hoffe, dass es denjenigen hilfreich sein wird, die in dieser Hinsicht Bedarf haben.
1. Verwendetes Komponentenpaket
1. Mockjs: Wird zum Simulieren von Abfrageergebnissen verwendet
2. JSON-Server: Erstellen Sie einen Simulationsserver und simulieren Sie CRUD-bezogene Betriebsschnittstellen
2. Spezifische Implementierung 1. Richten Sie das Projekt ein und installieren Sie die entsprechenden Abhängigkeiten
cnpm install --save-dev mockjs json-server
Der obige Befehl dient zum Installieren von Abhängigkeiten. Das folgende Bild zeigt die Projektergebnisse:
Anweisungen:
data: In diesem Ordner werden die mit Mockjs simulierten Abfrageergebnisse gespeichert. Dem dataProvider folgt eine separate einfache
lib: eine enthaltene JQuery-Datei, die zum Simulieren von Ajax-Anfragen verwendet wird
Route: Die Routing-Tabelle von JSON-Server wird verwendet, um Rohoperationen zu simulieren. Ich weiß nicht, wie man mehrere db.json
index.js: Simulationsserver-Eintragsdatei
Test implementiert. html: Cors testen
2. Erstellen Sie einen einfachen JSON-Server-Server
var JsonServer = require('json-server'); var path = require('path') var Server = JsonServer.create(); var defaultMid = JsonServer.defaults({ "noCors": false, "static": path.join(__dirname, "/lib") }); var router = JsonServer.router(path.join(__dirname, '/route/db.json')); Server.use(defaultMid); Server.use(router); Server.listen(8009); console.log('start 8009.....');
Dieser Teil des Inhalts wurde vollständig gemäß den offiziellen Anweisungen von JSON-Server geschrieben . Es ist erwähnenswert, dass static und noCors die Einstellung als Middleware durchführen.
3. Erhöhen Sie die Anwendung von Mockjs
Hier wird Mockjs nur als Eckpfeiler der Datengenerierung verwendet, während dataProvider.js die Möglichkeit bietet, externe Zugriffsschnittstellen zu vereinheitlichen. Das heißt, die Simulationsdaten werden nach Modul (entspricht dem Controller in MVC) und Funktion (entspricht der Aktion in MVC) getrennt. Ich weiß nicht, ob diese Implementierung machbar ist (ich verwende sie derzeit in meinem Projekt.)
3.1 Erstellen Sie zunächst die emp.js-Datei im Datenordner. Der folgende Inhalt wurde geschrieben:
var mockjs = require('mockjs'); module.exports = { list: function(){ var data = mockjs.mock({ 'list|3':[ { 'id|+1':1 } ] }); return data.list; } }
Hier ist die Verwendung von Mockjs
3.2 Verwenden Sie dataProvider, um die Modulsammlung zu implementieren
var emp = require('./emp'); var moduels = { emp: emp } module.exports = { execute: function(m, f, args){ return moduels[m][f].call(moduels[m], args); } }
3.3 Fügen Sie die get-Methode in json hinzu Daten abrufen
var provider = require('./data/dataProvider'); Server.get('/data',function(req,res){ var moduleName = req.body ? req.body.moduleName : req.query.moduleName; var funName = req.body ? req.body.funName : req.query.funName; var arg = null; res.json(provider.execute(moduleName, funName)); res.end(); });
Wenn Sie auf die Liste unter emp zugreifen möchten, lautet die Adresse: http://localhost:8009/data?moduleName=emp&funName=list
4. Zusammenfassung
1. Es kann nur eine db.json-Datei des JSON-Servers vorhanden sein. Hier können mehrere Datenentitäten konfiguriert werden Protokoll zum Realisieren der Daten.
Wenn Sie das sehen, denken Sie, dass es so einfach ist, einen Datensimulationsserver zu erstellen, natürlich nur für Webapi. Laden Sie den Beispielcode herunter
Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
So erzielen Sie elastische Effekte in JavaScript
So implementieren Sie Cookie-domänenübergreifend in Axios
Wie man JS verwendet, um die parabolische Flugbahnbewegung einer kleinen Kugel zu implementieren
Wie man JavaScript verwendet, um die Binärbaumdurchquerung zu implementieren
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein universelles Datensimulations-Framework für das Frontend (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!