当前位置：网站首页>Creation and use of thymeleaf template

Creation and use of thymeleaf template

2022-07-05 14:58:00 【fengyehongWorld】

Reference material :

Thymeleaf Reference manual ： The ultimate , The most complete in history Thymeleaf Reference documents

One . Preparation

backstage
application.yml The configuration file

#  Custom configuration information 
search:
  #  At most 300 Data 
  max-count: 300

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;

//  Mark this class as a profile class , And took an alias 
@Configuration("configInfo")
public class ConfigInfo {
    

    //  Be sure to set it to public, It can't be private, otherwise thymeleaf cannot access 
    @Value("${search.max-count}")
    public String searchCount;
}

The front desk
commonModule.js
modular js file , All functions are exported through the module method

const personUtils = {
    
    getName() {
    
        console.log(' His name is Jia Feitian ');
    },
    getAge() {
    
        console.log(' Age is 20 year ');
    }
};

const sendMail = () => {
    
  console.log(' Send E-mail ');
};

export {
    
    personUtils,
    sendMail
};

test1.js
Test page js file , Modules are used in this file js Put it in window Module functions on and background configuration information

$(function() {
    

    //  Call template html Binding in window Method on object 
    window.personUtils.getName();

    setTimeout(() => {
    
        // searchCount From the common template js in 
        console.log(searchCount);
    }, 200);
});

Two . Template file

1. If each page in the project needs to be introduced separately js and css Words , Bad maintenance
So by creating common head, Batch import .
2. Each page introduces head after , On the original page head It will fail , Will be in the template head overwrite . But in addition to introducing commonalities in some pages head Beyond our needs , You also need customization that will not be overwritten by the template head.
3. Precisely because 2. The needs of , That's why head(id,links,scripts,styles,title), coordination ?: _ To ensure that links,scripts When it's worth it , Content and templates that introduce each page separately head The contents in are cited together , When there is no value, no operation is performed .

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ja">
<!--  Common head -->
<head th:fragment="head(id,links,scripts,styles,title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- plug-in unit js-->
    <script type="text/javascript" th:src="@{/js/public/jquery-3.6.0.min.js}"></script>
    <!-- common js-->
    <script type="text/javascript" th:src="@{/js/common/common.js}"></script>
    <!--  Common module js -->
    <script type="module" th:inline="javascript"> //  From the custom module js The functions in are put into window In the object  import {
       personUtils, sendMail } from /*[[@{/js/common/commonModule.js}]]*/ ''; window.personUtils = personUtils; window.sendMail = sendMail; </script>
    <!--  Background common data  -->
    <script th:inline="javascript" type="text/javascript"> //  Information in the background configuration file  const searchCount = [[${
      @configInfo.searchCount}]]; </script>
    <!--  Page referencing template , Custom introduced js 「　?: _　」  Said when scripts When it doesn't exist , Do not perform the replacement operation  -->
    <th:block th:replace="${scripts} ?: _" />
    <!--  Pages js, adopt id The variable realizes that each picture introduces its own js file  -->
    <script type="text/javascript" th:src="@{
     '/js/business/' + ${id} + '.js'}"></script>

    <link rel="stylesheet" type="text/css" th:href="@{/css/common/common.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/public/jquery-ui.min.css}" />
    <!--  Page referencing template , Custom introduced css -->
    <th:block th:replace="${styles} ?: _" />
    <!--  Pages css, adopt id The variable realizes that each picture introduces its own css file  -->
    <link rel="stylesheet" type="text/css" th:href="@{
     '/css/business/' + ${id} + '.css'}" />
    <!--  Page referencing template , stay header Written on css -->
    <th:block th:replace="${links} ?: _" />

    <link rel="icon" th:href="@{/img/logo.ico}" />
    <title th:replace="${title} ?: _"> Title in template </title>
</head>
<body>

    <div th:fragment="Admin_Content">
        <!--  When the clip is used , Pages that use fragments will be right [[*{name}]] To analyze  -->
         Hello! , Honorable Administrator , Your name [[*{name}]]
    </div>

    <footer th:fragment="footer_fragment">
        Copyright  Test system footer 
    </footer>
</body>
</html>

3、 ... and . page

Page one

1.links = ~{::link} Medium links As a template head Variable name in , ~{::link} It refers to the current page head Medium link label , If the current page has head Does not exist in the link Label words , just so so **links = ~{}** To express .
2. You can decide whether fragments in the template should be introduced according to the permissions of the currently logged in user

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/layout :: head( id = 'test1' ,links = ~{::link} ,scripts = ~{::script} ,styles = ~{::style} ,title = ~{::title} )">
    <!--  This page completely uses the header, There is no customized content -->
</head>
<body>
    <div id="container" th:object="${entity}">

        <!--  When isAdmin by true When , Instead of   When isAdmin by false When  : _  To say nothing , therefore div The original content in the will be preserved  : ~{}  Means to replace with an empty fragment , So the whole div Will be emptied  -->
        <div th:replace="*{isAdmin} ? ~{layout/layout :: Admin_Content} : _">
             Hello , Ordinary users , Your name is [[*{name}]]
        </div>
        <hr>

        <th:block th:replace="*{isAdmin} ? ~{layout/layout :: Admin_Content} : ~{}">
            <div> Hello , Ordinary users , Your name is [[*{name}]]</div>
        </th:block>
        <hr>
    </div>

    <!--  Introduce the footer in the template  -->
    <div th:replace="layout/layout :: footer_fragment"></div>
</body>
</html>

Open the page 1 When ,head Part of the effect
Insert picture description here

When using administrator login , Administrator fragment is used

🥰JS The result of function execution in

Page 2

1. On page head Added in Customize title , Therefore, common in the template is not used title.
2. On page head Added in style label , Finally added style The label reflects html Of head Ministry .
3. There is no extra css and js The file import , So you can use null perhaps ~{} To occupy the parameter .

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/layout :: head( id = 'test2' ,links = null ,scripts = ~{} ,styles = ~{::style} ,title = ~{::title} )">
    <!--  stay header Add style style  -->
    <style> div {
       color: red; } </style>
    <!--  Do not use the title in the template , Use a custom title  -->
    <title>test2 Title of the page </title>
</head>
<body>
    <div>
         I am a test2 Content in the page 
    </div>
</body>
</html>