SpringBoot 整合HTML

解释:

springBoot可以结合thymeleaf模版来整合HTML,使原生的的HTML作为视图

Thymeleaf模版是面向WEB和独立环境的java模版引擎,能够处理css, html,xml,javascript 等。

<P th:text="${message}"></P>  //用Thymeleaf模版展示数据在页面的p标签内

1.pom.xml

<?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>org.example</groupId>
    <artifactId>springBoot01</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

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

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

        <!--配置lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.16</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!--Thymeleaf模版-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>


</project>

2.application.yml

server:
  port: 9090
spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8

3.Handler

package com.xing.controller;

import com.xing.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,"幸福哈",22));
        list.add(new Student(2L,"张三",23));
        list.add(new Student(3L,"李四",24));

        model.addAttribute("list",list);

        return "/index";
    }
}

4.HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>你好,初心少年</h1>

            <table>
                <tr>
                    <td>学生ID</td>
                    <td>学生姓名</td>
                    <td>学生年龄</td>
                </tr>
                <tr th:each="student:${list}">
                    <td th:text="${student.id}"></td>
                    <td th:text="${student.name}"></td>
                    <td th:text="${student.age}"></td>
                </tr>
            </table>
</body>
</html>

5 结果展示

如果希望客户端可以直接访问HTML资源,将这些资源放在static路径下即可,否则必须通过Handler的后台映射才可以访问静态资源
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐