努力经营当下，直至未来明朗！
Annuaire d'articles
普通小孩也要热爱生活！
1. Présentation du projet
Le système de blog personnel est mis en œuvre en séparant le front-end et le back-end, en utilisant une base de données pour stocker les données pertinentes et en utilisant Tomcat pour le déploiement du projet. Le front-end se compose principalement de quatre pages : page de connexion, page de liste, page de détails et page d'édition. La simulation ci-dessus implémente la page de liste de blogs la plus simple. Il combine le backend pour implémenter les fonctions principales suivantes : connexion, modification du blog, déconnexion, suppression du blog et connexion forcée.
Cependant, ce projet n'a pas de fonction d'enregistrement des utilisateurs. Les informations sur les utilisateurs ne peuvent être stockées dans la base de données qu'à l'avance, puis vérifiées et connectées ; et les avatars des utilisateurs ne peuvent pas être définis par eux-mêmes. Pendant le processus d'écriture de la page frontale, l'image de l'avatar a été écrite comme statique ; le nombre d'articles et de catégories dans les informations utilisateur ne sont pas implémentés dans le back-end et sont directement écrits comme statiques dans la page front-end.
2. Effets du projet
Tomcat doit être allumé pour utiliser les pages suivantes.
-
page de connexion
-
Page de liste/Page d'accueil
-
Page de détails du blog
-
modifier la page
3. Réalisation du projet
1. Processus de base du développement logiciel
① Analyse de faisabilité ;
② Analyse des besoins : clarifier les problèmes que le programme résoudra, à quoi il ressemblera et quelles fonctions il aura. (Dans le développement réel, il est formulé par le chef de produit)
③ Conception générale
④ Conception détaillée
⑤ Codage
⑥ Test
⑦ Sortie
2. Analyse des exigences du système du blog
① Réaliser la fonction d'affichage de la page de liste du blog
② Réaliser la fonction d'affichage de la page de détails du blog
③ Fonction de connexion (l'enregistrement n'est pas implémenté pour le moment)
④ Restreindre les autorisations des utilisateurs (connexion obligatoire)
⑤ Afficher les informations de l'utilisateur
⑥ Réaliser la déconnexion (déconnexion)
⑦ Publier le blog
⑧ Supprimer le blog
3. Conception des grandes lignes du système de blog
(Lors de l'écriture du code, vous devez "planifier avant d'agir")
En fait, l'essentiel ici est [la conception de la base de données]
Notre activité actuelle est relativement simple et ne nécessite que deux tables :
① Blog de la table Blog (blogId, title, content, postTime, userId)
② User table user (userId, userName, password) (Les fonctions telles que l'adresse Gitee et la classification des articles ne sont pas prises en compte pour l'instant)
4. Créer un projet maven
Remarque : ① L'incrémentation automatique commence à partir de 1
② La taille du texte est de 64 Ko. Le contenu du blog ne dépasse généralement pas 64 Ko et les captures d'écran des blogs ne sont pas stockées avec le texte.
5. Écrivez du code pour les opérations de base de données
- Introduire les dépendances : servlet3.1.0, mysql5.1.49, jackson2.13.4.1
- Le DataSource qui encapsule la base de données (mode cas unique + sécurité des threads)
encapsule non seulement le DataSource, mais encapsule également l'établissement et la déconnexion de la base de données.
Supplément :
① ctrl+alt+t : fonction surround
② La connexion est java.sql.Connection, pas java.mysql.Connection
- Lors de la fermeture et de la libération de ressources, la première méthode consiste à essayer... d'attraper les trois connexions qui doivent être libérées respectivement. La deuxième méthode consiste à n'utiliser qu'une seule connexion try...catch pour les trois connexions qui doivent être libérées.
La première méthode d’écriture est meilleure.
Raison : si une exception est levée dans un certain lien lors de la première méthode d'écriture, cela n'affectera pas l'opération de fermeture ultérieure. La deuxième façon d'écrire entrera dans le catch une fois qu'une exception se produira.À ce moment, la fermeture ultérieure ne pourra pas être exécutée, ce qui entraînera une fuite de ressources.
(Le lancement direct d'exceptions est également écrit de la même manière, ce qui entraînera une fuite de ressources.)
- Créez une classe d'entité en fonction des exigences.
Un objet de classe d'entité correspond à un enregistrement dans la table.
Comment écrire une classe d’entité ?
——Comment écrire la structure de la table, comment écrire la classe d'entité.
Les types datetime et timestamp dans MySQL sont représentés par TimeStamp en Java.
- Pour encapsuler davantage les ajouts, suppressions, modifications et requêtes impliqués dans les classes d'entités ci-dessus, c'est-à-dire pour encapsuler le code jdbc.
Dao : Objet d'accès aux données
L'opération d'accès à la base de données peut être effectuée à l'aide de ces objets Dao.
Statement.executeUpdate(); Les données renvoyées indiquent combien de lignes sont affectées
6. Mener des interactions front-end et back-end (points clés)
Laissez la page lancer une requête http et le serveur renvoie une réponse http. (Vous devez vous mettre d'accord sur ce à quoi ressemble la requête http et à quoi ressemble la réponse)
1)Page de liste des blogs :
① Ne codez pas en dur les données, mais laissez la page obtenir la liste actuelle des blogs à partir de la base de données.
(Collez d'abord tous les fichiers pertinents du front-end dans le répertoire webapp)
② Lors du chargement de la page, elle lance une requête http via ajax et obtient les données de la liste de blogs du serveur.
③ Lorsqu'il y a un problème avec le Web, la première chose qui vient à l'esprit est "Capturer des paquets" pour voir s'il s'agit d'un problème front-end ou back-end. (Si certains ne sont pas capturés, forcez l'actualisation ctrl+f5 )
Remarque : Le favicon qui apparaît dans fiddler est une requête envoyée par le navigateur pour obtenir l'icône de la page. Si le site Web n'a pas d'icône, 404 apparaîtra.
① Dans un programme avec un front-end et un back-end séparés, l'obtention de la page et l'obtention des données dans la page sont des requêtes distinctes.
② S'il n'y a qu'une page sans données et que la capture de paquets ne peut pas capturer la demande d'obtention de données, cela signifie qu'il y a un problème avec le code frontal et que le front-end n'a pas envoyé correctement la requête ajax.
Remarque : La méthode ne prendra effet qu’après son appel ! !
Sois prudent! ! Garanti qu’aucune exception de pointeur nul ne se produira ! !
Problèmes et solutions:
① Ce que nous voulons présenter estformatheure, mais vous constaterez que l'horodatage apparaît à ce moment-là !
Raison :
Grâce à la capture de paquets, on constate que les données de réponse renvoyées par le serveur sont un horodatage.
Dans le code du serveur, l'heure demandée à partir de la base de données mysql est placée dans l'attribut postTime, puis elle est convertie en chaîne json via jackson et renvoyé ; c'est-à-dire : lors du processus de conversion en json, il est transformé en horodatage.
Solution :
Alors, comment Jackson obtient-il l'horodatage dans l'objet Blog ? Obtenu via la méthode getter.
Il suffit donc de modifier la méthode getter pour qu'elle renvoie une chaîne au lieu d'un TimeStamp. La chaîne est une heure et une date formatées !
① CeciClasse SimpleDateFormatL'horodatage peut être converti en heure formatée !
(Pour des exemples d'utilisation, veuillez vous référer à : Utilisation de la classe SimpleDateFormat )
② L'horodatage doit être converti en heure formatée. Le format spécifique doit être spécifié dans la méthode de construction !
③ (Le format du paramètre peut être spécifié par vous-même, mais les lettres spécifiques ne peuvent pas être modifiées. Chacune a sa propre signification, comme MM signifie mois, mm signifie minute. La signification spécifique du paramètre peut être confirmée en ligne lors de son utilisation !)
(Formater l'heure et la date)
② De plus, un autre problème a été trouvé : dans la listeOrdre des articlesLes versions les plus récentes devraient figurer en haut, mais actuellement, elles sont classées par ordre de première publication en haut.
La solution donc : ajouter un tri lors de l'interrogation.
③ À ce stade, si le contenu du blog inséré est relativement long, il occupera une grande page de liste car le texte entier est affiché ; mais logiquement parlant, la page de liste du blog devrait afficher le texte principal.Informations « Résumé »。
(article long)
Solution :
Tronquez le contenu de la page de liste des blogs jusqu'à ce que la longueur atteigne une certaine valeur.Supprimer une partie de la sous-chaîne. (Ce n'est pas grave si vous décidez vous-même de la longueur)
(Effet)
[Note] Lorsqu'il y a un problème avec notre programme, comment devons-nous le résoudre ?
① Assurez-vous de trier le processus du code en question
② Être capable de trouver le code pertinent (débogage, pas de comparaison !!)
2）Implémenter la page de détails du blog
① Cliquez pour afficher le texte intégral pour accéder à la page de détails et voir le texte du blog correspondant dans la page de détails.
② Méthode de traitement :
Cliquez pour afficher le texte intégral. À ce moment, une demande d'obtention sera lancée, qui demande la page blog_detail.html ; à ce moment, nous devons également indiquer au serveur quel blog nous demandons !
Convention : ajoutez une chaîne de requête à l'URL de la page de demande pour identifier le blog spécifique. (La chaîne de requête a été ajoutée pour identification lorsque le bouton "Afficher le texte intégral" est généré)
③ Après avoir accédé à la page de détails du blog, vous devez demander à la page de détails du blog de lancer à nouveau une requête ajax pour obtenir le contenu du blog correspondant au blogId actuel du serveur ; puis la page de détails du blog ajoutera les données obtenues à la page du navigateur.
④ Étapes de fonctionnement :
1) Mettez-vous d'accord sur les interfaces d'interaction front-end et back-end.
Lancez une requête ajax sur la page de détails du blog pour obtenir un contenu spécifique du blog.
2) Implémenter le code du serveur
pour renvoyer les données conformément à l'accord ci-dessus
3) Implémenter le code client
pour obtenir des données de blog via des requêtes ajax initiées par la page
【Note】location.search est utilisé pour obtenir la chaîne de requête
(A chaque fois que le code est modifié, le serveur doit être redémarré)
Cependant, vous constaterez que lorsque vous cliquez sur "Afficher le texte intégral", la page à laquelle vous accédez est toujours le résultat précédent. Cela déclenche le cache du navigateur !
① Raison :
Le navigateur doit obtenir les données de la page actuelle du serveur distant via le réseau, ce qui peut prendre du temps. Afin d'améliorer l'efficacité à ce stade, l'approche consiste à laisser le navigateur mettre en cache les données nécessaires ; il y a pas besoin d'accéder au réseau la prochaine fois, le cache est lu directement.
② Méthode :
Par conséquent, afin de garantir que les données sont obtenues à partir du réseau, il est nécessaire de forcer l'actualisation ctrl+f5 .
Si vous rencontrez un problème avec la page frontale, utilisez fn+f12 pour appeler la console afin de vérifier les anomalies.
Supplément :
① Le compilateur dans VS est cl.exe et le compilateur dans IDEA est javac... Les compilateurs sont généralement en ligne de commande.
②IDE est un environnement de développement intégré, IDE != IDEA
question：
① Le texte du blog doit être au format markdown (après tout, la page d'édition du blog est un éditeur de démarque, les données soumises sont au format markdown et les données stockées dans la base de données sont également au format markdown, donc l'affichage final doit être également au format markdown) ② Afficher
les résultats Il s'agit de texte brut (pas comme prévu, il devrait être rendu en markdown)
Solution:
Utilisez la bibliothèque editor.md pour terminer le rendu.
Introduisez la dépendance editor.md dans blog_detail.html
(après rendu)
Si vous souhaitez que l'arrière-plan du contenu affiche un effet translucide, modifiez simplement les paramètres et tout ira bien.
(Cet effet n'est pas bon)
(Transparent signifie que l'élément actuel applique complètement l'arrière-plan de l'élément parent)
3）Connexion au blog
Logique de connexion :
① L'utilisateur visite login.html et saisit le nom d'utilisateur et le mot de passe.
② Clique sur le bouton de connexion et lance une demande, soumettant le nom d'utilisateur et le mot de passe au serveur.
③ Le serveur vérifie l'identité. Si la vérification réussit, il passe au page de détails du blog.
① Mettez-vous d'accord sur les interfaces front-end et back-end
(remarque : les demandes vont au front-end et les réponses vont au back-end)
②Écrire le code frontal
Assurez-vous de spécifier l'attribut name afin qu'il corresponde à la clé dans la paire clé-valeur !
③Écrivez le code back-end
LoginServlet
4) Implémenté dans la page de liste de blogs, la page de détails et la page d'éditionL'accès nécessite une connexion forcée. (commun)
Logique métier :
Dans la page de liste des blogs, la page de détails et la page d'édition, une requête ajax est lancée lors du chargement de la page. Cette requête ajax vise à obtenir l'état de connexion actuel du serveur. Si vous n'êtes pas actuellement connecté, vous serez redirigé directement vers la page de connexion. Si vous êtes déjà connecté, aucun traitement ne sera effectué.
① Interface interactive front-end et back-end :
② Code front-end : Déterminez si le code d'état est 200 ou 403. S'il est 200, rien ne se passera. S'il est 403, cela forcera un saut.
③ Code back-end :
il vérifie simplement si l'utilisateur actuel est connecté, c'est-à-dire : obtient la session et l'objet utilisateur qu'elle contient. S'il peut être obtenu, cela signifie qu'il a été connecté et renvoie 200, sinon il renvoie 403.
Parce que les restrictions de connexion et les sauts sont utilisés dans de nombreuses pages, mais que nous n'avons pas besoin d'effectuer un travail répétitif, nous créons donc directement un nouveau dossier js dans le code front-end et créons un nouveau fichier app.js pour stocker ces codes répétés. parvenir à la réutilisation du code.
5) Dans la page de liste et la page de détailsAfficher dynamiquement les informations utilisateur
Paramètres logiques :
① Page de liste de blogs : pendant le chargement de la page, les informations sur l'utilisateur actuellement connecté sont obtenues du serveur et affichées sur la page. ② Page de détails du blog : obtenez les informations sur l'utilisateur du blogueur
à partir du serveur pendant le chargement de la page et affichez les informations sur la page.
① Interface d'interaction front-end et back-end :
② Écrire le code back-end
(J'ai utilisé deux requêtes SQL, mais cela peut en fait être fait avec un seul SQL : requête conjointe ou sous-requête)
③ Écrire le code frontal
【Résumé】Écrire des routines de programmes Web
En fait, les fonctions implémentées ci-dessus font la même chose :
① Tri de la logique métier
② Concevoir l'interaction front-end et back-end
③ Écrire le code front-end : essentiellement ajax (envoyer une requête) + dom (afficher sur la page en fonction de la demande)
④ Écrire le code back-end : essentiellement servlet + jdbc + opération jackson
(avant et après L'ordre d'écriture du code est incertain)
Supplément : ① Lorsque les images sont stockées dans la base de données, le chemin de l'image
est stocké et l'image est enregistrée sur le disque dur sous la forme d'un fichier. ② Il n'est pas recommandé de stocker des images directement dans la base de données. Les images sont des données binaires et ne sont pas adaptées aux bases de données relationnelles.
6）Se déconnecter(État de déconnexion)
La déconnexion Windows équivaut en fait à une déconnexion.
Logique métier :
① Il y a un bouton de déconnexion dans la barre de navigation de la page de liste de blogs/page de détails/page d'édition, et notre implémentation est une balise a. Lorsque vous cliquez dessus, une requête http sera envoyée au serveur (pas ajax, mais si vous le souhaitez utiliser Ajax est également OK)
② La requête http envoyée indique au serveur que nous voulons nous déconnecter, et le serveur supprimera l'objet utilisateur dans la conversation et redirigera vers la page de connexion.
③ Remarque : Ce qui est supprimé est l'objet utilisateur dans la session plutôt que l'objet HttpSession, car HttpSession n'a pas de méthode directe de suppression (Servlet ne la fournit pas). Bien que la session puisse être supprimée en définissant le délai d'expiration, elle n'est pas une bonne idée. Sélectionnez ; De plus, la condition que nous implémentons pour déterminer l'état de connexion est que HttpSession existe et& l'utilisateur existe, donc l'objet utilisateur peut être supprimé directement ici
① Interface interactive front-end et back-end
② Code frontal
Il vous suffit de définir une valeur pour l'attribut href de la balise a, et il n'est pas nécessaire d'écrire du code js.
Code back-end :
LogoutServlet
7)Publier un blog
Logique métier :
Obtenez les données soumises par les utilisateurs à partir de la page d'édition du blog et enregistrez-les dans la base de données. L'utilisateur remplira le titre et le texte sur la page d'édition du blog, et après avoir cliqué sur "Publier l'article", lancera une requête http. Après avoir reçu les données, le serveur construira un objet Blog et l'insérera dans la base de données.
Objet du blog :
① blogId est généré automatiquement
② le titre et le contenu sont le contenu soumis par l'utilisateur
③ postTime est directement l'heure insérée dans la base de données, pas besoin de la spécifier manuellement, c'est-à-dire : now()
④ userId : L'utilisateur qui s'est connecté lors de la publication du l'article est l'auteur et les informations de l'utilisateur connecté se trouvent dans HttpSession .
① Interface interactive front-end et back-end :
② Implémenter le code du serveur (réponse)
[ Supplément ]
Dans des circonstances normales, vous devez être connecté pour lancer une requête POST/blog, alors pourquoi devez-vous vérifier à nouveau si vous êtes connecté ?
Raison :
① Que se passe-t-il s'il existe une structure manuelle ? Si vous utilisez postman pour construire directement la requête, vous pouvez contourner la connexion et insérer directement les données du blog.
② Pour construire un objet blog, vous devez connaître l'ID utilisateur. Pour le moment, vous ne pouvez connaître l'auteur de l'article (ID utilisateur) que si vous savez qui est connecté. Le userId provient de l'objet HttpSession getAttribute.
③ Implémentation du code front-end (code client) :
(Cela n'implique pas non plus de codage js)
① Lors de l'écriture de < textarea name="content" style="display:none"> < /textarea>, le contenu markdow saisi par l'utilisateur sur la page peut être automatiquement obtenu par textarea ; mais lorsque editor.md doit être initialisé Ajouter un nouvel attribut : saveHTMLtoTextarea : true
② J'ai trouvé un problème à ce moment-là : la taille de la page de l'éditeur Markdown a diminué.
C'est évidemment un problème avec le style front-end, j'ai donc vérifié le style front-end (fn+f12)
(j'ai trouvé que le blog-edit -container est normal, mais le formulaire a rétréci)
③ Aussi C'est-à-dire : si la balise form ne spécifie pas de hauteur, elle se rétrécira d'elle-même, entraînant également un rétrécissement des sous-éléments internes.
Solution : Spécifiez une hauteur pour le formulaire, aussi élevée que celle de l'élément parent.
8）Supprimer le blog
Logique métier :
① Les auteurs ne peuvent supprimer que leurs propres articles, pas ceux d’autres personnes.
② Il n'y a actuellement aucun rôle d'administrateur.
③ Ajoutez un bouton de suppression à la barre de navigation de la page de détails du blog . Lorsque vous cliquez sur le bouton, l'opération de suppression sera déclenchée. Il s'agit d'une requête HTTP GET initiée via l'attribut href de la balise a.
④ La vérification sera effectuée lors de la suppression : ce n'est que si l'utilisateur actuellement connecté est l'auteur de l'article que celui-ci peut être véritablement supprimé, sinon il sera demandé qu'il n'y a pas d'autorisation de suppression.
① Interface interactive front-end et back-end :
② Implémentation du serveur (code back-end) :
La majeure partie du code est utilisée pour déterminer des situations illégales, c'est une bonne prise de conscience.
③ Implémentez le code du navigateur (front-end) :
① Ajoutez directement une balise a
② Mais vous constaterez que lorsque vous cliquez sur Supprimer, le blogId n'est pas inclus dans l'URL, ce qui rend la suppression impossible.
③ Donc : vous pouvez légèrement modifier le contenu de l'attribut href via le code js lorsque la page est chargée, afin que le blogId soit inclus dans l'URL.
③ Faites attention à la distinction : location.href (chemin complet) et location.seach (chaîne de requête)
location est l'objet global fourni avec l'API dom (l'objet global en js)
4. Code du projet
-
Environnement :
IDEA + MySQL + Smart Tomcat + VSCode -
Disposition du projet
-
Code du projet :
Lien Gitee : Système de blog personnel
Résumer
- De nombreux problèmes ont été rencontrés lors de la mise en œuvre d'un système simple de blog personnel, parmi lesquelsConventions sur les interfaces interactives front-end et back-endExtrêmement important! !
- Ce n'est qu'en répétant et en pratiquant que vous pourrez mieux comprendre le projet et sa mise en œuvre.
Si vous avez des suggestions ou des questions, envoyez un message privé ou commentez directement !
Bienvenue dans la petite fenêtre ! ou Rendez-vous dans la section commentaires !