Implement text link with Springboot + Thymeleaf
Implement text link with Springboot + Thymeleaf
Nice to meet you. My name is Doorbell. This time, we will implement it according to the title.
Self-introduction
A company specializing in SES in Tokyo, currently participating in a certain Java project. Tenshoku Katsudo in August this year! And regained humanity. Aikatsu is good.
This environment
- Win10
- javac 9.0.1
- Thymeleaf 2.1.3
Implementation overview
--Click the text link to jump to the MV page of Glass Doll
The glass doll is Aikatsu! It's a song owned by a character named Yurika Todo in the series. Anyway, it was so cool that I was quite shocked when I first saw it. This time, the MV link for such a song We will implement it so that it can transition to.
What is Aikatsu?
"Aikatsu!" Is an arcade game for Japanese girls that uses the trading card arcade game housing and Data Carddass (DCD) released by Bandai. The game went live on October 25, 2012. The catch phrase is "National Idol Audition Game". Aikatsu!-Wikipedia
In addition to the above games, the anime "Aikatsu on Parade!" ] Is being broadcast.
Source code
Source code list
--pom.xml: Important file with information about the project --HelloWorldController.java: Main class --index.html: Template HTML
├── src
│ └── main
│ ├── java
│ │ └── com
│ │ └── example
│ │ └── demo
│ │ └── controller
│ │ └── HelloWorldController.java
│ └── resources
│ └── templates
│ └── index.html
└── pom.xml
pom.xml
Important files with information about the project Specify 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
The main class. Use Thymeleaf to embed the value of the object in the HTML template and output it.
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", "Entrance to servant"); //Set the text to display
model.addAttribute("url", "https://www.youtube.com/watch?v=EbxoEIh3aHc"); //Set a link to the MV of Glass Doll
return "index";
}
}
index.html
Template HTML file. Describes basic template functions.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Have a nice day</title>
<meta charset="utf-8" />
<script>
function mes(event){
event.returnValue = "I'll suck blood!";
}
window.onbeforeunload = mes;
</script>
<!--Click the link to jump to the MV page of Glass Doll-->
</head>
<body>
<a th:href="@{${url}}"><span th:text="${message}">sss</span></a>
</body>
</html>
I have included an implementation that displays Yurika-sama's deciding line when the link is pressed, but I really wanted to call JS from an external file, so this is a reflection.
Execution method
- Right-click on the project and select "Spring Boot Application" from the "Run" tab
2.http://localhost:8080
If the above URL is successfully accessed, the following screen will be displayed.
-
When you press the text link, a message will be displayed, so click "Leave this page".
-
If the screen changes and the MV of "Glass Doll" is played, it's okay.
th: attribute description
th:text
--The value specified in the th: text attribute replaces the text in the element
This time, I entered sss on index.html, but you can see that the text in the element has been replaced with the value specified for the attribute. In the Java file, this is the following part:
- HelloWorldController.java
model.addAttribute("message", "Entrance to servant"); //Set the text to display
Tutorial: Using Thymeleaf (ja)
This \ $ {today} expression is simple and means "get a variable named today", but it can be more complicated (for example, \ $ {user.name} "gets a user variable". It means "call the getName () method").
th:href
Use the link expression "@ {…}" when setting the URL. It is used in combination with the Thymeleaf attribute "th: href attribute". If you want to use variables to generate URLs, you would use this syntax.
In the Java file, this is the following part:
- HelloWorldController.java
model.addAttribute("url", "https://www.youtube.com/watch?v=EbxoEIh3aHc"); //Set a link to the MV of Glass Doll
Through implementation
Through this implementation, we have summarized the points we want to improve and what we want to try next.
--Write the URL or character string in the property file and call it --DB linkage
At the end
Since JSP is used in the field, I tried to output it as a review of how to write Thymeleaf, but I feel that I managed to make it into a form. Yeah, that's also Aikatsu!
The story changed, and a few months ago there was a part that I couldn't implement at work, and I was able to implement it with difficulty. At that time, Mr. Mizuki said, "I'm sorry I couldn't do it. Feelings. If there is it, move forward. I remembered the words and stabbed them deeply.
I hope you read this article and become interested in Aikatsu! [Aikatsu! ALL SEASON Blu-ray Festival! !! ](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? _ Encoding = UTF8 & qid = & sr =)
Recommended Posts