iBlog

Préparation environnementale

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

Installer la base de données MongoDB

Entrez sur le site officiel pour télécharger, la version est 4.2.17, la plate-forme est Windows et le package d'installation est au format msi.

développement de projet

1. Clonez le projet localement :

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

2. Installez les dépendances du projet front-end, back-end (administrateur, web) et back-end (serveur) :

$ pnpm install-all

3. Exécutez des projets front-end, back-end (administrateur, web) et back-end (serveur) :

$ pnpm serve-all

4. Ouvrez l'aperçu du navigateur :

http://localhost:8080 ouvre la page locale frontale ; http://localhost:8088 ouvre la page locale en arrière-plan.

Veuillez enregistrer l'utilisateur lors de votre première connexion en tant qu'administrateur backend. Après vous être connecté, vous pouvez masquer le bouton d'enregistrement pour empêcher la fuite du compte de connexion.

Système de gestion back-end

• Ajouter une nouvelle catégorie

• Liste des catégories (ajouter, supprimer, modifier, vérifier)

• Ajouter un nouvel article

• Liste d'articles (ajouter, supprimer, modifier, vérifier)

• Liste des commentaires des articles

• Ajouter un lien ami

• Liste de liens conviviale (ajouter, supprimer, modifier, vérifier)

• Liste des messages

• Liste des utilisateurs du message

• Intégration de l'éditeur Markdown

• Fonction de téléchargement d'images

• Ajouter un nouvel utilisateur

• Liste des utilisateurs (ajouter, supprimer, modifier, vérifier)

• Implémentation universelle d'interface d'ajout, de suppression, de modification et de requête (middleware resourceMiddleware)

• Fonction d'enregistrement de connexion

• Fonction de déconnexion

• Ajouter la vérification jwt (1. Recherche de nom d'utilisateur 2. Vérification du mot de passe 3. Jeton de retour)

• Ajouter un intercepteur http (demande, réponse)

Système de blogs

• Interface utilisateur de la page d'accueil du blog
• Implémentation de l'interface de la page d'accueil du blog
• Interface utilisateur de la page d'archive du blog
• Implémentation de l'interface de la page d'archive du blog
• Interface utilisateur de la page de balise de blog
• Implémentation de l'interface de la page de balise de blog
• Interface utilisateur de la page d'article de blog
• Implémentation de l'interface de la page d'article de blog
• Interface utilisateur de la page de lien d'ami du blog
• Implémentation de l'interface de la page de liens d'amis du blog
• Interface utilisateur de la page de message du blog
• Implémentation de l'interface de la page de message du blog

Notes de configuration

1. Pour répondre aux commentaires d'autres personnes sur la page de commentaires, votre boîte aux lettres QQ est utilisée pour la notification synchronisée. Vous devez configurer la boîte aux lettres dans server/plugins/sendEmail.js . Comment obtenir le code d'autorisation de la boîte aux lettres QQ est indiqué dans la figure ci-dessous (. sur la page des paramètres de compte de la boîte aux lettres QQ).

2. Configuration du compte principal pour les commentaires (le compte principal est utilisé pour les réponses par e-mail, donc l'e-mail du compte créé pour les commentaires doit être le même que l'e-mail pour le code d'autorisation de la boîte aux lettres QQ à l'étape précédente, en même temps que le commentaire). Le compte doit être défini dans web/src/commentConfig.js (notez que topNickName doit être cohérent avec le surnom du compte principal créé par le commentaire. topParentId peut être obtenu à partir de la page d'arrière-plan si le compte principal est effacé). il doit être reconfiguré.
3. Concernant le téléchargement de l'image d'arrière-plan : la valeur par défaut est de télécharger sur le serveur local. Cette méthode a des exigences plus élevées pour le serveur. Naturellement, la vitesse de chargement du front-end sera affectée. Vous pouvez choisir d'utiliser l'OSS d'Alibaba Cloud pour le téléchargement et le stockage. Vous devez ajouter server/routes/admin/index.js , commentez le code pour le téléchargement de l'image locale et enfin remplissez votre configuration Alibaba Cloud oss ​​​​.

Conditionnement et déploiement du projet

• Package de projets Web et d'administration (exécutez la commande pnpm build-all dans le répertoire racine)
• Achat de nom de domaine
• Résolution de nom de domaine
• achat d'un serveur cloud Linux
• installation de git, ajout de clé ssh
• gestion des processus pm2
• configuration ngnix
• configuration mongodb
• Migrer les données MongoDB du local vers le serveur
• Qiniuyun cdn accélération gratuite pour l'ensemble du site

Pour le déploiement de serveur en ligne, veuillez vous référer à ce guide.

Système de gestion backend de blog

Système de blogs

WelcomeStar, Problèmes

• Votre étoile est ma motivation pour les mises à jour et la maintenance continues ! ! !
• S'il y a des problèmes lors de l'utilisation, n'hésitez pas à signaler les problèmes

Liste de tâches

• Optimisation des performances, les images doivent être compressées et préchargées
• Ajouter une fonction de recherche à la page d'article de blog
• Problèmes de compatibilité des navigateurs, adaptation mobile. J'ai uniquement utilisé le développement du navigateur Google Chrome et les effets d'adaptation du téléphone mobile sur mon propre ordinateur. Cependant, il n'est pas recommandé d'utiliser le terminal mobile.
• Résolvez le problème de référencement de Vue et le problème de gigue lié à l'actualisation de la page de rendu. Nous effectuerons le pré-rendu Vue pour le moment. Nous n'excluons pas de faire un rendu côté serveur Vue ou un rendu côté serveur nuxt.js à l'avenir.
• Organisez le code et divisez-le en composants. Rendre la structure plus claire et réduire la quantité de code
• Refactoriser l'intégralité du projet à l'aide de TypeScript
• Des fonctions intéressantes seront ajoutées au fur et à mesure que j'y pense, et elles sont en développement continu...