Wechat Wecat

WeCat

introduire

• Projet de chat instantané basé sur Vue.js Family Bucket + WebSocket + Node.js + Koa2 + MongoDB
• La partie fonctionnelle fait référence à WeChat, avec quelques fonctions intéressantes ajoutées. Les commentaires sur le code du projet sont très détaillés et il s'agit d'un bon projet d'introduction full-stack pour apprendre Vue, Node.js et koa.
• Le front-end et le déploiement du projet sont réalisés indépendamment. S'il y a des imperfections dans diverses interactions et diverses fonctions de logique métier, n'hésitez pas à les signaler.

Affichage du projet

1. Connectez-vous

2. Inscrivez-vous

3. Récupérer le mot de passe

4. L'inscription est réussie, sélectionnez l'avatar

5. Panneau principal

6. Ajouter des amis

7. Panneau d'informations sur les amis

8. Envoyer des messages et des fichiers

9. Panneau multifonction, envoyer des émoticônes

10. Menu des paramètres personnalisés

11. Page Administrateur, informations utilisateur

12. Interrogez tous les enregistrements de discussion

13. Détails de l'historique des discussions

14. Documentation API

Structure du répertoire

1. le serveur est le serveur
2. public est un fichier statique
3. db est la sauvegarde d'exportation MongoDB
4. src est le dossier du projet

Tutoriel d'installation

1. Cloner le projet git clone https://github.com/imzusheng/Wecat.git
2. Répertoire racine du projet cd, installer les dépendances npm install
3. Exécuter le service npm run serve
4. cd ./server, puis installez les dépendances du serveur npm install
5. Importer la base de données mongorestore -d wecat ./db
6. Exécutez le serveur npm run dev

Compte test

ID utilisateur : [email protected]
mot de passe : a123456

FAIRE

• Se connecter
• Empêcher les connexions en double
• Heure de la dernière connexion
• Lieu de connexion récent (province-ville-district)
• S'inscrire (vérification par e-mail)
• Récupérer le mot de passe (vérification par e-mail)
• Sélectionnez l'avatar de l'utilisateur
• se déconnecter
• Discutez en peer-to-peer avec des amis
• Connexion et déconnexion du battement de cœur WS, reconnexion
• Invites d'amis en ligne et hors ligne
• Ajouter des amis et vérifier les demandes d'amis
• Notification de demande d'ami
• Rappel de message non lu
• Rechercher des utilisateurs
• Configuration personnalisée par l'utilisateur
• Chargement paresseux de l'historique des discussions
• Statut de saisie d'ami mis à jour en temps réel
• Le titre du site Web affiche le nombre de messages non lus en temps réel
• Les amis avec lesquels vous avez récemment discuté sont épinglés en haut
• Gestion back-end
• Téléchargement d'images de chat et de fichiers (téléchargement multiple)
• Aperçu et téléchargement des images et des fichiers du chat
• discussion de groupe
• Carte de profil utilisateur
• supprimer un ami
• Créer un groupe
• Fiche d'information du groupe
• Rejoindre un groupe
• Quitter le groupe

Pile technologique associée

• VueCli 3
• Vuex
• Noeud.js
• Élément-ui
• axios
• MongoDB
• koa2
• WebSockets
• ws

Notes et résumé

• Téléchargement multi-fichiers en plusieurs parties
• Déployé dans le répertoire non racine du site Web en mode Vue Router History
• La surveillance du clavier js implémente la combinaison de touches ctrl + entrée pour envoyer des messages
• Utilisez le module ES6 pour encapsuler votre propre service Websocket

à propos

• Envoyer un e-mail à [email protected]
• Adresse du projet
• Sur moi
• github
• gîte