[JAVA] Implémenter le lien texte avec Springboot + Thymeleaf
Implémenter le lien texte avec Springboot + Thymeleaf
Ravi de vous rencontrer. Je m'appelle Doorbell. Cette fois, nous allons l'implémenter selon le titre.
Auto-introduction
Une société spécialisée dans le SES à Tokyo, participant actuellement à un certain projet Java. Tenshoku Katsudo en août cette année! Et a retrouvé l'humanité. Aikatsu est bon.
Cet environnement
- Win10
- javac 9.0.1
- Thymeleaf 2.1.3
Aperçu de la mise en œuvre
--Cliquez sur le lien texte pour accéder à la page MV de Glass Doll
La poupée de verre est Aikatsu! C'est une chanson appartenant à un personnage nommé Yurika Todo dans la série. Quoi qu'il en soit, c'était tellement cool que j'ai été assez choqué la première fois que je l'ai vu. Cette fois, le lien MV pour une telle chanson Nous allons le mettre en œuvre pour qu'il puisse passer à.
Qu'est-ce que Aikatsu
"Aikatsu!" Est un jeu d'arcade pour filles japonaises qui utilise le châssis de jeu d'arcade à cartes à collectionner et la carte de données das (DCD) de Bandai. Le jeu a été mis en ligne le 25 octobre 2012. La copie de capture est "National Idol Audition Game". Aikatsu! -Wikipedia
En plus des jeux ci-dessus, l'anime de la série TV Tokyo "Aikatsu on Parade! ] Est diffusé.
Code source
Liste des codes sources
--pom.xml: fichier important contenant des informations sur le projet --HelloWorldController.java: Classe principale --index.html: HTML du modèle
├── src
│ └── main
│ ├── java
│ │ └── com
│ │ └── example
│ │ └── demo
│ │ └── controller
│ │ └── HelloWorldController.java
│ └── resources
│ └── templates
│ └── index.html
└── pom.xml
pom.xml
Fichiers importants contenant des informations sur le projet Spécifiez Thymeleaf 2.1.3.
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
HelloWorldController.java
La classe principale. Utilisez Thymeleaf pour incorporer la valeur d'un objet dans un modèle HTML et le sortir.
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class HelloWorldController {
@RequestMapping(value = "/", method = RequestMethod.GET)
public String helloWorld(Model model) {
model.addAttribute("message", "Entrée au serviteur"); //Définir le texte à afficher
model.addAttribute("url", "https://www.youtube.com/watch?v=EbxoEIh3aHc"); //Créer un lien vers le MV de Glass Doll
return "index";
}
}
index.html
Fichier HTML modèle. Décrivez la fonction de base du modèle.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Bonne journée</title>
<meta charset="utf-8" />
<script>
function mes(event){
event.returnValue = "Je vais sucer du sang!";
}
window.onbeforeunload = mes;
</script>
<!--Cliquez sur le lien pour accéder à la page MV de Glass Doll-->
</head>
<body>
<a th:href="@{${url}}"><span th:text="${message}">sss</span></a>
</body>
</html>
J'ai inclus une implémentation qui affiche la ligne décisive de Yurika-sama lorsque le lien est pressé, mais je voulais vraiment appeler JS à partir d'un fichier externe, c'est donc une réflexion.
Méthode d'exécution
- Faites un clic droit sur le projet et sélectionnez "Spring Boot Application" dans l'onglet "Exécuter".
2.http://localhost:8080
Si l'accès à l'URL ci-dessus est réussi, l'écran suivant s'affiche.
-
Lorsque vous appuyez sur le lien texte, un message s'affiche, cliquez donc sur «Quitter cette page».
-
Si l'écran change et que le MV de "Glass Doll" est joué, tout va bien.
th: description de l'attribut
th:text
- La valeur spécifiée dans l'attribut th: text remplace le texte de l'élément
Cette fois, j'ai entré sss sur index.html, mais vous pouvez voir que le texte de l'élément a été remplacé par la valeur spécifiée pour l'attribut. Dans le fichier Java, les parties suivantes lui correspondent.
- HelloWorldController.java
model.addAttribute("message", "Entrée au serviteur"); //Définir le texte à afficher
Tutorial: Using Thymeleaf (ja)
Cette expression \ $ {today} est simple et signifie "obtenir une variable nommée aujourd'hui", mais elle peut être plus compliquée (par exemple, \ $ {user.name} "obtient une variable utilisateur". Cela signifie "appeler la méthode getName ()").
th:href
Utilisez l'expression de lien "@ {…}" lors de la définition de l'URL. Il est utilisé en combinaison avec l'attribut Thymeleaf "th: href attribute". Si vous souhaitez utiliser des variables pour générer des URL, vous utiliserez cette syntaxe.
Dans le fichier Java, les parties suivantes lui correspondent.
- HelloWorldController.java
model.addAttribute("url", "https://www.youtube.com/watch?v=EbxoEIh3aHc"); //Créer un lien vers le MV de Glass Doll
Grâce à la mise en œuvre
Grâce à cette implémentation, nous avons résumé les points que nous souhaitons améliorer et ce que nous voulons essayer ensuite.
- Ecrire une URL ou une chaîne de caractères dans le fichier de propriétés et l'appeler
- Coopération DB
À la fin
Puisque JSP est utilisé sur le terrain, j'ai essayé de le publier comme un examen de la façon d'écrire Thymeleaf, mais je pense que j'ai réussi à en faire un formulaire. Ouais, c'est aussi Aikatsu.
L'histoire a changé, et il y a quelques mois, il y avait une partie que je ne pouvais pas mettre en œuvre au travail, et j'ai pu la mettre en œuvre avec difficulté. À ce moment-là, M. Mizuki a dit: «Je suis désolé de ne pas pouvoir le faire. Sentiments. S'il y en a, avancez. Je me suis souvenu des mots et les ai profondément poignardés.
J'espère que vous lirez cet article et que vous vous intéresserez à Aikatsu. [Aikatsu! Festival Blu-ray TOUTE SAISON! !! ](Https://www.amazon.co.jp/%E3%82%A2%E3%82%A4%E3%82%AB%E3%83%84%EF%BC%81ALL-SEASON-Blu-ray -% E3% 81% BE% E3% 81% A4% E3% 82% 8A% EF% BC% 81% EF% BC% 81-% E8% AB% B8% E6% 98% 9F% E3% 81% 99 % E3% 81% BF% E3% 82% 8C / dp / B07YLS6DJQ / ref = tmm_blu_title_0? _ Encodage = UTF8 & qid = & sr =)
Recommended Posts