Shulou(Shulou.com)06/02 Report--

It is believed that many inexperienced people have no idea about how to build Thymeleaf environment in SpringBoot. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

1. Dependence

First of all, we need a springboot project, and the basic pom structure is mostly similar.

Org.springframework.boot spring-boot-starter-parent 2.0.4.RELEASE UTF-8 UTF-8 Finchley.RELEASE 1.8 org.springframework.boot spring-boot-maven-plugin spring-milestones Spring Milestones https://repo.spring.io/milestone false

In this project, we mainly need to introduce two dependency packages, one web and one thymeleaf.

Org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-thymeleaf 2. Configuration parameters

Usually we can just use the default thymeleaf parameter configuration. Here are a few common configurations.

Spring: thymeleaf: mode: HTML encoding: UTF-8 servlet: content-type: text/html cache: false

The parameter of thymeleaf, which mainly corresponds to org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties

ii. Project construction demonstration 1. Project structure

Building a web project is a little different from our previous pure back-end project, where the front-end resources are placed and how to deal with dependent files are fastidious. Here is a regular project structure.

As shown in the figure above, the front-end resource files are placed in the resources directory by default, and there are two directories below

Templates: store the template file, which can be understood as the html written by us. Note that there can be no problem with the file name.

Static: stores static resource files, such as js,css,image

2. Rest service

We provide three interfaces here, mainly to demonstrate three different data binding methods (basically the same as the Freemaker post)

@ Controllerpublic class IndexController {@ GetMapping (path = {"," / "," / index "}) public ModelAndView index () {Map data = new HashMap (2); data.put (" name "," YiHui Thymeleaf "); data.put (" now ", LocalDateTime.now (). ToString ()); return new ModelAndView (" index ", data) } / * generally, it is not recommended to use jdk's String.split to split strings directly. The internal implementation is based on rules. Although it is more powerful, in simple scenarios, the performance overhead is higher * / private static String [] contents = ("Green ants are fragrant, yellow flowers recommend Fangchen." \ nThe sky is clean and dust-free. \ nIt is appropriate to have Fu when climbing the mountain, and the play is written with pen. \ nThe garden of Kenai shakes down, and there is no one to discuss the meaning of sorrow and autumn. \ nSome new acquaintances in my eyes. \ nThe Longshan high meeting place, who will fall the hat. ") .split ("\ n"); private static Random random = new Random (); @ GetMapping (path = "show1") public String showOne (Model model) {model.addAttribute ("title", "Linjiang Xian"); model.addAttribute ("content", contents [random.nextInt (6)]); return "show1" } @ GetMapping (path = "show2") public String showTow (Map data) {data.put ("name", "Show2---- >"); data.put ("now", LocalDateTime.now (). ToString ()); return "show2";}}

Of the above three case

The first is the best to understand. When creating a ModelAndView, pass in viewName and data

The second is to set the data passed to view through the interface parameter Model

The third one directly uses Map to transfer data.

Three interfaces, corresponding to three html files, as follows

Index.html

YiHui's SpringBoot Demo hello world! Default content default signature transfer Ref 2 Test Ref 3 Test

Show1.html

YiHui's SpringBoot Demo title! Content

Show2.html

YiHui's SpringBoot Demo title! Content

In the above template file, you need to be careful to refer to the css style file. There is no static in front of the path, and our corresponding css file

Index.css

.title {color: # c00; font-weight: normal; font-size: 2em;} .title {color: darkblue; font-size: 1.2em;} .sign {color: lightgray; font-size: 0.8em; font-style: italic;} 3. Demo

After starting the project, you can see the switch of the three pages. The data in the template will be replaced according to the return of the backend, especially the time of the home page, and each refresh will change accordingly.

After reading the above, have you mastered how to build a Thymeleaf environment in SpringBoot? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.