【Spring Boot整合视图层技术】

【Spring Boot整合视图层技术】

? 企业级应用开发中,前后端分离是趋势,但是视图层技术还占有一席之地。Spring Boot对视图层技术提供了很好的支持,官方推荐使用的模板引擎是Thymeleaf,不过像FreeMarker也支持,JSP技术在这里并不推荐使用。

一、整合Thymeleaf

? Thymeleaf支持HTML原型,既可以让前端工程师在浏览器中直接打开查看样式,也可以让后端工程师结合真实数据查看效果。

1、创建工程、添加依赖

? 新建一个Spring Boot工程,然后添加spring-boot-starter-web和spring-boot-starter-thymeleaf依赖。

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

2、配置Thymeleaf

? Spring Boot为Thymeleaf提供了自动化配置类ThymeleafAutoConfiguration,相关的配置属性在ThymeleafProperties类中,ThymeleafProperties部分源码如下:

? 【Spring Boot整合视图层技术】

可以看出:

  • 默认的模板位置在 classpath:/templates/

  • 默认的模板后缀为.html

  • 如果使用IDEA创建SpringBoot项目,templates文件夹默认就会创建

    修改Thymeleaf配置参数,在application.properties中进行配置:

#是否开启缓存,开发时可以设置为false,默认为true
spring.thymeleaf.cache=true
#检查模板是否存在,默认为true
spring.thymeleaf.check-template=true
#检查模板位置是否存在,默认为true
spring.thymeleaf.check-template-location=true
#模板文件编码
spring.thymeleaf.prefix=classpath:/templates/
#Content-Type配置
spring.thymeleaf.servlet.content-type=text/html
#模板文件后缀
spring.thymeleaf.suffix=.html

3、配置控制器

? 创建Book实体类,然后再Controller中返回ModelAndView,代码如下:

package com.darkerg.chapter3.pojo;

import lombok.Data;

@Data
public class Book {
    private Integer id;
    private String name;
    private String author;
}

BookController.java

package com.darkerg.chapter3.controller;

import com.darkerg.chapter3.pojo.Book;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

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

@Controller
public class BookController {

    @GetMapping("/books")
    public ModelAndView books(){
        List<Book> books = new ArrayList<>();
        Book b1 = new Book();
        b1.setId(1);
        b1.setAuthor("罗贯中");
        b1.setName("三国演义");

        Book b2 = new Book();
        b2.setId(2);
        b2.setAuthor("曹雪芹");
        b2.setName("红楼梦");

        books.add(b1);
        books.add(b2);

        ModelAndView mv = new ModelAndView();
        mv.addObject("books",books);
        mv.setViewName("books");//设置视图名称为books

        return mv;
    }

}

4、创建视图

? 在resources目录下的templates目录中创建books.html,代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
</head>
<body>

<table border="1">
    <tr>
        <td>图书编号</td>
        <td>图书名称</td>
        <td>图书作者</td>
    </tr>

    <tr th:each="book:${books}">
        <td th:text="${book.id}"></td>
        <td th:text="${book.name}"></td>
        <td th:text="${book.author}"></td>
    </tr>

</table>

</body>
</html>

代码解释:

  • 首先在第2行导入Thymeleaf的名称空间。
  • 然后通过遍历将books中的数据展示出来,Thymeleaf中通过th:each进行集合遍历,通过th:text展示数据。

【Spring Boot整合视图层技术】

5、补充:Thymeleaf的基础用法

https://www.cnblogs.com/msi-chen/p/10974009.html

二、整合FreeMarker

【Spring Boot整合视图层技术】

上一篇:phpstorm 格式化 数组换行显示


下一篇:chap-7 7.2 动态链接的简单实例