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!