Warum sollten Front- und Back-End getrennt geschrieben werden?

Wie wir alle wissen, verlangen Unternehmen normalerweise, dass wir das Front-End und das Back-End getrennt schreiben. Warum machen wir das? Dieses Mal werde ich Ihnen erklären, warum das vordere und hintere Ende getrennt geschrieben werden sollten. Das Folgende ist ein praktischer Fall.

Wenn Sie den Front-End- und Back-End-Trennungsworkflow noch nicht ausprobiert haben, können Sie sich zunächst eine solche Prozessänderung vorstellen:
Ändern Sie den Prozess von
PN: „Das möchte ich.“ Funktion“
Backend: „Lass uns zuerst eine Vorlage aus dem Frontend erstellen“
Frontend: „Die Vorlage ist fertig“
Backend: „Lass mich sie verbinden, der Stil hier ist falsch“
Frontend: „Ich habe die Änderung abgeschlossen“
Backend: „Funktionsbereitstellung“
PM: „Diese Aktivität wird während des Frühlingsfestes hinzugefügt“
Backend: „Suchen wir zuerst das Frontend, um die Vorlage zu ändern“
Frontend: „Die Vorlage ist fertig“
Nach dem Ende: „Lass es mich verbinden, der Stil hier ist falsch“
Frontend: „Ich habe es geändert“
Backend: „Funktionsbereitstellung“

wird zu

PM: „Ich möchte diese Funktion“
Frontend: „Ich möchte eine Schnittstelle“
Backend: „Die Schnittstelle ist fertig“
Frontend: „Ich werde es anschließen und die Funktion liefern“
PM: „Diese Aktivität wird während des Frühlingsfestes hinzugefügt“
Frontend: „Eine Schnittstelle muss hinzugefügt werden“
Rückseite -End: „Die Schnittstelle ist fertig“
Front-End: „Lass mich verbinden und die Funktion liefern“

Es ist ersichtlich, dass das Front-End und das Back-End getrennt sind Das Konzept besteht darin, dass das Backend nur eine API-Schnittstelle bereitstellen muss und das Frontend AJAX aufruft, um die Datenpräsentation zu realisieren.

Aktuelle Situation und Unterschiede

Als Front-End-Entwickler sollten wir einige neuartige Technologien ausprobieren, jedes Detail verbessern und uns ständig weiterentwickeln. Obwohl die Trennung von Front-End und Back-End keine neue Technologie oder Idee ist, sind viele Back-End-Entwickler und sogar Front-End-Entwickler noch nicht damit in Berührung gekommen.

Wenn in einer Abteilung nach meinem persönlichen Verständnis alle Abteilungsmitarbeiter Back-End-Entwickler sind und einige Front-End-Seiten auch von Back-End-Mitarbeitern vervollständigt werden, dann erfolgt die Trennung von Front-End und Back-End -End ist ihnen möglicherweise unbekannt. In diesem Bereich sind die meisten Projekte stark mit Front-End und Back-End verknüpft, und das Konzept des Front-Ends existiert nicht einmal.

In Unternehmen oder Abteilungen, die dem Front-End keine Beachtung schenken, ist es nichts Falsches daran, die Trennung von Front-End und Back-End nicht zu verstehen. Die meisten Unternehmerunternehmen haben eine oder zwei Front-End-Abteilungen in einer Abteilung, und eine Person ist für mehrere Projekte verantwortlich. Es kommt selten vor, dass sie bei der Fertigstellung eines Projekts zusammenarbeiten. Da es keinen nennenswerten Standard gibt (der Standard bezieht sich hier auf die Code-Organisationsstruktur), schneiden die Front-End-Mitarbeiter die Bilder aus, schreiben die Seiten und werfen sie an das Back-End, und die Back-End-Codestruktur ist als Standard verwendet. Obwohl einige Unternehmen sich der Front-End- und Back-End-Trennung bewusst sind, wissen sie nicht, wie sie diese umsetzen sollen. Zu diesem Zeitpunkt glaubten die Back-End-Mitarbeiter der Abteilung, dass die Trennung von Front-End und Back-End bedeutete, dass das Back-End nicht mehr HTML und JS schreiben musste und es dem Front-End überlassen werden konnte. Man kann dies nur als Front-End- und Back-End-Arbeitsteilung bezeichnen.

Das Obige beschreibt eine Situation: Ich verstehe die Trennung von Front-End und Back-End nicht und weiß nicht, wie ich sie praktizieren soll. Unten liegt eine andere Situation vor: Sie verstehen die Trennung von Front-End und Back-End, möchten es aber nicht ausprobieren.

Zur zweiten Situation haben viele Leute entsprechende Erklärungen abgegeben. Tatsächlich handelt es sich dabei um die Frage „Vor- und Nachteile der Front-End- und Back-End-Trennung“. Viele Backend-Mitarbeiter werden denken, dass das, was sie getan haben, in Ordnung ist. Auch wenn das Frontend-HTML im Backend verwendet wird, ist es üblich und war schon immer der allgemeine Trend. Das Backend-MVC-Framework wird auch auf diese Weise empfohlen . Derzeit haben Front-End-Entwickler oft nicht genug Mitspracherecht in der Abteilung oder sie denken, dass die Meinungen von Back-End-Entwicklern immer richtig sind und keine Subjektivität haben.

Im Gegenteil, es ist auch möglich, dass Back-End-Entwickler die Trennung von Front-End und Back-End dringend empfehlen, Front-End-Entwickler dies jedoch nicht praktizieren möchten. Zu diesem Zeitpunkt wird das Front-End denken, dass die Back-End-Entwickler herumalbern. In der Vergangenheit wurden die Projekte reibungslos durchgeführt, ohne das Front-End und das Back-End zu trennen. Wenn sie getrennt sind, bringt dies zusätzliche Arbeitsbelastung und Lernkosten mit sich, die von den technischen Fähigkeiten und der Sichtbarkeit abhängen.

Natürlich gibt es hier meiner Meinung nach auch einige aktuelle Situationen und Unterschiede in der Trennung von Front-End und Backend.

Szenarien und Anforderungen

Nicht alle Szenarien eignen sich für Anwendungsszenarien mit Front-End- und Back-End-Trennung, aber die meisten Projekte können durch Front-End- und Back-End-Trennung realisiert werden.

Da ich mich hauptsächlich mit der Front-End-Entwicklung von Back-End-Anwendungen auf Unternehmensebene beschäftige, glaube ich persönlich, dass für die Entwicklung von Back-End-Anwendungen die Vorteile der Front-End- und Back-End-Trennung weit entfernt sind überwiegen die Nachteile.

Wir können die meisten Hintergrundanwendungen in SPA-Anwendungen (Einzelseitenanwendungen) umwandeln, und das Hauptmerkmal von Einzelseitenanwendungen ist die teilweise Aktualisierung. Dies kann durch Aufrufen von AJAX über das Routing und Bereitstellen der Front-End-Steuerung erreicht werden Darüber hinaus ist diese Methode benutzerfreundlicher, Webseiten werden schneller geladen, die Entwicklungs- und Wartungskosten werden erheblich reduziert und die Effizienz wird erheblich verbessert.

In ähnlicher Weise wird die Front-End- und Back-End-Trennung auch bei Display-Websites und mobilen APP-Seiten versucht. Wenn Front- und Back-End nicht getrennt sind, muss der Server die Webseite separat verarbeiten und vollständiges HTML zurückgeben. Dies erhöht zwangsläufig die Komplexität des Servers und führt zu einer schlechten Wartbarkeit. Die Webseite muss vollständiges HTML laden, was sich auf die Leistung auswirkt Dies ist bis zu einem gewissen Grad sehr unfreundlich für einen Ort, an dem die mobile Leistung im Vordergrund steht.

Mit der Entwicklung und Iteration der Front-End-Technologie entstand das Front-End-MVC-Framework. Mit den aktuellen Mainstream-Front-End-Frameworks wie React, Vue, Angular usw. können wir problemlos eine Website erstellen Das kann ohne serverseitiges Rendering angezeigt werden. Gleichzeitig bietet diese Art von Framework eine Front-End-Routing-Funktion. Das Backend kann nicht mehr die gesamte ursprünglich dazu gehörende Geschäftslogik steuern Von Front-End zu Front-End kann man sagen, dass dies die vollständigste Trennung von Front-End und Back-End ist. Das Folgende ist ein Code für das Routing der Front-End-Steuerung:

'use strict'export default function (router) {
    router.map({        '/': {            component: function (resolve) {                require(['./PC.vue'], resolve)
            }
        },        '/m/:params': {            component: function (resolve) {                require(['./Mobile.vue'], resolve)
            }
        },        '/p': {            component: function (resolve) {                require(['./PC.vue'], resolve)
            },            subRoutes: {                '/process/:username': {                    component: function (resolve) {                        require(['./components/Process.vue'], resolve)
                    }
                }
            }
        }
    })
}

Die Realisierung der Front-End- und Back-End-Trennung wird die Anforderungen an das technische Personal, insbesondere an das Front-End-Personal, auf a erhöhen Auf höherer Ebene geht es bei der Front-End-Arbeit nicht nur um das Ausschneiden von Seiten, das Schreiben von Vorlagen oder die Verarbeitung einiger einfacher JS-Logiken. Das Front-End muss verschiedene vom Server zurückgegebene Datenformate verarbeiten und auch eine Reihe von Datenverarbeitungslogiken beherrschen , MVC-Ideen und verschiedene Mainstream-Frameworks.

Vorteile und Bedeutung

Wir können uns die Bedeutung der Front-End- und Back-End-Trennung auch als die Bedeutung des Front-End-Renderings vorstellen:

Vollständige Befreiung des Front-Ends
Das Front-End muss keine Vorlagen mehr für das Back-End bereitstellen oder das Back-End bettet den Back-End-Code in das Front-End-HTML ein, wie zum Beispiel:

<!--服务器端渲染 --><select>
    <option value=&#39;&#39;>--请选择所属业务--</option>
    {% for p in p_list %}    <option value="{{ p }}">{{ p }}</option>
    {% endfor %}</select>

Dies ist zwischen dem vorderen und hinteren Ende gekoppelt und weist eine schlechte Lesbarkeit auf.

<!--前端渲染 --><template>
    <select id="rander">
        <option value=&#39;&#39;>--请选择所属业务--</option>
        <option v-for="list in lists" :value="list" v-text="list"></option>
    </select></template><script>export default {    data: {        return {            lists: [&#39;选项一&#39;, &#39;选项二&#39;, &#39;选项三&#39;, &#39;选项四&#39;]
        }
    }，
    ready: function () {        this.$http({            url: &#39;/demo/&#39;,            method: &#39;POST&#39;,
        })
        .then(function (response) {            this.lists = response.data.lists // 获取服务器端数据并渲染
        })
    }
}
</script>

Das Obige ist ein vom Frontend gerenderter Code. Das Frontend ruft die Backend-Schnittstelle über AJAX auf. Die Datenlogik wird am Frontend platziert und vom Frontend verwaltet.

Verbesserung der Arbeitseffizienz und klarere Arbeitsteilung
Der Front-End- und Back-End-Trennungsworkflow ermöglicht es dem Front-End, sich nur auf Front-End-Angelegenheiten zu konzentrieren, und das Back-End kümmert sich nur darum Über Back-End-Aktivitäten kann die Entwicklung beider gleichzeitig durchgeführt werden, und im Back-End bleibt keine Zeit. Bei der Bereitstellung einer Schnittstelle kann das Front-End zuerst die Daten schreiben oder eine lokale JSON-Datei aufrufen Das Hinzufügen von Seiten und das Ändern von Routen müssen das Backend nicht beeinträchtigen, was die Entwicklung flexibler macht.

Lokale Leistungsverbesserung
Durch die Konfiguration des Front-End-Routings können wir das Laden von Seiten bei Bedarf realisieren. Es ist nicht erforderlich, alle Ressourcen der Website zu Beginn des Ladens der Homepage zu laden , und der Server muss die Front-End-Seiteninteraktion und Benutzererfahrung nicht mehr analysieren.

Wartungskosten reduzieren
Durch das aktuelle Mainstream-Front-End-MVC-Framework können wir das Problem sehr schnell lokalisieren und entdecken, ohne dass Back-End-Personal beteiligt sein muss und kein Debugging erforderlich ist 🎜>. Code-Refactoring und Wartbarkeitsverbesserung. Gefühle und Verständnis:

Unterwegs sind die Projekte eins nach dem anderen, von der Hintergrundsteuerungsrouting- und Hintergrundrenderingseite am Anfang bis zur aktuellen Front-End-Steuerungsrouting, Front- End-Rendering-Daten, Workflow und Methoden haben sich stark verändert. Immer wenn ich auf die folgende Situation stoße, seufze ich vor Rührung über die Vorteile, die die Trennung von Front-End und Back-End mit sich bringt:

1 Bei der Erstellung der Front-End-Seite zu Beginn des Projekts, Ich brauche das Backend nicht mehr für mich

Konfigurieren Sie die Serverumgebung

2. Die Front-End-Dateien des Projekts können auf den Server geworfen werden, wenn Sie die Backend-Schnittstelle aufrufen müssen um sie vorher einzufügen3. Das Hinzufügen einer Projektseite erfordert die Konfiguration des Routings. Ich muss meine Back-End-Kollegen nicht mehr bitten, sie für mich hinzuzufügen, ich kann es im Front-End selbst erledigen 4. Die Front-End-Dateien werden nicht mehr mit Back-End-Codelogik vermischt und es sieht viel komfortabler aus
5. Seitensprünge sind flüssiger als zuvor. Es ist reibungslos, teilweises Rendern und teilweises Laden erfolgen sehr schnell
6. Seite Vorlagen können wiederverwendet werden und die Entwicklung von Front-End-Komponenten verbessert die Entwicklungseffizienz

und so weiter. Angesichts des sich schnell entwickelnden Front-Ends sollten wir uns an die dadurch verursachten Veränderungen in den Arbeitsmethoden und -prozessen anpassen. Die aktuelle Arbeitsmethode der Trennung von Front-End und Backend muss in Zukunft der Trend sein. Als Endentwickler sollten wir die Verantwortung tragen, das neue Frontend bekannt zu machen und etwas zu bewirken.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

Wie implementiert man Tabs im MVVM-Stil in Angularjs? Fall + Code

Eine sehr praktische Codesammlung für vue2.0-Projekte

Das obige ist der detaillierte Inhalt vonWarum sollten Front- und Back-End getrennt geschrieben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!