04-整合 Thymeleaf

作者: 郭艺宾 | 来源:发表于2018-10-16 10:45 被阅读9次

    上一篇介绍的是用 MongoDB 来实现 WebFlux 对数据源的操作,那么有了数据需要渲染到前台给用户展示,这就是本文关心的 View 层,View 的表现形式有很多,比如 JSON 和 HTML。开发中常用模板语言很常见的有 Thymeleaf、Freemarker等,那什么是模板语言?

    常见的模板语言都包含以下几个概念:数据(Data)、模板(Template)、模板引擎(Template Engine)和结果文档(Result Documents)。

    数据

    数据是信息的表现形式和载体,可以是符号、文字、数字、语音、图像、视频等。数据和信息是不可分离的,数据是信息的表达,信息是数据的内涵。数据本身没有意义,数据只有对实体行为产生影响时才成为信息。

    模板

    模板,是一个蓝图,即一个与类型无关的类。编译器在使用模板时,会根据模板实参对模板进行实例化,得到一个与类型相关的类。

    模板引擎

    模板引擎(这里特指用于 Web 开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的 HTML 文档。

    结果文档

    一种特定格式的文档,比如用于网站的模板引擎就会生成一个标准的 HTML 文档。

    模板语言用途广泛,常见的用途如下:

    1  页面渲染

    2  文档生成

    3  代码生成

    4  所有 “数据+模板=文本” 的应用场景

    Spring Boot 推荐使用的模板语言是 Thymeleaf,那什么是 Thymeleaf?

    官方的解释如下:

    Thymeleafisa modern server-side Java template engineforboth webandstandalone environments.

    Thymeleaf 是现代的模板语言引擎,可以独立运行也可以服务于 Web,主要目标是为开发提供天然的模板,并且能在 HTML 里面准确的显示。

    Thymeleaf 是新一代 Java 模板引擎,在 Spring 4 后推荐使用。目前是 Spring 5 自然更加推荐。

    接下来开始写代码,项目内容如下:

    webflux.controller:Controller 层

    dao:数据操作层 DAO

    domain:实体类

    handler:业务逻辑层

    Application:应用启动类

    application.properties:应用配置文件

    pom.xml maven 配置

    application.properties 配置文件

    模板是会用到下面两个目录:

    static 目录是存放 CSS、JS 等资源文件;

    templates 目录是存放视图。

    本文重点在 Controller 层 和 templates 视图的编写。

    首先创建项目:

    这里我们增加了 Thymeleaf 依赖,但不用在 application.properties - 应用配置文件中配置任何配置。默认启动其默认配置,如需修改配置参考 Thymeleaf 依赖配置,如下:

    然后创建类,domain,dao,handler与前面的02-CRUD类似,可以参考,控制器Controller的内容如下:

    解释下语法:

    1    返回值 Mono<String> 或者 String 都行,但是 Mono<String> 代表着我这个返回 View 也是回调的。

    2    return 字符串,该字符串对应的目录在 resources/templates 下的模板名字。

    3    Model 对象来进行数据绑定到视图。

    4    一般会集中用常量管理模板视图的路径。

    然后编写两个视图 hello 和 cityList,代码分别如下。

    hello.html:

    cityList.html:

    常用语法糖如下:

    1    ${...}:变量表达式;

    2    th:text:处理 Tymeleaf 表达式;

    3    th:each:遍历表达式,可遍历的对象有,实现 java.util.Iterable、java.util.Map(遍历时取 java.util.Map.Entry)、array 等。

    4    其它参考官方文档。。。。

    运行工程

    一个 Thymeleaf 的 Spring Boot WebFlux 工程就开发完毕了,下面运行工程验证下。在 IDEA 中执行 Application 类启动,任意正常模式或者 Debug 模式,可以在控制台看到成功运行的输出:

    打开浏览器,访问 http://localhost:8004/city/hello ,可以看到如图的响应:

    通过添加接口添加几个城市,然后访问 http://localhost:8080/city/page/list ,如图:

    总结

    这里探讨了 Spring WebFlux 的如何整合 Thymeleaf,整合其他模板语言 Thymeleaf、Freemarker,就大同小异了。

    原文:https://gitbook.cn/gitchat/column/5acda6f6d7966c5ae1086f2b/topic/5acdaa10d7966c5ae1087066

    代码:https://gitee.com/blueses/springboot-webflux

    相关文章

      网友评论

        本文标题:04-整合 Thymeleaf

        本文链接:https://www.haomeiwen.com/subject/zgwczftx.html