SpringBoot Thymeleaf

小灰灰 2022-02-02 23:43 199阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70][]

**application.properties**

spring.thymeleaf.prefix=/views/
    spring.thymeleaf.suffix=.html

** indexController.java:**

package com.example.thymeleaf1.indexController;
    
    
    import com.example.thymeleaf1.entity.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.ModelAttribute;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import java.util.*;
    
    @Controller
    public class indexController {
    
        @ModelAttribute
        public void model(Model model){
            User user=new User("xiaoming","123456");
            //传对象
            model.addAttribute("user",user);
            //传字符串
            model.addAttribute("string","后台传递过来的字符串");
            //传map
            Map<String,User> map=new HashMap<String, User>();
            map.put("user1",user);
            model.addAttribute("map",map);
            //传递列表
            List<User> list=new ArrayList<User>();
            user.setCreateTime(new Date());
            list.add(user);
            list.add(user);
            model.addAttribute("list",list);
        }
        @RequestMapping("index")
        public String index(){
            return "index";
        }
    }

** index.html**

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title th:text="主页">index</title>
        <style>
            .even{
                color: blue;
            }
            .odd{
                color: chartreuse;
            }
        </style>
        <script th:replace="head::static"></script>
        <script th:inline="javascript">
            $(function(){
                alert("sdafasdf");
                var user=[[${user}]];//为什么要使用内联写法？·答：因为 JS无法获取服务端返回的变量。
                //如何使用内联表达式？答：标准格式为：[[${xx}]] ，可以读取服务端变量，也可以调用内置对象的方法。例如获取用户变量和应用路径：
                //标签引入的JS里面能使用内联表达式吗？答：不能！内联表达式仅在页面生效，因为Thymeleaf只负责解析一级视图，不能识别外部标签JS里面的表达式。
                var APP_PATH = [[${#request.getContextPath()}]];
                var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]];
                alert(user.username)
            })
        </script>
    
    </head>
    
    <body>
    <a id="test">变红则证明链接表达式和片段表达式成功</a>
    <div th:text="变量表达式"></div>
    <form id="userForm">
        <input id="username" name="username" th:value="${user.username}"/>
        <input id="password" name="password" th:value="${user.password}"/>
        <div th:text="日期格式化"></div>
        <input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>
    </form>
    <div th:text="选择变量表达式首先通过object获取对象然后使用星号加括号"></div>
    
    <form id="userForm2" th:object="${user}">
        <input id="username2" name="username" th:value="*{username}"/>
        <input id="password2" name="password" th:value="*{password}"/>
    </form>
    <a th:text="${'I am '+(user.username!=null?user.username:'nobody')}"></a>
    
    <p>如果缺省状态变量名，则迭代器会默认帮我们生成以变量名开头的状态变量 xxStat， 例如：</p>
    
    <div th:each="user:${list}" th:class="${userStat.even}?'even':'odd'">
        下标：<input th:value="${userStat.index}"/>
        序号：<input th:value="${userStat.count}"/>
        username:<input th:value="${user.username}"/>
        password:<input th:value="${user.password}"/>
    </div>
    
    <div th:if="${userList}">
        <div>的确存在..</div>
    </div>
    
    <div th:unless="${userList}">
        <div>不存在..</div>
    </div>
    
    </body>
    </html>

**实体类**

package com.example.thymeleaf1.entity;
    
    
    import java.util.Date;
    
    public class User {
        private String username;
        private String password;
        private Date createTime;
    
        public Date getCreateTime() {
            return createTime;
        }
    
        public void setCreateTime(Date createTime) {
            this.createTime = createTime;
        }
    
        public User(){}
        public User(String username,String password){
            this.username=username;
            this.password=password;
        }
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    
        @Override
        public String toString() {
            return "User{" +
                    "username='" + username + '\'' +
                    ", password='" + password + '\'' +
                    '}';
        }
    }

**pom**

<?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 http://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.4.RELEASE</version>
            <relativePath/> 
        </parent>
        <groupId>com.example</groupId>
        <artifactId>thymeleaf1</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>thymeleaf1</name>
        <description>Demo project for Spring Boot</description>
    
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
            
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>webjars-locator</artifactId>
                <version>0.32-1</version>
            </dependency>
            
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>jquery</artifactId>
                <version>3.4.1</version>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>

**index.css**

#test{
        color: red;
    }

**head.html**

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="static">
        <script th:src="@{/webjars/jquery/3.4.1/jquery.js}"></script>
        <link th:href="@{css/index.css}" rel="stylesheet" type="text/css">
    
    </head>
    <body>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70]: /images/20220203/8da1598938a241dcb5c6cb8ec3b0415b.png