Wechat Wecat

WeCat

einführen

• Sofortiges Chat-Projekt basierend auf Vue.js Family Bucket + WebSocket + Node.js + Koa2 + MongoDB
• Der Funktionsteil bezieht sich auf WeChat, wobei einige interessante Funktionen hinzugefügt wurden. Die Kommentare zum Projektcode sind sehr detailliert und es handelt sich um ein gutes Full-Stack-Einführungsprojekt zum Erlernen von Vue, Node.js und Koa.
• Das Front-End und die Bereitstellung des Projekts werden unabhängig voneinander abgeschlossen. Sollten bei verschiedenen Interaktionen und verschiedenen Geschäftslogikfunktionen Mängel auftreten, können Sie diese gerne melden.

Projektanzeige

1. Melden Sie sich an

2. Registrieren Sie sich

3. Passwort abrufen

4. Die Registrierung ist erfolgreich, Avatar auswählen

5. Hauptpanel

6. Freunde hinzufügen

7. Infobereich für Freunde

8. Senden Sie Nachrichten und Dateien

9. Multifunktionspanel, Emoticons senden

10. Personalisiertes Einstellungsmenü

11. Administratorseite, Benutzerinformationen

12. Fragen Sie alle Chat-Datensätze ab

13. Details zum Chatverlauf

14. API-Dokumentation

Verzeichnisstruktur

1. Server ist der Server
2. public ist eine statische Datei
3. db ist die MongoDB-Exportsicherung
4. src ist der Projektordner

Installationsanleitung

1. Klonen Sie das Projekt git clone https://github.com/imzusheng/Wecat.git
2. CD-Projektstammverzeichnis, Installationsabhängigkeiten npm install
3. Führen Sie service npm run serve
4. cd ./server, und installieren Sie dann die Serverabhängigkeiten npm install
5. Importieren Sie die Datenbank mongorestore -d wecat ./db
6. Führen Sie den Server npm run dev aus

Testkonto

Benutzer-ID: [email protected]
Passwort: a123456

TODO

• Einloggen
• Verhindern Sie doppelte Anmeldungen
• Letzter Anmeldezeitpunkt
• Standort der letzten Anmeldung (Provinz-Stadtbezirk)
• Registrieren (E-Mail-Bestätigung)
• Passwort abrufen (E-Mail-Bestätigung)
• Wählen Sie den Benutzeravatar aus
• Abmelden
• Peer-to-Peer-Chat mit Freunden
• WS-Heartbeat-Verbindung und Trennung der erneuten Verbindung
• Online- und Offline-Eingabeaufforderungen für Freunde
• Fügen Sie Freunde hinzu und überprüfen Sie Freundschaftsanfragen
• Benachrichtigung über Freundschaftsanfragen
• Erinnerung an ungelesene Nachrichten
• Benutzer suchen
• Benutzerspezifische Konfiguration
• Verzögertes Laden des Chatverlaufs
• Der Status der Freundeseingaben wird in Echtzeit aktualisiert
• Der Titel der Website zeigt die Anzahl der ungelesenen Nachrichten in Echtzeit an
• Die Freunde, mit denen Sie kürzlich gechattet haben, werden oben angepinnt
• Backend-Management
• Chat-Bild- und Datei-Upload (Mehrfach-Upload)
• Vorschau und Download von Chat-Bildern und -Dateien
• Gruppenchat
• Benutzerprofilkarte
• Freund löschen
• Erstellen Sie eine Gruppe
• Gruppeninformationskarte
• Treten Sie einer Gruppe bei
• Verlasse die Gruppe

Zugehöriger Technologie-Stack

• VueCli 3
• Vuex
• Node.js
• Element-ui
• Axios
• MongoDB
• koa2
• WebSockets
• ws

Anmerkungen und Zusammenfassung

• Teilweiser Upload mehrerer Dateien
• Wird im Nicht-Root-Verzeichnis der Website im Vue Router History-Modus bereitgestellt
• js-Tastaturüberwachung implementiert die Tastenkombination Strg + Eingabetaste zum Senden von Nachrichten
• Verwenden Sie das ES6-Modul, um Ihren eigenen Websocket-Dienst zu kapseln

um

• E-Mail [email protected]
• Projektadresse
• Über mich
• Github
• Ferienhaus