iBlog

Umweltvorbereitung

• Node.js v14.15.5
• MongoDB v4.2.17

Installieren Sie die MongoDB-Datenbank

Rufen Sie die offizielle Website zum Herunterladen auf. Die Version ist 4.2.17, die Plattform ist Windows und das Installationspaket liegt im MSI-Format vor.

Projektentwicklung

1. Klonen Sie das Projekt lokal:

$ git clone [email protected]:miqilin21/vue-blog.git
$ cd vue-blog
$ pnpm i

2. Installieren Sie Front-End-, Back-End- (Administrator, Web) und Back-End-Projektabhängigkeiten (Server):

$ pnpm install-all

3. Führen Sie Front-End-, Back-End- (Admin, Web) und Back-End- (Server) Projekte aus:

$ pnpm serve-all

4. Browservorschau öffnen:

http://localhost:8080 öffnet die lokale Front-End-Seite; http://localhost:8088 öffnet die lokale Hintergrundseite.

Bitte registrieren Sie den Benutzer, wenn Sie sich zum ersten Mal als Backend-Administrator anmelden. Nach der Anmeldung können Sie die Registrierungsschaltfläche ausblenden, um zu verhindern, dass das Anmeldekonto preisgegeben wird.

Backend-Managementsystem

• Neue Kategorie hinzufügen

• Kategorieliste (Hinzufügen, Löschen, Ändern, Überprüfen)

• Neuen Artikel hinzufügen

• Artikelliste (hinzufügen, löschen, ändern, prüfen)

• Artikel-Kommentarliste

• Freund-Link hinzufügen

• Freundliche Linkliste (Hinzufügen, Löschen, Ändern, Überprüfen)

• Nachrichtenliste

• Liste der Nachrichtenbenutzer

• Integration des Markdown-Editors

• Funktion zum Hochladen von Bildern

• Neuen Benutzer hinzufügen

• Benutzerliste (Hinzufügen, Löschen, Ändern, Überprüfen)

• Universelle Implementierung von Hinzufügungs-, Lösch-, Änderungs- und Abfrageschnittstellen (Middleware-RessourceMiddleware)

• Login-Registrierungsfunktion

• Logout-Funktion

• JWT-Überprüfung hinzufügen (1. Benutzernamensuche 2. Passwortüberprüfung 3. Rückgabetoken)

• HTTP-Interceptor hinzufügen (Anfrage, Antwort)

Blog-System

• Benutzeroberfläche der Blog-Startseite
• Implementierung der Blog-Homepage-Schnittstelle
• Benutzeroberfläche der Blog-Archivseite
• Implementierung der Blog-Archivseitenschnittstelle
• Benutzeroberfläche der Blog-Tag-Seite
• Implementierung der Blog-Tag-Seitenschnittstelle
• Benutzeroberfläche der Blog-Beitragsseite
• Implementierung der Blog-Artikelseitenschnittstelle
• Benutzeroberfläche der Blog-Linkseite für Freunde
• Implementierung der Blog-Freund-Link-Seitenschnittstelle
• Benutzeroberfläche der Blog-Nachrichtenseite
• Implementierung der Blog-Nachrichtenseitenschnittstelle

Konfigurationshinweise

1. Um auf die Kommentare anderer Personen auf der Kommentarseite zu antworten, wird Ihr QQ-Postfach für die synchronisierte Benachrichtigung verwendet. Sie müssen das Postfach in server/plugins/sendEmail.js konfigurieren. Wie Sie den QQ-Postfach-Autorisierungscode erhalten, ist in der folgenden Abbildung dargestellt. auf der Seite „QQ-Postfacheinstellungen – Konto“).

2. Konfiguration des Hauptkontos für Kommentare (das Hauptkonto wird für E-Mail-Antworten verwendet, daher muss die für Kommentare erstellte E-Mail-Adresse mit der E-Mail für den QQ-Postfach-Autorisierungscode im vorherigen Schritt übereinstimmen). Das Konto muss in web/src/commentConfig.js festgelegt werden (Beachten Sie, dass topNickName mit dem Spitznamen des durch den Kommentar erstellten Hauptkontos übereinstimmen muss. topParentId kann von der Hintergrundseite abgerufen werden.) es muss neu konfiguriert werden.
3. Bezüglich des Hochladens von Hintergrundbildern: Die Standardeinstellung ist das Hochladen auf den lokalen Server. Natürlich wird die Ladegeschwindigkeit des Frontends beeinträchtigt. Sie können das OSS von Alibaba Cloud verwenden. Sie müssen server/routes/admin/index.js , kommentieren Sie den Code für das Hochladen lokaler Bilder aus und füllen Sie schließlich Ihre Alibaba Cloud-OSS-Konfiguration aus.

Projektpaketierung und -bereitstellung

• Packen von Web- und Admin-Projekten (führen Sie den Befehl pnpm build-all im Stammverzeichnis aus)
• Kauf eines Domainnamens
• Auflösung von Domainnamen
• Kauf eines Linux-Cloud-Servers
• Git-Installation, SSH-Schlüssel hinzufügen
• PM2-Prozessmanagement
• ngnix-Konfiguration
• Mongodb-Konfiguration
• Mongodb-Daten von lokal auf den Server migrieren
• Qiniuyun CDN kostenlose Beschleunigung für die gesamte Website

Informationen zur Online-Serverbereitstellung finden Sie in dieser Anleitung.

Blog-Backend-Managementsystem

Blog-System

WelcomeStar,Probleme

• Ihr Stern ist meine Motivation für kontinuierliche Updates und Wartung! ! !
• Sollten während der Nutzung Probleme auftreten, können Sie diese gerne melden

Aufgabenliste

• Leistungsoptimierung, Bilder müssen komprimiert und vorgeladen werden
• Fügen Sie der Blog-Beitragsseite eine Suchfunktion hinzu
• Probleme mit der Browserkompatibilität, mobile Anpassung. Ich habe nur die Google Chrome-Browserentwicklung und die Anpassungseffekte für Mobiltelefone verwendet. Es wird jedoch nicht empfohlen, den Computer-Anmeldeeffekt zu verwenden.
• Lösen Sie das SEO-Problem von Vue und das Jitter-Problem beim Aktualisieren der Rendering-Seite. Wir werden vorerst ein Vue-Pre-Rendering durchführen. Wir schließen nicht aus, dass wir in Zukunft ein serverseitiges Rendering von Vue oder nuxt.js durchführen.
• Organisieren Sie den Code und teilen Sie ihn in Komponenten auf. Machen Sie die Struktur klarer und reduzieren Sie die Codemenge
• Refaktorieren Sie das gesamte Projekt mit Typescript
• Interessante Funktionen werden nach und nach hinzugefügt, wenn ich darüber nachdenke, und sie werden kontinuierlich weiterentwickelt ...