springboot学习3——thymeleaf

从b站学习springcloud，现在进行总结，该总结除去了视频中出现的小错误，对有些易错的地方进行了提醒
b站链接：https://www.bilibili.com/video/av55993157
资料链接：
https://pan.baidu.com/s/1o0Aju3IydKA15Vo1pP4z5w
提取码: 21ru

下面的内容总结：
修改第一讲中工程Springboot，父pom→配置文件Application.yml有controller/IndexHandler.java→新建resources/templates/index.html中加代码→检测

修改controller/IndexHandler.java代码→修改resources/templates/index.html+引入→检测

实现细节：
1.打开第一讲创建的工程springboot(链接)
2.在父pom文件中添加代码：

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

完整的父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>

    <groupId>com.southwind</groupId>
    <artifactId>springboot</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!-- 继承父包 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.7.RELEASE</version>
    </parent>

    <dependencies>
        <!-- web启动jar -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>
</project>

3.在 application.yml中添加代码后，其完整代码：

server:
  port: 9090
spring:
  thymeleaf:
    prefix: classpath:/templates/  #前缀
    suffix: .html                  #后缀
    mode: HTML5                    #模型
    encoding: UTF-8                #编码

4.在controller中新建 IndexHandler.java，填入代码：

package com.southwind.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

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

    @GetMapping("/index")
    public String index(){
        System.out.println("index...");
        return "index";
    }
}

5.在resources下创文件夹templates

因为在application.yml中后缀是 .html
所以在 templates 中新建 index

6.在index.html中的< body></ body>中加入代码：< h1>hello world</ h1>
其完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

7.重启启动类Application
进入 http://localhost:9090/index/index

8.修改controller/IndexHandler中的 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";
    }

完整代码：

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;

@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";
    }
}

9.在resources/templates/index.html的< / h1>后加代码：

    <table>
        <tr>
            <th>学生ID</th>
            <th>学生姓名</th>
            <th>学生年龄</th>
        </tr>
        <tr th:each="student:${list}"><!-- 对应第二行html -->
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td th:text="${student.age}"></td>
        </tr>
    </table>

且index第二行引入：

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

完整：

<!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}"><!-- 对应第二行html -->
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td th:text="${student.age}"></td>
        </tr>
    </table>

</body>
</html>

10 重启Application
进入 http://localhost:9090/index/index

如果希望客户端可直接访问 HTML 资源，将资源放置在 resour/static 路径下即可，否则必须通过 Handler 的后台映射才可以访问静态资源

qq_1403034144

发布了42 篇原创文章 · 获赞 2 · 访问量 1170

私信关注

springboot学习3——thymeleaf

猜你喜欢