我的编程空间,编程开发者的网络收藏夹
学习永远不晚

SpringBoot中web模板渲染的实现

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

SpringBoot中web模板渲染的实现

模板

开发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中添加对象有两种方式:

  1. model.addAttribute("blog",blog);
  2. 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 模板渲染内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

SpringBoot中web模板渲染的实现

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

SpringBoot中web模板渲染怎么实现

这篇“SpringBoot中web模板渲染怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“SpringBoot中web
2023-06-29

Java怎么实现简单的模板渲染

这篇文章将为大家详细讲解有关Java怎么实现简单的模板渲染,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。java基本数据类型有哪些Java的基本数据类型分为:1、整数类型,用来表示整数的数据类型。2、浮点
2023-05-30

SpringBoot中web模版数据渲染展示的示例分析

这期内容当中小编将会给大家带来有关SpringBoot中web模版数据渲染展示的示例分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。模板引擎SpringBoot是通过模版引擎进行页面结果渲染的,官方提供
2023-06-29

解读Vue实例的属性及模板渲染

这篇文章主要介绍了解读Vue实例的属性及模板渲染问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-12-03

Jinja2如何实现模板渲染与访问对象属性

这篇“Jinja2如何实现模板渲染与访问对象属性”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Jinja2如何实现模板渲染与
2023-07-05

React中的重新渲染实现

本文主要介绍了React中的重新渲染实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-01-31

Jinja2实现模板渲染与访问对象属性流程详解

要了解jinja2,那么需要先理解模板的概念。模板在Python的web开发中广泛使用,它能够有效的将业务逻辑和页面逻辑分开,使代码可读性增强,并且更加容易理解和维护。模板简单来说就是一个其中包含占位变量表示动态部分的文,模板文件在经过动态赋值后,返回给用户
2023-03-03

使用Go语言文档中的html/template.Execute函数渲染模板

使用Go语言文档中的html/template.Execute函数渲染模板,需要具体代码示例在Web 应用程序的开发中,模板引擎是一个非常重要的部分。模板引擎可以通过将模板文件与数据进行合并,输出最终的 HTML 页面。同时,模板引擎可以将
使用Go语言文档中的html/template.Execute函数渲染模板
2023-11-03

掌握Canvas渲染模式的实现及工作原理

理解Canvas渲染模式的原理和实现,需要具体代码示例首先,我们需要明确Canvas是HTML5提供的绘图API,它允许我们在浏览器中使用JavaScript来绘制图形、动画和其他可视化效果。Canvas可以使用两种渲染模式进行绘制:2D
掌握Canvas渲染模式的实现及工作原理
2024-01-17

Vue中的动态组件怎么实现渲染

本篇内容介绍了“Vue中的动态组件怎么实现渲染”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1、什么是动态组件动态组件指的是动态切换组件的显
2023-06-30

浅谈在koa2中实现页面渲染的全局数据

最近用koa2做一个项目的web端,遇到一个场景。 该项目主要用的是传统的服务端渲染的方式,所以会用 koa-views 去做页面的渲染工作。实现方式就是 ctx.render('path',data),那么,有如下场景,每个页面都需要去验
2022-06-04

游戏开发中的图形渲染技术:实现逼真视觉效果(游戏开发中如何实现高质量的图形渲染?)

游戏开发中,逼真的图形渲染至关重要。实现高质量渲染需结合光栅化、光线追踪、基于物理的渲染等技术。高分辨率纹理、法线贴图、置换贴图、金属-非金属工作流程等材质和纹理技术提升模型表面细节。动态照明、全局光照、延迟渲染等照明和阴影技术增强真实感。环境光遮蔽、景深、抗锯齿、模糊等后处理效果完善图像质量。此外,LOD、视锥体剔除、多线程渲染、GPU加速等优化技术提高性能。
游戏开发中的图形渲染技术:实现逼真视觉效果(游戏开发中如何实现高质量的图形渲染?)
2024-04-02

ReActor模型在3D建模和虚拟现实中的动态交互与渲染有哪些创新应用

ReActor模型在3D建模和虚拟现实中具有以下创新应用:动态交互:ReActor模型通过使用反应式材料和传感器技术,可以实现与用户的动态交互。用户可以通过触摸、声音、光线等方式与ReActor模型进行互动,从而实现更加真实和直观的体验。实
ReActor模型在3D建模和虚拟现实中的动态交互与渲染有哪些创新应用
2024-05-21

Xamarin XAML语言中如何实现控件模板的模板绑定

这篇文章主要介绍Xamarin XAML语言中如何实现控件模板的模板绑定,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 控件模板的模板绑定为了可以轻松更改控件模板中控件上的属性值,可以在控件模板中实现模板绑定功能。模
2023-06-04

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录