iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >SpringBoot中web模版数据渲染展示的示例分析
  • 547
分享到

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

2023-06-29 00:06:23 547人浏览 独家记忆
摘要

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

这期内容当中小编将会给大家带来有关SpringBootWEB模版数据渲染展示的示例分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

模板引擎

springBoot是通过模版引擎进行页面结果渲染的,官方提供预设配置的模版引擎主要有

  • Thymeleaf

  • FreeMarker

  • Velocity

  • Groovy

  • Mustache

我们在这里演示使用ThymeleafFreeMarker模板引擎。

Thymeleaf

Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。

Thymeleaf 的主要目标是为你的开发工作流程带来优雅的自然模板——html可以在浏览器中正确显示,也可以作为静态原型工作,从而加强开发团队的协作。

凭借 Spring Framework 的模块、与你最喜欢的工具的大量集成以及插入你自己的功能的能力,Thymeleaf 是现代 HTML5 JVM Web 开发的理想选择——尽管它还有更多功能。

新建一个模块

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

选择我们需要的组建

  • Developer Tools中的Spring Boot DevTools

  • Web中的Spring Web

  • Template Engines 中的Thymeleaf

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

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

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

也可以直接在pom.xml中引入thymeleaf依赖

<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

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

创建模板页面

src/main/resources/templates/index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>thymeleaf - 入门小站</title></head><body><p th:text="'名字:'+${name}"></p><p th:text="'网址:'+${url}"></p></body></html>

创建controller

com.rumenz.lession4.controller.ThymeleafRumenController

package com.rumenz.lession4.controller;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;@Controller@RequestMapping("/")public class ThymeleafRumenController {    @RequestMapping(value = "/index",method= RequestMethod.GET)    public String index(ModelMap m){        //数据也可以从数据库查询出来返回        m.addAttribute("name", "入门小站");        m.addAttribute("url", "https://rumenz.com");        //返回是一个页码:src/main/resources/templates/thymeleaf.html        return "thymeleaf";    }}

启动项目

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

浏览器验证

浏览器访问Http://127.0.0.1:8080/index

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

FreeMarker

FreeMarker是一款模板引擎,即一种基于模板和要改变的数据,并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。

引入依赖

<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-freemarker</artifactId></dependency>

创建模板

src/main/resources/templates/freemarker.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>freemarker - 入门小站</title></head><body>FreeMarker案例<p>名字:${name}</p><p>网址:${url}</p></body></html>

配置文件

src/main/resources/application.properties,指定模板文件的后缀。

spring.freemarker.suffix=.html

编写controller

com.rumenz.lession4.controller.FreeMarkerRumenController

package com.rumenz.lession4.controller;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;@Controller@RequestMapping("/")public class FreeMarkerRumenController {    @RequestMapping("/index2")    public String index2(ModelMap m){        //数据也可以从数据库查询出来返回        m.addAttribute("name", "入门小站");        m.addAttribute("url", "https://rumenz.com");        //返回是一个页码:src/main/resources/templates/freemarker.html        return "freemarker";    }}

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

浏览器验证

浏览器访问http://127.0.0.1:8080/index2

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

上述就是小编为大家分享的SpringBoot中web模版数据渲染展示的示例分析了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网精选频道。

--结束END--

本文标题: SpringBoot中web模版数据渲染展示的示例分析

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

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

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
猜你喜欢
  • SpringBoot中web模版数据渲染展示的示例分析
    这期内容当中小编将会给大家带来有关SpringBoot中web模版数据渲染展示的示例分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。模板引擎SpringBoot是通过模版引擎进行页面结果渲染的,官方提供...
    99+
    2023-06-29
  • SpringBoot中web模版数据渲染展示的案例详解
    在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 。在这里我们演示一下从后台返回数据渲 染到前端页面的项目案例. 模板引擎 SpringBoot是通过模版引擎进行页面结果渲...
    99+
    2024-04-02
  • Vue渲染的示例分析
    小编给大家分享一下Vue渲染的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Vue 推荐在绝大多数情况下使用 templ...
    99+
    2024-04-02
  • Vue中条件渲染和列表渲染的示例分析
    这篇文章将为大家详细讲解有关Vue中条件渲染和列表渲染的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活...
    99+
    2023-06-25
  • React中条件渲染的示例分析
    小编给大家分享一下React中条件渲染的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!前言在React中,你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分,这...
    99+
    2024-04-02
  • vue3中渲染系统的示例分析
    这篇文章给大家分享的是有关vue3中渲染系统的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。思考在开始今天的文章之前,大家可以想一下:vue文件是如何转换成DOM节点,并渲染到浏览器上的?数据更新时,整个...
    99+
    2023-06-22
  • 浏览器渲染的示例分析
    这篇文章将为大家详细讲解有关浏览器渲染的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。浏览器渲染1.浏览器渲染图解浏览器渲染页面主要经历了下面的步骤:处理 HTML 标记并构建 DOM 树。处理 ...
    99+
    2023-06-15
  • vue2.0中虚拟DOM渲染的示例分析
    这篇文章主要为大家展示了“vue2.0中虚拟DOM渲染的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue2.0中虚拟DOM渲染的示例分析”这篇文章吧...
    99+
    2024-04-02
  • js模板引擎art template数组渲染的示例分析
    这篇文章主要介绍js模板引擎art template数组渲染的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是art-templateart-template 是一个简约...
    99+
    2024-04-02
  • react服务器渲染的示例分析
    这篇文章给大家分享的是有关react服务器渲染的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言本文是基于react ssr的入门教程,在实际项目中使用还需要做更多的配...
    99+
    2024-04-02
  • Nuxt中Vue.js服务端渲染的示例分析
    这篇文章主要为大家展示了“Nuxt中Vue.js服务端渲染的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Nuxt中Vue.js服务端渲染的示例分析”这...
    99+
    2024-04-02
  • React服务端渲染的示例分析
    这篇文章主要介绍了React服务端渲染的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、前言为什么需要服务端渲染?什么情况下进行服...
    99+
    2024-04-02
  • Vue服务器渲染Nuxt的示例分析
    这篇文章主要介绍Vue服务器渲染Nuxt的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是SSR?SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文...
    99+
    2024-04-02
  • vue服务端渲染SSR的示例分析
    小编给大家分享一下vue服务端渲染SSR的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!前言首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回...
    99+
    2024-04-02
  • Vue数据驱动表单渲染form表单的示例分析
    小编给大家分享一下Vue数据驱动表单渲染form表单的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!form-creat...
    99+
    2024-04-02
  • Vue组件中服务器端渲染的示例分析
    这篇文章主要为大家展示了“Vue组件中服务器端渲染的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue组件中服务器端渲染的示例分析”这篇文章吧。现在,...
    99+
    2024-04-02
  • webpack配置之后端渲染的示例分析
    这篇文章主要介绍webpack配置之后端渲染的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图原理原理说起来还是很简单的:1、独立启动静态资源服务器打包生成资源列表(ma...
    99+
    2024-04-02
  • Vue列表页渲染优化的示例分析
    小编给大家分享一下Vue列表页渲染优化的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!想法初始化时,vue会对data做...
    99+
    2024-04-02
  • vue服务端渲染缓存的示例分析
    这篇文章给大家分享的是有关vue服务端渲染缓存的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。服务端渲染简介服务端渲染不是一个新的技术;在 Web 最初的时候,页面就是通...
    99+
    2024-04-02
  • Egg Vue SSR服务端渲染数据请求与asyncData的示例分析
    小编给大家分享一下Egg Vue SSR服务端渲染数据请求与asyncData的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!服务端渲染 Node 层直接获取数据在 Egg 项目如...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作