返回顶部
首页 > 资讯 > 精选 >SpringBoot中web模板渲染怎么实现
  • 101
分享到

SpringBoot中web模板渲染怎么实现

2023-06-29 02:06:37 101人浏览 独家记忆
摘要

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

这篇“SpringBootWEB模板渲染怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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">    <h3 th:text="${title}">Cum sociis(博客标题)</h3>    <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变量作为<h3>标签的内容(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会传递给你正确的对象。

运行结果:

SpringBoot中web模板渲染怎么实现

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">    <h3 th:text="${blog.title}">Cum sociis(博客标题)</h3>    <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>

运行结果:

SpringBoot中web模板渲染怎么实现

提高:往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中web模板渲染怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网精选频道。

--结束END--

本文标题: SpringBoot中web模板渲染怎么实现

本文链接: https://lsjlt.com/news/322061.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • SpringBoot中web模板渲染怎么实现
    这篇“SpringBoot中web模板渲染怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“SpringBoot中web...
    99+
    2023-06-29
  • SpringBoot中web模板渲染的实现
    目录模板ModelModel中添加对象日期格式化模板 开发Web站点的本质,其实就是根据浏览器发起的请求(输入),生成HTML代码返回给浏览器(输出)。在之前的学习中,我们已经通过文...
    99+
    2024-04-02
  • Java怎么实现简单的模板渲染
    这篇文章将为大家详细讲解有关Java怎么实现简单的模板渲染,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。java基本数据类型有哪些Java的基本数据类型分为:1、整数类型,用来表示整数的数据类型。2、浮点...
    99+
    2023-05-30
    java
  • Gin Web 应用程序仅渲染一个模板
    Gin是一款轻量级的Web框架,被广泛应用于Go语言的Web开发中。在Gin中,Web应用程序通常只需要渲染一个模板即可完成页面的展示。这种设计使得开发者可以更加专注于业务逻辑的实现,...
    99+
    2024-02-13
    go语言
  • SpringBoot中web模版数据渲染展示的示例分析
    这期内容当中小编将会给大家带来有关SpringBoot中web模版数据渲染展示的示例分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。模板引擎SpringBoot是通过模版引擎进行页面结果渲染的,官方提供...
    99+
    2023-06-29
  • SpringBoot中web模版数据渲染展示的案例详解
    在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 。在这里我们演示一下从后台返回数据渲 染到前端页面的项目案例. 模板引擎 SpringBoot是通过模版引擎进行页面结果渲...
    99+
    2024-04-02
  • Vue怎么实现条件渲染与列表渲染
    本文小编为大家详细介绍“Vue怎么实现条件渲染与列表渲染”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么实现条件渲染与列表渲染”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、Vue条件渲染v-show...
    99+
    2023-06-30
  • Nodejs中怎么使用模板引擎以及使用模板引擎渲染HTML
    这篇文章给大家分享的是有关Nodejs中怎么使用模板引擎以及使用模板引擎渲染HTML的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用readdir获取指定路径下的所有文件名文件...
    99+
    2024-04-02
  • Vue中怎么实现列表渲染
    这期内容当中小编将会给大家带来有关Vue中怎么实现列表渲染,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。<!DOCTYPE html> <ht...
    99+
    2024-04-02
  • React中怎么实现条件渲染
    今天就跟大家聊聊有关React中怎么实现条件渲染,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1. if-else我们可以将 if-else 条件逻...
    99+
    2024-04-02
  • 解读Vue实例的属性及模板渲染
    目录1 概述2 el:与DOM元素绑定3 data:定义双向绑定的数据4 computed:计算属性5 methods:定义Vue实例的方法6 Vue中的三种模板6.1 html模板...
    99+
    2022-12-03
    Vue实例的属性 Vue模板渲染 Vue渲染
  • Jinja2如何实现模板渲染与访问对象属性
    这篇“Jinja2如何实现模板渲染与访问对象属性”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Jinja2如何实现模板渲染与...
    99+
    2023-07-05
  • vue中怎么实现服务端渲染
    本篇文章为大家展示了vue中怎么实现服务端渲染,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、什么是服务端渲染客户端请求服务器,服务器根据请求地址获得匹配的组件,...
    99+
    2024-04-02
  • vue.js中怎么实现声明式渲染
    这期内容当中小编将会给大家带来有关vue.js中怎么实现声明式渲染,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。绑定 DOM 元素文本值html代码:<div&nb...
    99+
    2024-04-02
  • android离屏渲染怎么实现
    Android的离屏渲染可以通过以下几种方式来实现:1. 使用TextureView:TextureView是一个可以在后台线程中进...
    99+
    2023-10-07
    android
  • 怎么使用React虚拟渲染实现多个图表渲染
    今天小编给大家分享一下怎么使用React虚拟渲染实现多个图表渲染的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。需求每行渲染3...
    99+
    2023-07-02
  • Jinja2实现模板渲染与访问对象属性流程详解
    目录1.Jinja21.简介2.Jinja2模板2.模板渲染app.pytemplates/index.htmltemplates/blog_detail.html效果3.模板访问对...
    99+
    2023-03-03
    Jinja2模板渲染 Jinja2模板访问对象属性
  • 怎么在python中利用jinja2实现渲染
    这期内容当中小编将会给大家带来有关怎么在python中利用jinja2实现渲染,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Python的优点有哪些1、简单易用,与C/C++、Java、C# 等传统语言相...
    99+
    2023-06-14
  • Vue中的动态组件怎么实现渲染
    本篇内容介绍了“Vue中的动态组件怎么实现渲染”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1、什么是动态组件动态组件指的是动态切换组件的显...
    99+
    2023-06-30
  • React中的重新渲染实现
    目录缘起类组件React 合成事件定时器回调后触发 setState异步函数后调触发 setState原生事件触发setState 修改不参与渲染的属性只是调用 setState,页...
    99+
    2023-01-31
    React 重新渲染
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作