Explication détaillée du système de gestion de contenu de blog

1. Contenu mis à jour

1. La base de données a été repensée et modifiée en une structure de base de données subDocs regroupée par utilisateurs

2. Selon la base de données change, toutes les interfaces ont été repensées et unifiées pour adopter le même style d'interface que Gérer l'argent maintenant

3. Supprimer le mode invité d'origine, ajouter la fonction d'enregistrement de connexion, et prend en charge la connexion contextuelle.

4. Ajoutez une page d'accueil pour afficher les derniers articles publiés et les utilisateurs enregistrés

5. Ajoutez des fonctions telles que la modification du mot de passe, la déconnexion et la déconnexion.

6. Optimisez le composant de fenêtre contextuelle, qui est plus intelligent, comporte plus d'éléments de configuration et est proche du composant NetEase $.dialog. Et un ensemble de codes a uniquement modifié le CSS pour réaliser la fenêtre contextuelle côté PC et les fonctions toast côté WAP sous la même interface.

7. Ajouter une adaptation mobile

8. Optimisez le code original et corrigez quelques bugs.

Pour un contenu plus mis à jour, veuillez passer aux projets CMS-of-Blog_Production et CMS-of-Blog.

2. Analyse du code de base

1. Base de données

Repenser la base de données d'origine et la modifier en groupes d'utilisateurs Les sous-docs. structure de la base de données. De cette façon, la structure de la base de données avec les utilisateurs dans leur ensemble est plus claire et elle est également plus facile à utiliser et à lire. Le code est le suivant :

Au début du code, trois nouveaux Schemas sont définis : articleSchema, linkSchema et userSchema. ArticleSchema et linkSchema sont imbriqués dans userSchema, formant une structure de base de données subDocs regroupée par utilisateurs. Le schéma est un squelette de modèle de base de données stocké sous forme de fichier et n'a pas la capacité de faire fonctionner la base de données. Le schéma sera ensuite publié en tant que modèle. Model est un modèle généré par la publication de schéma, qui est une paire d'opérations de base de données avec des propriétés et des comportements abstraits. Entités pouvant être créées par Model. Par exemple, une entité sera créée lorsqu'un nouvel utilisateur est enregistré.

Une fois la base de données créée, elle doit être lue et exploitée. Vous pouvez consulter le code qui envoie le code de vérification par e-mail lors de l'inscription pour avoir une idée.

Après avoir reçu la demande d'envoi du code de vérification de l'e-mail, l'arrière-plan initialisera un utilisateur tmp. Passer new db.User() créera une instance de User, puis exécuter l'opération save() écrira ces données dans la base de données. Si l'inscription échoue dans une demi-heure, faites correspondre l'adresse e-mail et db.User.remove() supprimez ces données. Pour une utilisation plus spécifique, veuillez vous rendre sur Documents officiels.

2. L'arrière-plan

divise toutes les requêtes en trois types :

• requête asynchrone ajax, chemin unifié : /web/

• Parties de la page publique, telles que la page d'accueil du blog, la connexion, l'inscription, etc., chemin unifié : /

• Lié au blog ID utilisateur Partie Blog, chemin unifié : /:id/

Pour que chaque utilisateur puisse avoir sa propre page de blog, le code spécifique est le suivant :

Vous pouvez cocher le code d'interface ajax spécifique. Regardez le fichier index.js dans le dossier du serveur.

3. Composant pop/toast

3.1 Description des paramètres de configuration du composant pop/toast

• pop : Afficher ou non la fenêtre pop-up, selon le paramètre de contenu, c'est vrai s'il y a du contenu

• css : Personnaliser la classe du pop-up fenêtre, la valeur par défaut est vide

• showClose : Si faux, le bouton de fermeture ne sera pas affiché. La valeur par défaut est

•  : Le rappel après avoir cliqué sur le bouton de fermeture dans la fenêtre pop-up closeFn

•  : Le titre de la fenêtre pop-up, la valeur par défaut est "rappel chaleureux", si vous vous ne souhaitez pas afficher le titre, transmettez-le simplement vide title

• (obligatoire) : le contenu de la fenêtre contextuelle prend en charge la transmission du HTMLcontent

•  : 'Copie du bouton 1|Classe de style du bouton 1', qui sera formatée en btn1Text et btn1Cssbtn1

•  : rappel après avoir cliqué sur le bouton 1 . Si cb1 ne renvoie pas explicitement true, la fenêtre pop-up sera fermée par défaut après avoir cliqué sur le bouton cb1

•  : 'Bouton 2 copier | Bouton 2 style class'. , formaté en btn2Text et btn2Cssbtn2

•  : rappel après avoir cliqué sur le bouton 2. Si cb2 ne renvoie pas explicitement true, le bouton par défaut sera fermé après avoir cliqué sur la fenêtre contextuelle. Les paramètres du bouton ne sont pas transmis et le texte de copie est par défaut « Je sais ». Cliquez pour fermer la fenêtre contextuelle cb2

•  : La fonction d'initialisation après la fenêtre contextuelle. window est établie, qui peut être utilisée pour gérer des interactions complexes (notez la fenêtre pop-up) La fenêtre doit passer de false à true avant que pop ne soit exécuté) init

•  : rappel fonction après la disparition de la fenêtre pop-updestroy

• wapGoDialog : Lors de l'utilisation du terminal mobile, s'il faut utiliser des fenêtres pop-up, la valeur par défaut est fausse, utilisez toast

3.2 Code du composant pop/toast

3.3 Code de formatage des paramètres du composant pop/toast

Pour faciliter l'utilisation, nous l'avons abrégé lors de son utilisation. Pour que le composant soit reconnu, les paramètres entrants doivent être formatés dans l'action vuex.

Afin de rendre le terminal mobile compatible avec le composant fenêtre pop-up, nous utilisons mediaQuery pour changer le style du terminal mobile. Ajoutez le paramètre wapGoDialog pour indiquer si nous devons utiliser des fenêtres pop-up lorsque nous sommes sur le terminal mobile. La valeur par défaut est false et utiliser toast. De cette façon, un ensemble de codes peut être compatible avec PC et WAP.

Postscript

Ici, nous analysons principalement l'arrière-plan et la base de données, et c'est relativement simple. Vous pouvez vérifier le code source. En bref, c'est un bon exemple de front-end commençant par le back-end et la base de données. Il a des fonctions riches et vous pouvez apprendre vue.js.

Recommandations associées :

Le système de gestion de contenu open source PHP le plus complet CMS

20 systèmes de gestion de contenu open source PHP CMS

Basé sur le système de gestion de contenu du framework Laravel