Springboot Integrated thymeleaf template engine

Introducing Dependencies

Need to introduce spring boot's thymeleaf initiator dependency.

<Dependency>        <groupId>Org.springframework.boot</groupId>        <Artifactid>Spring-boot-starter-thymeleaf</Artifactid></Dependency><Dependency>   <groupId>Nekohtml</groupId>   <Artifactid>Nekohtml</Artifactid></Dependency>

Description: HTML is strictly checked by default when using Springboot's thymeleaf template, resulting in no closure of your tags. Nekohtml This dependency can solve the problem. When this dependency is introduced, web dependencies are generally introduced automatically, without the need to introduce web dependencies separately.

Simple configuration

Spring.thymeleaf.cache=false

Spring.thymeleaf.mode = LEGACYHTML5

Description: The first line of configuration is to clear the cache for a hot deployment. That is, after modifying the HTML without restarting, refresh the page to see the effect. However, here is a special emphasis, after modifying the HTML must be ctrl+f9 to build again. Back to the browser refresh, you can see the effect. The second line of configuration is to avoid the configuration of HTML for strict checking, and of course you need to introduce nekohtml dependencies in advance.

Using templates

1, template file head use

2. Use th on the HTML tag: start with the identifier as a prefix.

3. Introduce a Web static file via @{}.

<link rel= "stylesheet" th:href= "@{/css/jquery.min.css}"/>

To access the model data in SPRINGMVC: ${user.name}, Access more data on different objects by clicking on the official definition of the reference.

Springboot's Static and templates

Springboot doesn't have our usual web development webcontent (WEBAPP), it's only the SRC directory. Below the src/main/resources there are two folders, static and templates. Springboot static pages in default static, and dynamic pages in templates.

Static page:

Put a hello.html in static and then enter http://localhost:8080/hello.html directly to access it successfully. (It seems that you can create a new public folder, or you can put a static file). The controller can also be used to jump, enter Http://localhost:8080/Hi can be successfully accessed:

@Controller  Public class Hellocontroller {    @RequestMapping ("/hi")    public  String SayHello () {         return "hello.html";    }}

Dynamic page:

Dynamic pages need to request the server first, access the background application, and then turn to the page, such as access to the JSP. Spring boot does not recommend using JSP, which uses thymeleaf to do dynamic pages by default. In the Pom, add the Thymeleaf component Jar package.

Let's start with a new hello.html in the Tempates folder, but the content is different, then try direct access to the page first.

1, through the Direct access page: Input http://localhost:8080/hello.html, the results show that the access is static directory inside the hello.html

2, through controller jump:.

Reason:

Return of static page by default is jump to/static/index.html, when the Thymeleaf component is introduced in Pom.xml, the dynamic jump transfer overrides the default static jump, the default will jump to/templates/ Index.html, note that there is a difference between the return code, dynamic no HTML suffix. That's how we're going to change controller:

@Controller  Public class Hellocontroller {    @RequestMapping ("/hi")    public  String SayHello () {         return "Hello";    }}

If you use the Thymeleaf template and want to return to the static page, then use redirection, if you want to jump to/static/index.html when using dynamic pages, you can redirect: Return "redirect:index.html".

    @RequestMapping (value = "/mrfile", method = requestmethod.get)    public String mrfile ( HttpServletRequest request, @RequestParam (value = "Usrname") String usrname)    {        try         {            request.getservletcontext (). Getrealpath (Real_path);             return "Redirect:Mrfile.html";        }         Catch (Exception ex)        {            Logger.info (ex.tostring ());             return NULL ;        }    }

Attention:

1, the URL of the interception should not be coincident with the view, otherwise it will throw circular view path exception, and then the error said there will be a loop view errors, anyway, after attention is.

@Controller  Public class Hellocontroller {    @RequestMapping ("/hello")    public  String SayHello () {         return "hello.html";      }}

2, each change to stop the application, and then restart very annoying ~ but Springboot has a hot deployment of things, that is, in the project to modify the code can not stop the application and restart, can be automatically restarted, here we use Devtools

Relative paths in the Thymeleaf

I. Issues

Recently, using the Springboot framework, it is well known that the framework can run directly as a jar, in which case the default contextpath is/. In the foreground page reference, I wrote the relative path:

Backstage requestmapping for/test/page1, front access path is "/test/page1", automatically will jump to http://localhost:8080/test/page1 path, so naturally there is no problem, However, when the project is deployed under Tomcat in the form of a war package, it is necessary to add the project name when accessing it, such as Project1, when the ContextPath is/project1, then in this case the previous relative path is "/test1/page1" is completely useless, because it will automatically jump to the Http://localhost:8080/test/page1 address, it is clear that there is a lack of/project1, the correct path is Http://localhost:8080/project1/test/page1

So what do we do?

Two. Resolution process

Undoubtedly, this situation is very serious, if the completion of the project only to find the path is wrong, it will undoubtedly cost a great deal of effort to change, the Internet to check some information, summarized as follows:

Relative path:

There are two relative paths in an HTML page:

The first type:/test/page1

This is relative to the server root path, in the case of the previous example, the use of the result is directly from the 8080 after the replacement, such as Http://localhost:8080/test/page1

The second type: Test/page2

This is relative to the current path, such as the current path is http://localhost:8080/test/page1, then the replacement is.

Http://localhost:8080/test/test/page, in this case there is also the corresponding syntax,. /indicates the parent directory,./indicates the current directory, such as Test/page2, is equivalent to./test/page2, if written as: /test/page2, then the replacement path is http://localhost:8080/test/page.

Absolute path:

Absolute path is direct http://localhost:8080/test/page1, very simple, but also equivalent to write dead.

Summarize:

Scenario 1, use the absolute path directly. But this is very bad maintenance, write up also trouble, direct pass.

Scenario 2, the use of the relative path of the first notation, the deployment of the time set ContextPath to/, so naturally no problem, you can deploy Springboot as a jar, the default is this case, if you must use Tomcat deployment, Then only the project files extracted from the war package will be transferred to the root folder of Tomcat, the root folder to empty or transfer the original files, so that the root directory access can also be implemented. This kind of solution can solve the problem to some extent, but the way to deploy is too restrictive, only one project can be deployed, there is no way to do it, and therefore it is not a long term solution.

So there's no other way?

Yes! The basic idea is to use thymeleaf dynamic generation of HTML page features, in the relative path before the dynamic addition of a project name, do not solve it? In fact, with JSP can be easily done, but because my page is not a JSP page, so also can not use this method. So another attempt, referring to a lot of information, finally found a solution!

Scenario 3: Change the link path of the label directly using Thymeleaf's TH:SRC or Th:href property, as

@{/js/{path}/myjs.js (Path=${contextpath})}

For Thymeleaf, there are four relative URLs:

Page relative test/page1.html with normal HTML relative path second, replace the path at the end

Context relative/test/page1.html automatically adds the context path before the relative path! Actual build Path/project1/test/page1.html

Server relative ~/test/page1.html with normal HTML relative path first, suitable for accessing different context paths of the same server, as on a tomcat project2

Protocol relative//code.jquery.com/jquery-2.0.3.min.js cross-domain access using

Also attached is a thymeleaf syntax with variables

@{/js/{path}/myjs.js (Path=${contextpath},param=${contextpath})}

() to complete the assignment of variables or parameters, such as the ContextPath variable value is/app, then the resulting URL is Http://localhost:11111/app/js//app/myJs.js?param=/app,

If the statement is

@{/js/{path}/myjs.js (Path=${contextpath})}

Then it will generate

Http://localhost:11111/app/js//app/myJs.js

It should be noted that thymeleaf will determine which relative type is based on the result of the completion parameter assignment.

Three. Solution

<script src= ". /static/js/myjs.js "th:src=" @{/js/myjs.js} "></script>

With the relative context dynamic path provided by Thymeleaf, a static path can be used to describe the current location of the page file and other paging files in the current project, so that even if the HTML file is opened directly in the case of non-networking, You can also find the referenced JS files and CSS files and other files, give full play to the power of Thymeleaf!

Springboot consolidate thymeleaf template engine