springboot Learning 4.1 - thymeleaf Syntax 1

Learn from the station b springcloud, now summarize the summary removal of a small error appearing in the video, some of the error-prone places were reminded
b outbound links: https://www.bilibili.com/video/av55993157
data link:
https://pan.baidu.com/s/1o0Aju3IydKA15Vo1pP4z5w
extraction code: 21ru

On a link
next section link:

The following list summarizes:

Implementation Details:
still implemented on a project in springboot:
1. Add the code in the controller / Index.html in:

    @GetMapping("/index2")
    public String index2(Map<String,String>map){
        map.put("name","张三");
        return "index";
    }

Complete IndexHandler Code:

package com.southwind.controller;

import com.southwind.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/index")
public class IndexHandler {

    @GetMapping("/index")
    public String index(Model model){
        System.out.println("index...");
        List<Student> list = new ArrayList<>();
        list.add(new Student(1l,"张三",12));
        list.add(new Student(2l,"李四",22));
        list.add(new Student(3l,"王五",14));
        model.addAttribute("list",list);
        return "index";
    }

    @GetMapping("/index2")
    public String index2(Map<String,String>map){
        map.put("name","张三");
        return "index";
    }
}

2. resources / templates / index.html in the, <table> </ table> portion commented,
tagging thereafter:

    <p th:text="${name}"></p>
    <p th:text="'学生姓名:' + ${name} + 2"></p>
    <p th:text="|学生姓名:,${name}|"></p>

Complete index.html Code:

<!DOCTYPE html>
<html xmlns:th="http:www.thymeleaf.org"></html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>hello world</h1>
    <!--<table>
        <tr>
            <th>学生ID</th>
            <th>学生姓名</th>
            <th>学生年龄</th>
        </tr>
        <tr th:each="student:${list}">&lt;!&ndash; 对应第二行html &ndash;&gt;
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td th:text="${student.age}"></td>
        </tr>
    </table>-->
    <p th:text="${name}"></p>
    <p th:text="'学生姓名:' + ${name} + 2"></p>
    <p th:text="|学生姓名:,${name}|"></p>
</body>
</html>

3. Open Application startup class
entering http: // localhost: 9090 / index / index2

conditional:
4. Add code in the IndexHandler.java:

    @GetMapping("/if")
    public String index3(Map<String,boolean>map){
        map.put("flag",true);
        return "index";
    }

5. in the resources / templates / index.html 3 OK <p> commented, in the subsequent add code:

	<p th:if="${flag == true}" th:text="if判断成立"></p>
    <p th:unless="${flag != true}" th:text="unless判断成立"></p>
    <!-- unless的意思是当该情况不成立时候才成立,即负负得正,则输出text中内容 -->

6. Start Start Application class
entering http: // localhost: 9090 / index / i

cycles:
7 is the controller / IndexHandler of:

    @GetMapping("/index")
    public String index(Model model){
        System.out.println("index...");
        List<Student> list = new ArrayList<>();
        list.add(new Student(1l,"张三",12));
        list.add(new Student(2l,"李四",22));
        list.add(new Student(3l,"王五",14));
        model.addAttribute("list",list);
        return "index";
    }

And modify resources / templates / index.html in
Note stat.index not stat: index

    <table>
        <tr>
            <th>index</th>
            <th>count</th>
            <th>学生ID</th>
            <th>学生姓名</th>
            <th>学生年龄</th>
        </tr>
        <tr th:each="student,stat:${list}" th:style="'background-color:'+@{${stat.odd}?'#F2F2F2'}"><!-- 对应第二行html -->
            <!-- stat.odd表示如果是奇数行就变色为 #F2F2F2 -->
            <td th:text="${stat.index}"></td>
            <td th:text="${stat.count}"></td>
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td th:text="${student.age}"></td>
        </tr>
    </table>

stat is a state variable, attribute:

index element in the collection index (starting from 0)
COUNT COUNT elements in a set (starting from 1)
the size of the size set
current of the current iteration variable
even / odd current iteration is an even number / odd number (starting with 0)
First current iteration element is The first is a
last element if the current iteration is the last one

8. Application restart
enter HTTP: // localhost: 9090 / index / index

URL hyperlink
is processed by @ {...}
9. test.html in new resources / templates in
the second line introduced

<html xmlns:th="http:www.thymeleaf.org"></html>

Tagging the <body> </ body> in

    <h1>hello world</h1>
    <a th:href="@{http://www.baidu.com}">跳转</a>

10. Add the code IndexHandler

    @GetMapping("/test")
    public String test(){
        return "test";
    }

11. enter http: // localhost: 9090 / index / test

12. Add the templates / test.html of </ a> later

<a th:href="@{http://localhost:9090/index/url/{na}(na=${name})}">跳转2</a>

13. IndexHandler modify the test code and add the code section:

    @GetMapping("/test")
    public String test(Model model){
        model.addAttribute("name","tom");
        return "test";
    }

    @GetMapping("/url/{name}")
    @ResponseBody
    public String url(@PathVariable("name")String name){
        return name;
    }

14. Restart startup class Application
enter http: // localhost: 9090 / index / test


Published 42 original articles · won praise 2 · Views 1165

Guess you like

Origin blog.csdn.net/qq_40893824/article/details/104709565