上一篇介绍的是用 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
网友评论