springboot 技术图谱_第三章 SpringBoot整合视图层技术

1、整合thymeleaf(官方推荐)

1.1 thymeleaf是什么

java新一代的模板引擎，支持html原型，可以让前端工程师

直接浏览器查看样式，也可以支持后端工程师结合真实数据查看效果。

1.2 整合步骤

添加依赖

org.springframework.boot

spring-boot-starter-web

1.5.12.RELEASE

org.springframework.boot

spring-boot-starter-thymeleaf

1.5.12.RELEASE

配置thymeleaf

ctrl+shift+r全局搜索ThymeleafAutoConfiguration类，这是springboot为thymeleaf提供的配置类。而相关配置属性在ThymeleafProperties这个类中。

image.png

修改thymeleaf的默认配置(在application.properties)

部分常见配置

image.png

1.3 实战

创建maven工程，不需要选择项目框架

pom文件

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">

4.0.0

com.ljs

thymeleaf

1.0-SNAPSHOT

thymeleaf

Demo project for Spring Boot

org.springframework.boot

spring-boot-starter-parent

2.0.3.RELEASE

UTF-8

UTF-8

1.8

org.springframework.boot

spring-boot-starter-thymeleaf

org.springframework.boot

spring-boot-starter-web

springboot启动类，使用组合注解

@SpringBootApplication

public class Application {

public static void main(String[] args) {

SpringApplication.run(Application.class, args);

}

}

实体类和Controller类

public class Book {

private Integer id;

private String name;

private String author;

//省略get和set

@Controller

public class BookController {

@GetMapping("/books")

public ModelAndView Books(){

List books = new ArrayList<>();

Book book1 = new Book();

book1.setId(1);

book1.setName("springboot");

book1.setAuthor("王松");

Book book2 = new Book();

book2.setId(2);

book2.setName("vue");

book2.setAuthor("王松");

books.add(book1);

books.add(book2);

ModelAndView mv = new ModelAndView();

mv.addObject("books", books);

//视图名为books

mv.setViewName("books");

return mv;

}

}

创建模板

在resource下创建templates文件夹，创建books.html

注意第二行导入thymeleaf的名称空间

图书列表

id	书名	作者

启动运行

image.png

1.5 更多关于thymeleaf的基础用法，

2、整合FreeMarker

2.1 freemarker

与Thymeleaf不同 FreeMarker 需要经过解析才能够在浏览器中展示出来。 freeMarker不仅可以用来配置HTML页面模板，也可以作为电子邮件模板、配置文件模板以及源码模板等。

2.2 整合步骤

添加依赖

org.springframework.boot

spring-boot-starter-web

org.springframework.boot

spring-boot-starter-freemarker

配置freemarker

SpringBoot对FreeMarker也提供了自动化配置类 FreeMarkerAutoConfiguration ，相关的配属性在FreeMarkerProperties

ctrl+shift+r全局搜索FreeMarkerProperties类

image.png

修改freemarker默认配置(application.properties)

image.png

3.3 实战

这次直接创建springboot工程，而不是maven工程

image.png

pom文件直接加入上面两个依赖就行

实体类和controller和上面一样

模板文件

其中先判断model中的books不为空并且有数据，然后再遍历

图书列表

---

图书编号

图书名称

图书作者

0)>

${book.id}${book.name}${book.author}

#list>

#if>

运行

image.png

2.4 更多关于freemarker基础用法

freemarker官网

3 小结

本章介绍了springboot整合视图层技术，如果项目未完全分离可以使用上面两种代替jsp，如果完全分离后端只需提供接口而不需要整合这些。