Astro Boy Chatroom

Codewolke
~~Online-Adresse www.genal.fun~~ (Ungültig und der Einsatz ist nicht mehr geplant)
Wenn Sie Vorschläge haben, gehen Sie bitte zum Problembereich

Projekteinführung

„In meiner Freizeit wollte ich einen Chatroom einrichten, um Front-End-Fähigkeiten zu festigen, also begann ich am 24. Juni 2020 mit der Entwicklung des Astro Boy-Chatrooms.
?Das Projekt wird mit vollständigem Typoskript entwickelt, was den Grundstein für zukünftige funktionale Iterationen legt. Typoskript gefällt mir natürlich auch sehr gut.
? Der Chatraum verfügt derzeit bereits über vollständige Chatfunktionen. ~~Weitere coole Funktionen werden in Zukunft entwickelt~~ Die Iteration wurde jetzt gestoppt! Interessierte Freunde können es teilen und selbst entwickeln, und Sie können es nach Belieben ändern! Ich werde neue Funktionen aktualisieren, wenn ich Zeit habe!

Projektschnittstelle

PC-Version

Mobiles Endgerät

Mobile Mobile

Funktionseinführung

Mobilkompatibel
Änderung von Benutzerinformationen (Avatar/Benutzername/Passwort)
Gruppenchat/privater Chat
Gruppe erstellen/Gruppe beitreten/Gruppe verlassen/Fuzzy-Suchgruppe
Freunde hinzufügen/Freunde löschen/Fuzzy-Suche-Benutzer
Paginierung der Nachricht
Emoticons
Bildversand/Bildvorschau
Online-Personenstatistik
Benutzerdefiniertes Thema
Erinnerung wieder verbinden

Technologieübersicht

Typescript : Eine Obermenge von JavaScript. Sein größter Vorteil besteht darin, dass es ein Typsystem bereitstellt und die Lesbarkeit und Wartbarkeit von Code verbessert.
Vue2.6.x : Progressives Front-End-Framework.
Socket/io : Echtzeitkommunikation, WebSocket-Bibliothek eines Drittanbieters.
Vuex : Ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde.
Nestjs : Es ist ein Framework zum Erstellen effizienter und skalierbarer serverseitiger Node.js-Anwendungen. Es basiert auf TypeScript und kombiniert die verwandten Konzepte von OOP1, FP2 und FRP3.
Typeorm : Unterstützt die neuesten JavaScript-Funktionen und bietet zusätzliche Funktionen, die Sie bei der Entwicklung jeder Anwendung unterstützen, die eine Datenbank verwendet.
ES6+ : Mit der ES6+-Syntax sind Pfeilfunktionen, Async/Await und andere Syntax sehr einfach zu verwenden.
SASS (SCSS) : Mit SCSS als CSS-Vorverarbeitungssprache können Sie auf effizienteste Weise komplexe Designs mit wenig Code erstellen.

Design der Datenbanktabellenstruktur

Umgebungskonfiguration

Datenbank MySQL und Chat-Datenbank (beachten Sie, dass das Datenbankformat utf8mb4 ist)
Knoten v10.16.3

Führen Sie das Projekt aus

Frontend-Projekt

 cd genal - chat - client 
npm i
npm run serve

MySQL-Konfiguration Wenn MySQL keine Verbindung herstellen kann und ein Fehler gemeldet wird: ER_NOT_SUPPORTED_AUTH_MODE, liegt dies an der Inkompatibilität der MySQL-Version. Bitte lesen Sie diesen Artikel https://blog.csdn.net/qq_41831345/article/details/83150502
Es gibt kein SQL-Skript in der Datenbank. Ändern Sie einfach das Datenbankkennwort im Backend app.module.ts und erstellen Sie eine neue chat Datenbank.
Backend-Projekt

 cd genal - chat - server
npm i
npm run start: dev

Systemiterationsdatensatz

Klicken Sie zum Anzeigen

v1.0.0

Funktion

Neuen Benutzer hinzufügen
Neue Gruppe hinzufügen
Gruppenchat

v1.0.0-Schnittstelle

v2.0.0

Funktion

Gruppenchat/privater Chat
Erstellen Sie eine Gruppe/treten Sie einem Gruppenchat/einer Fuzzy-Suchgruppe bei
Freunde hinzufügen/Fuzzy-Suche nach Freunden
Benutzername/Avatar-Upload ändern
Emoticons
Paginierung der Nachricht

v2.0.0-Schnittstelle

v3.0.0

Funktion

Gruppenchat/privater Chat
Erstellen Sie eine Gruppe/treten Sie einem Gruppenchat/einer Fuzzy-Suchgruppe bei
Freunde hinzufügen/Fuzzy-Suche nach Freunden
Bild hochladen/einfügen, Bild senden/Bildvorschau
Benutzername/Avatar-Upload ändern
Emoticons
Paginierung der Nachricht

v3.0.0-Schnittstelle

Identisch mit Version 2.0.0

v4.0.0

Funktion

Gruppenchat/privater Chat
Erstellen Sie eine Gruppe/treten Sie einem Gruppenchat/einer Fuzzy-Suchgruppe bei
Freunde hinzufügen/Fuzzy-Suche nach Freunden
Bild hochladen/einfügen, Bild senden/Bildvorschau
Benutzername/Avatar-Upload ändern
Emoticons
Paginierung der Nachricht
Mobilkompatibel