Salon de discussion Astro Boy

nuage de codes
~~Adresse en ligne www.genal.fun~~ (Invalide et dont le déploiement n'est plus prévu)
Si vous avez des suggestions, veuillez vous rendre dans la zone des problèmes

Présentation du projet

? Pendant mon temps libre, je voulais créer un salon de discussion pour consolider les compétences front-end, j'ai donc commencé le parcours de développement du salon de discussion Astro Boy le 24 juin 2020.
? Le projet est développé à l'aide d'une dactylographie complète, qui jette les bases des futures itérations fonctionnelles. Bien sûr, j’aime aussi beaucoup la dactylographie.
? À l'heure actuelle, la salle de discussion dispose déjà de fonctions de discussion complètes. ~~D'autres fonctionnalités intéressantes seront développées à l'avenir~~ L'itération a été arrêtée maintenant ! Les amis intéressés peuvent le créer et le développer eux-mêmes, et vous pouvez le modifier à votre guise ! Je mettrai à jour de nouvelles fonctionnalités quand j'aurai le temps !

Interface du projet

Version PC

Terminal mobile

Mobile Mobile

Présentation de la fonction

Compatible mobile
Modification des informations utilisateur (avatar/nom d'utilisateur/mot de passe)
Chat de groupe/chat privé
Créer un groupe/rejoindre un groupe/quitter un groupe/un groupe de recherche floue
Ajouter des amis/supprimer des amis/utilisateurs de recherche floue
Pagination des messages
Émoticônes
Envoi d'image/aperçu d'image
Statistiques des personnes en ligne
Thème personnalisé
Rappel de reconnexion

Aperçu de la technologie

Typescript : Un surensemble de JavaScript. Son plus grand avantage est qu'il fournit un système de types et améliore la lisibilité et la maintenabilité du code.
Vue2.6.x : Framework progressif front-end.
Socket/io : Communication en temps réel, bibliothèque tierce websocket.
Vuex : Un modèle de gestion d'état développé spécifiquement pour les applications Vue.js.
Nestjs : Il s'agit d'un framework permettant de créer des applications côté serveur Node.js efficaces et évolutives. Il est écrit sur la base de TypeScript et combine les concepts associés de OOP1, FP2 et FRP3.
Typeorm : prend en charge les dernières fonctionnalités JavaScript et fournit des fonctionnalités supplémentaires pour vous aider à développer toute application utilisant une base de données.
ES6+ : Grâce à la syntaxe ES6+, les fonctions fléchées, async/await et autres syntaxes sont très faciles à utiliser.
SASS (SCSS) : en utilisant SCSS comme langage de prétraitement CSS, vous pouvez utiliser le moyen le plus efficace pour créer des conceptions complexes avec une petite quantité de code.

Conception de la structure des tables de base de données

Configuration de l'environnement

Base de données mysql et base de données de chat (notez que le format de la base de données est utf8mb4)
nœud v10.16.3

Exécuter le projet

Projet frontal

 cd genal - chat - client 
npm i
npm run serve

configuration mysql Si mysql ne parvient pas à se connecter et qu'une erreur est signalée : ER_NOT_SUPPORTED_AUTH_MODE, cela est dû à l'incompatibilité de la version mysql. Veuillez vous référer à cet article https://blog.csdn.net/qq_41831345/article/details/83150502.
Il n'y a pas de script SQL dans la base de données. Changez simplement le mot de passe de la base de données dans le back-end app.module.ts et créez une nouvelle base de données chat .
Projet back-end

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

Enregistrement d'itération du système

Cliquez pour voir