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

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

  1. Right-click on the project and select "Spring Boot Application" from the "Run" tab SnapCrab_2019年12月08日19-35-54_No-0000.png 2.http://localhost:8080 If the above URL is successfully accessed, the following screen will be displayed.

SnapCrab_2019年12月08日20-22-19_No-0000.png

  1. When you press the text link, a message will be displayed, so click "Leave this page". SnapCrab_2019年12月08日20-23-34_No-0000.png

  2. If the screen changes and the MV of "Glass Doll" is played, it's okay. SnapCrab_2019年12月08日20-29-10_No-0000.png

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:


        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

Link type

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:


        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

Implement text link with Springboot + Thymeleaf
Draw screen with Thymeleaf in SpringBoot
Try to implement login function with Spring-Boot
Implement rich text editing capabilities with RichTextFX
Implement CRUD with Spring Boot + Thymeleaf + MySQL
Implement paging function with Spring Boot + Thymeleaf
Implement Sign in with Twitter in spring-boot, security, social
04. I made a front end with SpringBoot + Thymeleaf
Supports multi-port with SpringBoot
Generate JavaScript with Thymeleaf
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ③ ~ Add Validation ~
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ① ~ Hello World ~
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ⑤ ~ Template standardization ~
Create a simple DRUD application with Java + SpringBoot + Gradle + thymeleaf (1)
Use Thymeleaf with Azure Functions
Implement GraphQL with Spring Boot
Change the port with SpringBoot
Implement jCaptcha reload with ajax
Link API with Spring + Vue.js
Hello World with SpringBoot / Gradle
UnitTest with SpringBoot + JUnit + Mockito
Implement search function with form_with
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ④ ~ Customize error messages ~