Spring boot 集成Thymeleaf

前言

上一篇介绍了Spring Boot中整合Jsp,尽管Spring boot官方并不推荐使用Jsp~

这篇文章将介绍如何整合官方所推荐的Thymeleaf模板引擎

简单了解

首先新建项目,选择模板引擎时,会有四个可以选择

至于JSP技术Spring Boot官方为什么不推荐的,因为:

我们学习的是 Spring Boot ,如果老是问JSP的问题,其实并不是特别合适,假如出了问题,Spring Boot 团队开发都搞不定,更何况我们作为框架的使用方~

当我们使用上述模板引擎中的任何一个,它们默认的模板配置路径为:src/main/resources/templates。当然也可以修改这个路径,具体如何修改,文章后面会提及

模板引擎依赖
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

项目结构


简单来说

  • domain用于存放实体
  • app.rest用于存放控制器
  • server用于处理逻辑
  • repository用于操作数据库

修改配置文件

一般来说,只要导入了依赖,不需要配置,就能使用thymeleaf,但是会存在些问题

  1. 缓存打开还是关闭:缓存的意思是加载一次模板之后便不会在加载了,对于生产环境应该加上缓存,但是在开发过程中如果打开缓存
  2. 是否需要HTML5强校验:如果你使用别人的HTML模板,并且模板中很多语法都不严格,这个时候项目就会报错,因此有时候需要关闭强校验

导入依赖

	<!--解析html,关闭强校验-->
    <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.22</version>
    </dependency>

application.yml

server:
  port: 8080

spring:
  thymeleaf:
    cache: false
    mode: LEGACYHTML5
    #在构建URL时添加到视图名称前的前缀(默认值:classpath:/templates/)
    prefix: classpath:/templates/

编写相关代码

1、编写controller

import me.zhengjie.domain.User;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

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

@RestController
@RequestMapping("user")
public class UserController {

    @GetMapping
    public ModelAndView index(Model model){

        List<User> users = new ArrayList<>();

        users.add(new User("小王",12,"男"));
        users.add(new User("小李",13,"女"));
        users.add(new User("小张",14,"男"));

        model.addAttribute("users",users);

        return new ModelAndView("/index");
    }
}

2、编写html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<div style="text-align: center;margin:0 auto;width: 1000px; ">
    <h1>用户列表</h1>
    <table width="100%" border="1" cellspacing="1" cellpadding="0">
        <tr>
            <td>用户名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr th:each="user: ${users}">
            <td th:text="${user.username}">用户名</td>
            <td th:text="${user.age}">年龄</td>
            <td th:text="${user.sex}">性别</td>
        </tr>
    </table>
</div>
</body>
</html>

**注:**通过xmlns:th=”http://www.thymeleaf.org“ 命令空间,将静态页面转换为动态的视图,需要进行动态处理的元素将使用“th:”前缀。

启动项目

Thymeleaf一些小知识

变量表达式
<span th:text="${user.username}">  
#遍历
<li th:each="user : ${users}">  
URL表达式

URL表达式指的是把一个有用的上下文或回话信息添加到URL,这个过程经常被叫做URL重写。

@{/user/index}

URL还可以设置参数:

@{/user/delete(id=${id})}

相对路径:

@{../user/index}

让我们看这些表达式:

    <form th:action="@{/createOrder}">  
    <a href="main.html" th:href="@{/main}">
th如何遍历下拉框
<select name="user">
<option value="0"></option>
<option th:each="u:${users}" th:value="${u.username}">[[${u.username}]]</option>
</select>

更多的Thymeleaf教程,可自行百度学习,下篇文章将讲解如何使用Jpa对数据库的增删改查

项目源码

github:https://github.com/dqjdda/SpringBoot_All

码云:https://gitee.com/hgpt/SpringBoot_All

开源后台管理系统:

欢迎体验Aurora

github: https://github.com/dqjdda/Aurora

码云: https://gitee.com/hgpt/Aurora

猜你喜欢

转载自blog.csdn.net/zj7321/article/details/82987338
今日推荐