zoukankan      html  css  js  c++  java
  • 框架 Spring Boot 技术入门到整合 6-3 thymeleaf 常用标签的使用方法

    0    课程地址

    https://www.imooc.com/video/16722/0

    1    常用标签demo(注意可以F12查看html的源码进行对照)
    1.1  基本使用方式

    见上节

    1.2  对象引用方式  时间格式转换

    a  对象的两种引用方式

    b  日期如何转换格式

    test.html

    <!-- 魏豆豆:注意 与el表达式类似,这些对象必须是对象里的属性,注意检查大小写-->
    <!-- 包含知识点:1    html中 对象引用展示方式(两种方式)
                     2    日期如何进行转换格式 -->
    <div>
        用户姓名:<input th:id="${user.userName}" th:name="${user.userName}" th:value="${user.userName}"/>
        <br/>
        用户年龄:<input th:value="${user.userAge}"/>
        <br/>
        用户生日:<input th:value="${user.birthDay}"/>
        <br/>
        用户生日:<input th:value="${#dates.format(user.birthDay, 'yyyy-MM-dd')}"/>
        <br/>
    </div>
    
    <br/>
    <div th:object="${user}">
        用户姓名:<input th:id="*{userName}" th:name="*{userName}" th:value="*{userName}"/>
        <br/>
        用户年龄:<input th:value="*{userAge}"/>
        <br/>
        用户生日:<input th:value="*{#dates.format(birthDay, 'yyyy-MM-dd hh:mm:ss')}"/>
        <br/>
    </div>

    ThymeleafController.java

     @RequestMapping("test")
        public String test(ModelMap map) {
            User u = new User();
            u.setUserName("魏豆豆");
            u.setUserAge(10);
            u.setPassWord("123465");
            u.setBirthDay(new Date());
            u.setDesc("<font color='green'><b>hello imooc</b></font>");
    
            map.addAttribute("user", u);
    
            User u1 = new User();
            u1.setUserAge(19);
            u1.setUserName("imooc");
            u1.setPassWord("123456");
            u1.setBirthDay(new Date());
    
            User u2 = new User();
            u2.setUserAge(17);
            u2.setUserName("LeeCX");
            u2.setPassWord("123456");
            u2.setBirthDay(new Date());
    
            List<User> userList = new ArrayList<>();
            userList.add(u);
            userList.add(u1);
            userList.add(u2);
    
            map.addAttribute("userList", userList);
    
            return "thymeleaf/test";
        }

    User.java

    package com.example.demo.bean;
    
    import com.fasterxml.jackson.annotation.*;
    
    import java.util.Date;
    
    /**
     * User
     *
     * @author 魏豆豆
     * @date 2020/11/15
     */
    @JsonIgnoreProperties({"userAge","passWord"})
    public class User {
        @JsonIgnore
        private String userID;
        private String userName;
        private int userAge;
        private String passWord;
        @JsonFormat(pattern = "yyyy/MM/dd hh:mm:ss a",locale = "zh",timezone = "GMT+8")//日期格式
        private Date birthDay;
        @JsonInclude(JsonInclude.Include.NON_NULL)//为空不显示 JsonInclude.Include.ALWAYS 总显示
        private String desc;
    
        public String getUserID() {
            return userID;
        }
    
        public void setUserID(String userID) {
            this.userID = userID;
        }
    
        public String getUserName() {
            return userName;
        }
    
        public void setUserName(String userName) {
            this.userName = userName;
        }
    
        public int getUserAge() {
            return userAge;
        }
    
        public void setUserAge(int userAge) {
            this.userAge = userAge;
        }
    
        public String getPassWord() {
            return passWord;
        }
    
        public void setPassWord(String passWord) {
            this.passWord = passWord;
        }
    
        public Date getBirthDay() {
            return birthDay;
        }
    
        public void setBirthDay(Date birthDay) {
            this.birthDay = birthDay;
        }
    
        public String getDesc() {
            return desc;
        }
    
        public void setDesc(String desc) {
            this.desc = desc;
        }
    }
    1.3  text和utext的转换
    text 与 utext :<br/>
    <!-- text 原封不动带过来,utext 去掉了相应的格式-->
    <span th:text="${user.desc}">abc</span>
    <br/>
    <span th:utext="${user.desc}">abc</span>
    <br/>
    <br/>

    1.4  url的使用方式

    test.html

    URL:<br/>
    <a href="" th:href="@{http://www.imooc.com}">网站地址</a>
    <br/>
    
    <br/>
    <form th:action="@{/th2/postform}" th:object="${user}" method="post" th:method="post">
        <input type="text" th:field="*{userName}"/>
        <input type="text" th:field="*{userAge}"/>
        <input type="submit"/>
    </form>
    <br/>

    ThymeleafController.java

     @PostMapping("postform")
        public String postform(User u) {
    
            System.out.println("姓名:" + u.getUserName());
            System.out.println("年龄:" + u.getUserAge());
    
            return "redirect:/th2/test";
        }

    测似结果:

    1.5  条件判断 th:if  th:unless

    test.html

    <br/>
    <div th:if="${user.userAge} == 18">十八岁的天空</div>
    <div th:if="${user.userAge} gt 18">你老了</div>
    <div th:if="${user.userAge} lt 18">你很年轻</div>
    <div th:if="${user.userAge} ge 18">大于等于</div>
    <div th:if="${user.userAge} le 18">小于等于</div>
    <br/>
    ThymeleafController.java
     @RequestMapping("test")
        public String test(ModelMap map) {
            User u = new User();
            u.setUserName("魏豆豆");
            u.setUserAge(10);
            u.setPassWord("123465");
            u.setBirthDay(new Date());
            u.setDesc("<font color='green'><b>hello imooc</b></font>");
    
            map.addAttribute("user", u);
    
            User u1 = new User();
            u1.setUserAge(19);
            u1.setUserName("imooc");
            u1.setPassWord("123456");
            u1.setBirthDay(new Date());
    
            User u2 = new User();
            u2.setUserAge(17);
            u2.setUserName("LeeCX");
            u2.setPassWord("123456");
            u2.setBirthDay(new Date());
    
            List<User> userList = new ArrayList<>();
            userList.add(u);
            userList.add(u1);
            userList.add(u2);
    
            map.addAttribute("userList", userList);
    
            return "thymeleaf/test";
        }

    测试结果:

    1.6  选择下拉框

    test.html

    <select>
         <option >选择框</option>
         <option th:selected="${user.userName eq 'lee'}">lee</option>
         <option th:selected="${user.userName eq 'imooc'}">imooc</option>
         <option th:selected="${user.userName eq 'LeeCX'}">LeeCX</option>
         <option th:selected="${user.userName eq '魏豆豆'}">帅哥</option>
    </select>

    ThymeleafController.java

    @RequestMapping("test")
        public String test(ModelMap map) {
            User u = new User();
            u.setUserName("魏豆豆");
            u.setUserAge(10);
            u.setPassWord("123465");
            u.setBirthDay(new Date());
            u.setDesc("<font color='green'><b>hello imooc</b></font>");
    
            map.addAttribute("user", u);
    
            User u1 = new User();
            u1.setUserAge(19);
            u1.setUserName("imooc");
            u1.setPassWord("123456");
            u1.setBirthDay(new Date());
    
            User u2 = new User();
            u2.setUserAge(17);
            u2.setUserName("LeeCX");
            u2.setPassWord("123456");
            u2.setBirthDay(new Date());
    
            List<User> userList = new ArrayList<>();
            userList.add(u);
            userList.add(u1);
            userList.add(u2);
    
            map.addAttribute("userList", userList);
    
            return "thymeleaf/test";
        }

    测试结果:

    1.7  循环 th:each

    test.html

    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>年龄备注</th>
            <th>生日</th>
        </tr>
        <tr th:each="person:${userList}">
            <td th:text="${person.userName}"></td>
            <td th:text="${person.userAge}"></td>
            <td th:text="${person.userAge gt 18} ? 你老了 : 你很年轻">18岁</td>
            <td th:text="${#dates.format(user.birthDay, 'yyyy-MM-dd hh:mm:ss')}"></td>
        </tr>
    </table>

    ThymeleafController.java

     @RequestMapping("test")
        public String test(ModelMap map) {
            User u = new User();
            u.setUserName("魏豆豆");
            u.setUserAge(10);
            u.setPassWord("123465");
            u.setBirthDay(new Date());
            u.setDesc("<font color='green'><b>hello imooc</b></font>");
    
            map.addAttribute("user", u);
    
            User u1 = new User();
            u1.setUserAge(19);
            u1.setUserName("imooc");
            u1.setPassWord("123456");
            u1.setBirthDay(new Date());
    
            User u2 = new User();
            u2.setUserAge(17);
            u2.setUserName("LeeCX");
            u2.setPassWord("123456");
            u2.setBirthDay(new Date());
    
            List<User> userList = new ArrayList<>();
            userList.add(u);
            userList.add(u1);
            userList.add(u2);
    
            map.addAttribute("userList", userList);
    
            return "thymeleaf/test";
        }

    测试结果:

    1.8  th:switch 和 th:case

    test.html

    <div th:switch="${user.UserName}">
      <p th:case="'lee'">lee</p>
      <p th:case="#{roles.manager}">普通管理员</p>
      <p th:case="#{roles.superadmin}">超级管理员</p>
      <p th:case="*">其他用户</p>
    </div>

    ThymeleafController.java

     @RequestMapping("test")
        public String test(ModelMap map) {
            User u = new User();
            u.setUserName("lee");
            u.setUserAge(10);
            u.setPassWord("123465");
            u.setBirthDay(new Date());
            u.setDesc("<font color='green'><b>hello imooc</b></font>");
    
            map.addAttribute("user", u);
    
            User u1 = new User();
            u1.setUserAge(19);
            u1.setUserName("imooc");
            u1.setPassWord("123456");
            u1.setBirthDay(new Date());
    
            User u2 = new User();
            u2.setUserAge(17);
            u2.setUserName("LeeCX");
            u2.setPassWord("123456");
            u2.setBirthDay(new Date());
    
            List<User> userList = new ArrayList<>();
            userList.add(u);
            userList.add(u1);
            userList.add(u2);
    
            map.addAttribute("userList", userList);
    
            return "thymeleaf/test";
        }


    测试结果

    1.9  引入配置文件 i18n相关

    国际化i18n 配置文件必须以message作为前缀,详细解析,见

    https://www.cnblogs.com/kingsonfu/p/10396946.html

    test.html

    <div th:switch="${user.UserName}">
      <p th:case="'lee'">lee</p>
      <p th:case="#{roles.manager}">普通管理员</p>
      <p th:case="#{roles.superadmin}">超级管理员</p>
      <p th:case="*">其他用户</p>
    </div>
    <br/>
    ThymeleafController.java
    @RequestMapping("test")
        public String test(ModelMap map) {
            User u = new User();
            u.setUserName("superadmin");
            u.setUserAge(10);
            u.setPassWord("123465");
            u.setBirthDay(new Date());
            u.setDesc("<font color='green'><b>hello imooc</b></font>");
    
            map.addAttribute("user", u);
    
            User u1 = new User();
            u1.setUserAge(19);
            u1.setUserName("imooc");
            u1.setPassWord("123456");
            u1.setBirthDay(new Date());
    
            User u2 = new User();
            u2.setUserAge(17);
            u2.setUserName("LeeCX");
            u2.setPassWord("123456");
            u2.setBirthDay(new Date());
    
            List<User> userList = new ArrayList<>();
            userList.add(u);
            userList.add(u1);
            userList.add(u2);
    
            map.addAttribute("userList", userList);
    
            return "thymeleaf/test";
        }

    application.properties 引入 i18n

    ############################################################
    #
    # 配置i18n 资源文件,供thymeleaf 读取
    #
    ############################################################
    spring.messages.basename=i18n/messages
    spring.messages.cache-seconds=3600
    spring.messages.encoding=UTF-8

    message.properties(在i18n目录下)

    ############################################################
    #
    # 用户自定义权限
    #
    ############################################################
    # 普通管理员
    roles.manager=manager
    roles.superadmin=superadmin

    测试结果:

    1.A  引入静态资源文件js/css

    application.js  引入静态文件路径

    #设定静态文件路径,js,css等
    spring.mvc.static-path-pattern=/static/**

    test.html

    <head lang="en">
        <meta charset="UTF-8" />
        <title></title>
    
         <script th:src="@{/static/js/test.js}"></script>
        
    </head> 
    ThymeleafController.java
    @RequestMapping("test")
        public String test(ModelMap map) {
            User u = new User();
            u.setUserName("superadmin");
            u.setUserAge(10);
            u.setPassWord("123465");
            u.setBirthDay(new Date());
            u.setDesc("<font color='green'><b>hello imooc</b></font>");
    
            map.addAttribute("user", u);
    
            User u1 = new User();
            u1.setUserAge(19);
            u1.setUserName("imooc");
            u1.setPassWord("123456");
            u1.setBirthDay(new Date());
    
            User u2 = new User();
            u2.setUserAge(17);
            u2.setUserName("LeeCX");
            u2.setPassWord("123456");
            u2.setBirthDay(new Date());
    
            List<User> userList = new ArrayList<>();
            userList.add(u);
            userList.add(u1);
            userList.add(u2);
    
            map.addAttribute("userList", userList);
    
            return "thymeleaf/test";
        }

    测试结果

  • 相关阅读:
    解决UITableView中Cell重用机制导致内容出错的方法总结
    Hdu 1052 Tian Ji -- The Horse Racing
    Hdu 1009 FatMouse' Trade
    hdu 2037 今年暑假不AC
    hdu 1559 最大子矩阵
    hdu 1004 Let the Balloon Rise
    Hdu 1214 圆桌会议
    Hdu 1081 To The Max
    Hdu 2845 Beans
    Hdu 2955 Robberies 0/1背包
  • 原文地址:https://www.cnblogs.com/1446358788-qq/p/14089979.html
Copyright © 2011-2022 走看看