zoukankan      html  css  js  c++  java
  • Spring Boot入门第四天:使用Thymeleaf模板引擎

    关于Thymeleaf的优点,我只说一条:它就是html页面啊,直接可以用浏览器打开。受够了JSP的同学可以尝试一下。

    1.在pom.xml文件中添加依赖:

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

    spring-boot-starter-thymeleaf下面已经包括了spring-boot-starter-web,所以可以把spring-boot-starter-web的依赖去掉。

    2.配置属性。其实完全可以使用不用配置,但是Spring Boot官方文档建议在开发时将缓存关闭,那就在application.properties文件中加入下面这行吧:

    spring.thymeleaf.cache=false

    3.编写Controller类。

    package com.yws710.springboot.demo1.controller;
    
    import com.yws710.springboot.demo1.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    
    @Controller
    @RequestMapping("/user")
    public class UserController {
    
        @Autowired
        UserService userService;
    
        @RequestMapping("/list2")
        public String userList2(Model model) throws Exception {
            model.addAttribute("hello","Hello, Spring Boot!");
            model.addAttribute("userList", userService.userList());
            return "/user/list2";
        }
    }

    4.创建Thymeleaf模板文件。在classpath:resources下创建一个名为templates的文件夹,在templates的子文件夹user中创建一个名为list2.html的文件。

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>用户列表</title>
        <link href="/css/main.css" rel="stylesheet" />
    </head>
    <body>
        <h1 th:text="${hello}">Hello, Spring Boot!</h1>
        <table>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>生日</th>
                <th>薪资</th>
            </tr>
            <tr th:each="user : ${userList}">
                <td th:text="${user.id}">0</td>
                <td th:text="${user.name}">zhansan</td>
                <td th:text="${user.birthday}">1988-06-01</td>
                <td th:text="${user.salary}">12345</td>
            </tr>
        </table>
    
        <select>
            <option th:each="user:${userList}" th:value="${user.id}" th:text="${user.name}">我是默认值</option>
        </select>
    
    </body>
    </html>

    需要注意的是,模板文件中的所有标签都需要闭合哦。meta标签需要这么写:<meta charset="UTF-8" />或者<meta charset="UTF-8"></meta>。但是,难免有疏忽的时候,那怎么办?使用3版本吧。只需要在pom.xml文件中增加如下代码:

        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <!-- set thymeleaf version -->
            <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
            <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
        </properties>

    这样就不用担心单标签关闭的问题了,更符合书写习惯。

    5.启动项目,查看运行结果:

    作为对比,直接在浏览器中打开list2.html看看会怎样?

    很遗憾,样式文件没加载到。模板文件中是这样写的:

    <link href="/css/main.css" rel="stylesheet" />
    但是样式文件是在classes/static/css中呢。淡淡的忧伤。
    使用如下方式即可很好地解决上述问题。
    <link href="../../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet" />
  • 相关阅读:
    阿里笔试题
    springboot-security-jwt
    java 面试架构篇
    java 面试题 mybatis 篇
    Java 多线程并发工具类
    java 面试题 高阶版
    给你的右键菜单添加“VScode”
    HTML重点知识点汇总
    HTML5知识点小结
    给博客园添加百度统计方法
  • 原文地址:https://www.cnblogs.com/yws710/p/7223379.html
Copyright © 2011-2022 走看看