SpringBoot中web模板渲染的实现
目录
- 模板
- Model
- Model中添加对象
- 日期格式化
模板
开发Web站点的本质，其实就是根据浏览器发起的请求（输入），生成HTML代码返回给浏览器（输出）。在之前的学习中，我们已经通过文件的形式存储起来而不是直接在Java代码中生成HTML代码。另一方面，博客站点是动态的，即不同的请求返回的内容可能不同。但是对于同一类请求，例如访问id分别为1和2的两篇文章，对应的URL分别为/blogs/1和/blogs/2，他们返回的HTML代码片段的结构几乎是一样的：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<div class="col-sm-8">
<div class="page-header">
<h2 th:text="${title}">Cum sociis（博客标题）</h2>
<p class="blog-post-meta"><span th:text="${createdTime}">2015年2月3日</span> 标签：<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Web开发</a></p>
</div>
<div class="blog-post-content" th:text="${content}">
...
（这里是博客内容）
</div>
</div>
</html>
th:text="${title}"就是告诉模板引擎，用title变量作为<h2>标签的内容(createdTime，content也是一样)。
注意为了显示博客创建时间，我们将时间放入了一个<span>标签中，用于和其他文字区分开。
Model
为了让模板引擎知道这些变量的值，我们需要再@Controller做一些工作：
@RequestMapping("/index/{id}")
public String getIndex(@PathVariable("id") int id ,Model model) {
// return "index";
//这里模拟一些数据
model.addAttribute("title","This is a blog with id = " + id);
model.addAttribute("CreatedTime","2017-11-13");
model.addAttribute("content","This is content");
return "index";
}
在上面的代码中，index()方法增加了一个Model类型的参数。通过Spring MVC框架提供的Model，可以调用其addAttribute方法，这样Thymeleaf可以访问Model中的变量从而进行模板渲染。上述例子中可以看到，title变量的值是根据URL中的@PathVariable来确定的，虽然简单，但是这已经是一个动态页面了。
在Servlet编程中，如果希望在页面中动态渲染信息，一般需要往HTTPRequest中添加属性，然后再JSP中获取。其实Model的属性实际上也是放在HttpRequest的属性中，但是Spring MVC提供了更高层的抽象，帮你屏蔽了HttpRequest，你看到的只有直接以MVC中M（即Model）
如果你依然希望使用HttpRequest，HttpResponse和HttpSession等原生的Servlet API对象，往Controller方法中增加对应类型的参数即可，你在方法中就能直接使用了，Spring MVC会传递给你正确的对象。
运行结果：
Model中添加对象
在上面的例子中，我们已经将单篇文章的页面动态化，但是这个动态化只是一个例子，当我们真正拥有数百篇博文时，并且还会添加(或者删除，更新)。显然不能够直接在@Controller方法中这样来填充Model，另外如果需要渲染文章列表，那么这种方法显然也是不行的。
为了解决这个问题，我们需要使用参考代码JAR包中提供的Blog类：
package Entity;
import java.util.Date;
public class Blog {
private int id;
private String title;
private String content;
private Date createdTime;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public Date getCreatedTime() {
return createdTime;
}
public void setCreatedTime(Date createdTime) {
this.createdTime = createdTime;
}
}
在单篇文章页面里，对于每一个属性，都需要调用一次Model.addAttribute()方法，属性如果很多就会很不方便。现在我们有了Blog对象，可以将它放入Model:
@RequestMapping("/index/{id}")
public String getIndex(@PathVariable("id") int id ,Model model) {
// return "index";
//这里模拟一些数据
// model.addAttribute("title","This is a blog with id = " + id);
// model.addAttribute("CreatedTime","2017-11-13");
// model.addAttribute("content","This is content");
Blog blog = new Blog();
blog.setId(1);
blog.setTitle("This is a blog with id = " + id);
blog.setContent("This is content");
blog.setCreatedTime(new Date());
model.addAttribute("blog",blog);
return "index";
}
根据URL中的id获取对应的Blog对象，然后交给模板引擎渲染blog，相应的在模板中的变量表达式也要发生变化：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<div class="col-sm-8">
<div class="page-header">
<h2 th:text="${blog.title}">Cum sociis（博客标题）</h2>
<p class="blog-post-meta"><span th:text="${blog.createdTime}">2015年2月3日</span> 标签：<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Web开发</a></p>
</div>
<div class="blog-post-content" th:text="${blog.content}">
...
（这里是博客内容）
</div>
</div>
</html>
运行结果：
提高：往Model中添加对象有两种方式：
- model.addAttribute("blog",blog);
- model.addAttribute(blog);
使用第二种时，对象在Model中的命名默认为类名的首字母小写形式，任何时候对于同一种类型，只可能存在一个这样的“匿名”对象。
日期格式化
文章页面经过模板渲染处理后，还存在一个小问题：日期格式。现在对于${blog.createdTime}的渲染结果是Mon Nov 13 16:18:08 GMT+08:00 2017 ，这是因为${blog.createdTime}是一个Date对象，模板引擎在渲染的时候直接调用它的toString()方法。格式化日期是一个非常常见的任务，为此Thymeleaf提供了内置的支持：
<p><span th:text="${#dates.format(blog.createdTime,'yyy-MM-dd')}">2015年2月3日</span> 标签：<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Web开发</a></p>
#dates是Thymeleaf内置的一个工具类，format()方法可以指定日期的格式。
运行结果：
到此这篇关于SpringBoot中web模板渲染的实现的文章就介绍到这了,更多相关SpringBoot 模板渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Spring Boot 与 kotlin 使用Thymeleaf模板引擎渲染web视图的方法
本篇给大家介绍Spring Boot 与 kotlin 使用Thymeleaf模板引擎渲染web视图. 静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源,使用Spring Boot 与 kotlin如何去支持这些静态资源?,很简单. 默认配置 Spring Boot默认提供静态资源目录位置需置于 classpath 下,目录名需符合如下规则: /static /public /resources /META-INF/resources 举例:我们可以在src/
-
SpringBoot中web模板渲染的实现
目录 模板 Model Model中添加对象 日期格式化 模板 开发Web站点的本质,其实就是根据浏览器发起的请求(输入),生成HTML代码返回给浏览器(输出).在之前的学习中,我们已经通过文件的形式存储起来而不是直接在Java代码中生成HTML代码.另一方面,博客站点是动态的,即不同的请求返回的内容可能不同.但是对于同一类请求,例如访问id分别为1和2的两篇文章,对应的URL分别为/blogs/1和/blogs/2,他们返回的HTML代码片段的结构几乎是一样的: <!DOCTYPE html>
-
SpringBoot中web模版数据渲染展示的案例详解
在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 .在这里我们演示一下从后台返回数据渲 染到前端页面的项目案例. 模板引擎 SpringBoot是通过模版引擎进行页面结果渲染的,官方提供预设配置的模版引擎主要有 Thymeleaf FreeMarker Velocity Groovy Mustache 我们在这里演示使用Thymeleaf和FreeMarker模板引擎. Thymeleaf Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎. Thymel
-
使用SpringBoot中web项目推荐目录结构的问题
目录 下面是我创建的目录结构 项目结构 静态资源的目录结构 完整项目结构 SpingBoot 365计划开始更新了,计划手敲365个dSpringBoot案例回顾总结形成知识体系.目前已经输出了32节的内容.所有源码托管在GitHub和Gitee上. 下面是我创建的目录结构 . ├── ./pom.xml └── ./src ├── ./src/main │ ├── ./src/main/java │ │ └── ./src/main/java/com │ │ └── ./src/main/ja
-
SpringBoot中WEB的启动流程分析
目录 一.DispatcherServlet的注册 1.1 把DispatcherServlet注入IOC容器 1.2 把DispatcherServlet注入Servlet容器 想必大家都体验过springboot的便捷,以前想要运行web项目,我们首先需要将项目打成war包,然后再运行Tomcat启动项目,不过自从有了springboot,我们可以像启动jar包一样简单的启动一个web项目,今天我们就来分析下springboot启动web项目整个流程. 老规矩,我们从spring.facto
-
springboot中thymeleaf模板使用详解
这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎. thymeleaf介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页
-
SpringBoot中的Thymeleaf模板
一.前言 Thymeleaf 的出现是为了取代 JSP,虽然 JSP 存在了很长时间,并在 Java Web 开发中无处不在,但是它也存在一些缺陷: 1.JSP 最明显的问题在于它看起来像HTML或XML,但它其实上并不是.大多数的JSP模板都是采用HTML的形式,但是又掺杂上了各种JSP标签库的标签,使其变得很混乱. 2.JSP 规范是与 Servlet 规范紧密耦合的.这意味着它只能用在基于 Servlet 的Web应用之中.JSP模板不能作为通用的模板(如格式化Email),也不能用于非S
-
Go Web 编程中的模板库应用指南(超详细)
如果你有过Web编程的经验,那么或多或少都听说过或者使用过模板.简而言之,模板是可用于创建动态内容的文本文件.例如,你有一个网站导航栏的模板,其中动态内容的一部分可能是根据当前用户是否登录显示登录还是退出按钮. Go提供了两个模板库 text/template和 html/template.这两个模板库的使用方式是相同的,但是 html/template包在渲染页面模板时会在后台进行一些编码以帮助防止造成代码注入(XSS 攻击). 因为两个模板库都使用相同的接口,因此本文中介绍的所有内容均可用于
-
SpringBoot中使用Thymeleaf模板详情
目录 一.什么是Thymeleaf 二.SpringBoot中使用Thymeleaf模板 1.pom.xml中添加thymeleaf依赖 2.关闭thymeleaf缓存 3.创建thymeleaf模板页面 4.创建一个类(用于与上述html页面交互) 5.访问服务路径 一.什么是Thymeleaf 官网原话:Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本. Thymeleaf的主要目标是提供一种优雅且高度
-
SpringBoot中配置Web静态资源路径的方法
介绍: 本文章主要针对web项目中的两个问题进行详细解析介绍:1- 页面跳转404,即controller转发无法跳转页面问题:2- 静态资源文件路径问题. 项目工具: Intelij Idea, JDK1.8, SpringBoot 2.1.3 正文: 准备工作:通过Idea创建一个SpringBoot-web项目,此过程不做赘述,创建完成后项目结构如下图: 1- 创建一个controller代码如下: package com.example.webpractice.controller; i
-
SpringBoot中的响应式web应用详解
简介 在Spring 5中,Spring MVC引入了webFlux的概念,webFlux的底层是基于reactor-netty来的,而reactor-netty又使用了Reactor库. 本文将会介绍在Spring Boot中reactive在WebFlux中的使用. Reactive in Spring 前面我们讲到了,webFlux的基础是Reactor. 于是Spring Boot其实拥有了两套不同的web框架,第一套框架是基于传统的Servlet API和Spring MVC,第二套是