Beispiel-Tutorial zur Trennung von Front-End und Backend

Da das Unternehmen die Anzahl der Entwickler und Projekte erhöht, steigen die Kosten für Front-End- und Back-End-Kommunikation weiter. Das Front-End und das Back-End des ursprünglichen Projekts waren nicht getrennt. Als Front-End müssen Sie auch über ein gewisses Verständnis für Back-End-Sprachen wie PHP verfügen. Dies erhöht die Lernkosten für das Front-End erheblich Entwicklung, insbesondere wenn Sie auf Datenbankfehler stoßen und den Grund nicht verstehen, kostet die Lösung viel Zeit. Ausgehend von unseren aktuellen Geschäftsanforderungen haben wir daher begonnen, bei einigen neuen Projekten zu versuchen, das Front- und Back-End zu trennen.

1) Code-Trennung. Die Front-End- und Back-End-Codes werden mithilfe unabhängiger Projektverzeichnisse getrennt. Die Front-End-Entwicklungsumgebung muss nicht in einer PHP- oder Java-Umgebung konfiguriert werden. Alle Projektcodes werden mit Git verwaltet.

2) Verbesserung des Entwicklungsprozesses. Der Entwicklungsprozess wird in lokale [lokale Entwicklung], Entwicklung [gemeinsames Front-End- und Back-End-Debugging], Beta [QA-Tests] und Produktion [Online-Veröffentlichung] unterteilt.

Nodejs

Webpack

Befehlsfeld

HostProfiles

Git

Sftp

1) Anforderungen ermitteln und Schnittstellen entwerfen.

Im gesamten Entwicklungsprozess müssen Front-End und Back-End nach Festlegung der Anforderungen und des Designs zunächst die Schnittstelle entwerfen, die Parameter der entsprechenden Schnittstelle und die JSON-Struktur der zurückgegebenen Daten bestimmen. und dann selbstständig weiterentwickeln.

2) Lokale Entwicklung

Die lokale Entwicklungsumgebung kann mit Hilfe von Grunt, Gulp und Webpack erstellt werden. Wir verwenden normalerweise Webpack, um dies zu erreichen, da Webpack Kann die Modularisierung unterstützen, hat eine relativ gute Unterstützung für Entwicklungen wie React und VUE und ist in der Community relativ beliebt. Probleme können relativ schnell gelöst werden. Mit Webpack und Webpack-dev-server können Sie schnell einen lokalen Dienst erstellen, der das Laden und Aktualisieren von Code im laufenden Betrieb unterstützt. Natürlich können Sie einfache Dienste über Express aufbauen.

Zu diesem Zeitpunkt verwenden wir normalerweise das Befehlspad, um die Befehlszeile zu verwalten, z. B. den häufig verwendeten npm start oder npm run dist usw., was praktisch und schnell ist.

Bildressourcen werden in einem einheitlichen Verzeichnis verwaltet und vorab auf Qiniu bereitgestellt.

Die lokale Entwicklung verwendet die Mock-Data-Methode, um die Schnittstelle zu simulieren und die Seitenlogik zu entwickeln. In einigen Projekten, in denen Jquery vorhanden ist, verwenden wir jquery.mockjax.js als Mock-Tool. Normalerweise wird ein API-Verzeichnis zur zentralen Verwaltung aller Schnittstellendaten erstellt und über eine index.js einheitlich geladen und blockiert.

3) Gemeinsames Front-End- und Back-End-Debugging

Nachdem Front-End und Back-End getrennt wurden, erfolgt das gemeinsame Debuggen von Front-End und Back-End -End-Daten sind sehr einfach und effizient. Sie müssen den Code nur separat auf dem Server bereitstellen und dann die von Chrome bereitgestellten Entwicklungstools verwenden. Wenn während des Debugging-Prozesses Probleme auftreten, können Sie diese jederzeit ändern und einreichen. Das Front-End ist nicht auf die Back-End-Entwicklungsumgebung angewiesen. Selbst wenn in der DEV-Umgebung ein Problem auftritt, kann das Back-End es mit einer klaren Arbeitsteilung rechtzeitig lösen. Insbesondere nach der Einführung von Docker können wir problemlos mehrere DEV-Entwicklungsumgebungen erstellen, sodass sich selbst dann, wenn mehrere Kollegen ein Projekt entwickeln, nicht gegenseitig auf das gemeinsame Debuggen von DEV einwirkt.

Bei der Veröffentlichung des Codes wurde das Sublime Text-Plugin SFTP eingeführt, um den lokal kompilierten Code direkt an den DEV-Server zu übertragen, was den gesamten Prozess sehr schnell macht.

4) QS-Tests

Der Eintritt in die QS-Testphase ähnelt fast der gemeinsamen Debugging-Phase, mit der Ausnahme, dass eine onlineähnliche Umgebung bereitgestellt wird separat erhältlich Für Testzwecke.

5) Online-Veröffentlichung

Vor der Veröffentlichung muss der Code komprimiert und verpackt werden, was ebenfalls mit Hilfe von Webpack erfolgt. Erwähnenswert ist, dass wir, wenn ein Fehler online auftritt, den Online-Code zum Debuggen mithilfe von HostProfiles und Nginx lokal zuordnen müssen. Verwenden Sie die Branch-Funktion von Git, um einen Hotfix-Zweig für die Verarbeitung zu erstellen.

Dies ist eine einfache Front-End- und Back-End-Trennlösung. Es handelt sich lediglich um einen Lösungsvorschlag für die bestehende Projektsituation des Unternehmens. Natürlich gibt es viele Stellen, die verbessert werden können . Beispielsweise fügt der Midway-Plan von Taobao eine mittlere Ebene von NodeJS für das Rendern von Vorlagen und die Geschäftsverarbeitung hinzu.