Detailed explanation of spring boot using thymeleaf template
preface
Thymeleaf is a template engine similar to velocity and FreeMarker, which can completely replace JSP. Compared with other template engines, it has the following three attractive features:
1. Thymeleaf can run in both network and non network environments, that is, it allows artists to view the static effect of the page in the browser and programmers to view the dynamic page effect with data in the server. This is because it supports HTML prototypes, and then adds additional attributes in HTML tags to achieve the presentation of template + data. When the browser interprets HTML, it ignores undefined tag attributes, so the thymeleaf template can run statically; When data is returned to the page, the thymeleaf tag will dynamically replace the static content to make the page display dynamically.
2. Out of the box features of thymeleaf. It provides two dialects: standard and spring standard. You can directly apply templates to achieve the effect of JSTL and ognl expressions, so as to avoid the trouble of setting templates, JSTL and changing labels every day. At the same time, developers can also extend and create custom dialects.
3. Thymeleaf provides spring standard dialect and an optional module perfectly integrated with spring MVC, which can quickly realize form binding, Attribute Editor, internationalization and other functions.
The following article will give
Overall steps:
(1) Introduce thymeleaf into pom.xml;
(2) How to turn off thymeleaf cache
(3) Write template file.html
Spring boot uses the thymeleaf template engine by default, so it only needs to be in POM Add dependency to XML:
Thymeleaf cache cannot be used in the development process, so it is necessary to close the cache during development, just in application Properties:
Write the template file Src / main / resources / templates / hellohtml html
Write access path (COM. Kfit. Test. Web. Templatecontroller):
Start the application and enter the address: http://127.0.0.1:8080/helloHtml Output:
from TemplateController. helloHtml
Using freemaker
It's also easy to use freemaker,
In POM Dependency of freemaker added to XML:
The rest of the coding parts are the same. Let's talk about application Properties file:
com. kfit. test. web. TemplateController：
Access address: http://127.0.0.1:8080/helloFtl
from TemplateController. helloFtl
Thymeleaf and freemaker can coexist.
------------------------------------------------------------------------------------------------------------------------------------------------
This paper records the following points:
1、 Agreed directory structure of resource files
2、 Maven configuration
3、 Modify the thymeleaf template during development and automatically reload the configuration
4、 Thymeleaf common basic knowledge points
1、 Agreed directory structure of resource files
Maven's resource file directory: / SRC / Java / resources
Spring boot project static file directory: / SRC / Java / resources / static
Spring boot project template file directory: / SRC / Java / resources / templates
Spring boot static homepage support, i.e. index Html is placed in the following directory structure and directly mapped to the root directory of the application:
Since I use thymeleaf's HTML5 template, I will index The HTML template file is directly placed in the / SRC / Java / resources / templates directory. However, this directory is not the default directory of the home page file, so we need to manually map the application root path to / SRC / Java / resources / templates / index HTML. This can be mapped under the spring MVC controller.
Under spring boot, the prefix of the thymeleaf template file that the controller attempts to jump to is "classpath: / templates /" and the suffix suffix is "by default html”
This is in application The properties configuration file can be modified.
The following configuration can modify the prefix and suffix you are trying to jump to
More about the default in thymeleaf, which can be viewed at org springframework. boot. autoconfigure. thymeleaf. Thymeleafproperties is the property of this class
2、 Maven configuration
In POM Add the following dependencies to XML
The original dependencies on spring boot starter web can be removed, because spring boot starter thymeleaf contains these dependencies. The dependency on JSP can also be removed, because we have completely abandoned JSP.
3、 Modify the thymeleaf template during development and automatically reload the configuration
When spring boot uses thymeleaf, there is a cache by default, that is, if you change a page code, it will not refresh the page. You must rerun the main () method of spring boot to see the effect of page change. We can turn off the cache of thymeleaf to support the republishing of modified pages to Tomcat embedded in spring boot. In application Add the following configuration to the properties configuration file.
4、 Thymeleaf common basic knowledge points
1. Introduce the thymeleaf namespace in the HTML page, that is < HTML xmlns: th= http://www.thymeleaf.org >< / HTML >, at this time, the dynamic attributes in the HTML template file are decorated with th: namespace
2. Reference static resource files, such as CSS and JS files. The syntax format is "@ {}". For example, @ {/ JS / blog / blog. JS} will be introduced into / JS / blog / blog. JS under the / static directory JS file
3. Access the properties of the model in spring MVC. The syntax format is "${}". For example, ${user. ID} can obtain the ID property of the user object in the model
4. Loop, add th: each = "value: ${list}" attributes in the HTML tag, such as < span th: each = "user: ${users}" > < / span > users' data can be iterated
5. Judge that adding th: if = "expression" in the HTML tag can display HTML elements according to conditions
The above code indicates if the blog If the publishtime time is not empty, the time will be displayed
6. Formatting of time,
It means that the time is formatted as "yyyy MM DD HH: mm: SS", and the writing method is consistent with that of Java formatted date.
7. String splicing has two forms
For example, splice such a URL: / blog / delete / {blogid}
The first: th: href = "'/ blog / delete /' + ${blog. ID}" rel = "external nofollow"
Second: th: href = "${'/ blog / delete /' + blog. ID}" rel = "external nofollow"
summary
The above is the whole content of this article. I hope the content of this article can bring some help to your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.