Detaillierte Erläuterung des Blog-Content-Management-Systems

1. Aktualisierter Inhalt

1. Die Datenbank wurde neu gestaltet und in eine nach Benutzern gruppierte SubDocs-Datenbankstruktur geändert

2. Gemäß Die Datenbank ändert sich, alle Schnittstellen wurden neu gestaltet und vereinheitlicht, um den gleichen Schnittstellenstil zu übernehmen wie Geld jetzt verwalten

3. Löschen Sie den ursprünglichen Gastmodus, fügen Sie eine Login-Registrierungsfunktion hinzu, und unterstützt Popup-Login.

4. Fügen Sie eine Homepage hinzu, um die neuesten veröffentlichten Artikel und registrierten Benutzer anzuzeigen

5. Fügen Sie Funktionen wie das Ändern des Passworts, das Abmelden und das Abmelden hinzu.

6. Optimieren Sie die Popup-Fensterkomponente, die intelligenter ist, über mehr Konfigurationselemente verfügt und der NetEase $.dialog-Komponente ähnelt. Und eine Reihe von Codes hat nur das CSS geändert, um das PC-seitige Popup-Fenster und die WAP-seitigen Toastfunktionen unter derselben Schnittstelle zu realisieren.

7. Mobile Anpassung hinzufügen

8. Optimieren Sie den Originalcode und beheben Sie einige Fehler.

Für weitere aktualisierte Inhalte wechseln Sie bitte zu den Projekten CMS-of-Blog_Production und CMS-of-Blog.

2. Kerncode-Analyse

1. Datenbank

Neugestaltung der Originaldatenbank und Änderung in Benutzergruppen Die Unterdokumente Datenbankstruktur. Dadurch wird die Datenbankstruktur mit den Benutzern insgesamt übersichtlicher und ist zudem einfacher zu bedienen und zu lesen. Der Code lautet wie folgt:

Am Anfang des Codes werden drei neue Schemas definiert: ArticleSchema, LinkSchema und UserSchema. ArticleSchema und linkSchema sind in userSchema verschachtelt und bilden eine nach Benutzern gruppierte subDocs-Datenbankstruktur. Schema ist ein Datenbankmodellskelett, das in Dateiform gespeichert ist und nicht die Möglichkeit hat, die Datenbank zu betreiben. Das Schema wird dann als Modell veröffentlicht. Modell ist ein durch Schema-Publishing generiertes Modell, bei dem es sich um ein Paar Datenbankoperationen mit abstrakten Eigenschaften und Verhaltensweisen handelt. Entitäten, die von Model erstellt werden können, werden beispielsweise erstellt, wenn ein neuer Benutzer registriert wird.

Nachdem die Datenbank erstellt wurde, muss sie gelesen und bedient werden. Sie können einen Blick auf den Code werfen, der den E-Mail-Bestätigungscode bei der Registrierung sendet, um ein Gefühl dafür zu bekommen.

Nach Erhalt der Anfrage zum Senden des E-Mail-Bestätigungscodes wird im Hintergrund ein tmp-Benutzer initialisiert. Durch die Übergabe von new db.User() wird eine Instanz des Benutzers erstellt, und durch die anschließende Ausführung des Vorgangs save() werden diese Daten in die Datenbank geschrieben. Sollte die Registrierung innerhalb einer halben Stunde nicht erfolgreich sein, gleichen Sie die E-Mail-Adresse ab und db.User.remove()löschen Sie diese Daten. Für eine genauere Verwendung gehen Sie bitte zu Offizielle Dokumente.

2. Der Hintergrund

unterteilt alle Anfragen in drei Typen:

• Ajax-asynchrone Anfrage, einheitlicher Pfad: /web/

• Öffentliche Seitenteile, wie Blog-Startseite, Anmeldung, Registrierung usw., einheitlicher Pfad: /

• Bezogen auf Blog Benutzer-ID Blog-Teil, einheitlicher Pfad: /:id/

Damit jeder Benutzer seine eigene Blog-Seite haben kann, lautet der spezifische Code wie folgt:

Sie können überprüfen der spezifische Ajax-Schnittstellencode Sehen Sie sich die Datei index.js im Serverordner an.

3. Pop-/Toast-Komponente

3.1 Pop-/Toast-Komponenten-Konfigurationsparameterbeschreibung

• pop: Ob das Popup-Fenster gemäß dem Inhaltsparameter angezeigt werden soll, gilt, wenn Inhalt vorhanden ist

• css: Passen Sie die Klasse des Popups an Fenster, die Standardeinstellung ist leer

• showClose: Bei „false“ wird die Schaltfläche „Schließen“ nicht angezeigt. Die Standardeinstellung ist

• closeFn: Der Rückruf nach dem Klicken auf die Schaltfläche „Schließen“ im Popup-Fenster

• title: Der Titel des Popup-Fensters, der Standardwert ist „warme Erinnerung“, wenn Sie Wenn Sie den Titel nicht anzeigen möchten, übergeben Sie ihn einfach leer

• content (erforderlich): Der Inhalt des Popup-Fensters unterstützt die Übergabe von HTML

• btn1: 'Button 1 copy|Button 1 style class', die in btn1Text und btn1Css formatiert wird

• cb1: Rückruf, nachdem auf Button 1 geklickt wurde . Wenn cb1 nicht explizit „true“ zurückgibt, wird das Popup-Fenster standardmäßig geschlossen, nachdem auf die Schaltfläche

• btn2 geklickt wurde: „Button 2 kopieren | Button 2-Stilklasse“. , formatiert zu btn2Text und btn2Css

• cb2: Rückruf nach dem Klicken auf Schaltfläche 2. Wenn cb2 nicht explizit true zurückgibt, wird die Standardschaltfläche nach dem Klicken auf das Popup-Fenster geschlossen. Die Schaltflächenparameter werden nicht übergeben und der Kopiertext lautet standardmäßig „Ich weiß“. Klicken Sie, um das Popup-Fenster zu schließen

• init: Die Initialisierungsfunktion nach dem Popup Es wird ein Fenster erstellt, mit dem komplexe Interaktionen verarbeitet werden können (beachten Sie das Popup-Fenster. Das Fenster muss von „false“ auf „true“ wechseln, bevor „pop“ ausgeführt wird.)

• destroy: Rückruf Funktion, nachdem das Popup-Fenster verschwindet

• wapGoDialog: Wenn Sie das mobile Endgerät verwenden, ist die Standardeinstellung falsch, ob Popup-Fenster verwendet werden sollen, Toast verwenden

3.2 Pop-/Toast-Komponentencode

3.3 Pop-/Toast-Komponentenparameter-Formatierungscode

Aus Gründen der Benutzerfreundlichkeit haben wir ihn bei der Verwendung abgekürzt. Damit die Komponente erkannt wird, müssen die eingehenden Parameter in der Vuex-Aktion formatiert werden.

Um das mobile Endgerät mit der Popup-Fensterkomponente kompatibel zu machen, verwenden wir mediaQuery, um den Stil des mobilen Endgeräts zu ändern. Fügen Sie den Parameter wapGoDialog hinzu, um anzugeben, ob wir Popup-Fenster verwenden sollen, wenn wir uns auf dem mobilen Endgerät befinden. Die Standardeinstellung ist „false“ und es wird Toast verwendet. Auf diese Weise kann ein Codesatz mit PC und WAP kompatibel sein.

Postscript

Hier analysieren wir hauptsächlich den Hintergrund und die Datenbank, und es ist relativ einfach, den Quellcode zu überprüfen. Kurz gesagt, dies ist ein gutes Beispiel dafür, wie ein Front-End mit einem Back-End und einer Datenbank beginnt. Es verfügt über umfangreiche Funktionen und Sie können vue.js lernen.

Verwandte Empfehlungen:

Das umfassendste PHP-Open-Source-Content-Management-System CMS

20 PHP-CMS-Open-Source-Content-Management-Systeme

Basierend auf dem Content-Management-System Laravel Framework