第三章 SpringBoot整合视图层技术

2019-05-05 本文已影响0人 shenyoujian

1、整合thymeleaf(官方推荐)

1.1 thymeleaf是什么

java新一代的模板引擎，支持html原型，可以让前端工程师
直接浏览器查看样式，也可以支持后端工程师结合真实数据查看效果。

1.2 整合步骤

添加依赖

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>1.5.12.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>1.5.12.RELEASE</version>
        </dependency>
    </dependencies>

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

image.png
修改thymeleaf的默认配置(在application.properties)
部分常见配置

image.png

1.3 实战

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

<?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>com.ljs</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>1.0-SNAPSHOT</version>

    <name>thymeleaf</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <!--统一项目字符集编码和java版本-->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <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>
    </dependencies>
</project>

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<Book> 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的名称空间

<!DOCTYPE html>
<html lang="en" xmln:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
</head>
<body>
<table border="1">
    <tr>
        <td>id</td>
        <td>书名</td>
        <td>作者</td>
    </tr>
    <tr th:each="book:${books}">
        <td th:text="${book.id}"/>
        <td th:text="${book.name}"/>
        <td th:text="${book.author}"/>
    </tr>
</table>

</body>
</html>

启动运行

image.png

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

thymeleaf官网

2、整合FreeMarker

2.1 freemarker

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

2.2 整合步骤

添加依赖

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

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

配置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不为空并且有数据，然后再遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
</head>
<body>
<hr>
<table border="1">
    <tr>
        <td>图书编号</td>
        <td>图书名称</td>
        <td>图书作者</td>
    </tr>
<#if books ??&&(books?size>0)>
    <#list books as book>
        <tr>
            <td>${book.id}</td>
            <td>${book.name}</td>
            <td>${book.author}</td>
        </tr>
    </#list>
</#if>
</table>
</body>
</html>

运行
image.png
2.4 更多关于freemarker基础用法
freemarker官网

3 小结

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