SpringBoot中web模版数据渲染展示的案例详解

在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 。在这里我们演示一下从后台返回数据渲 染到前端页面的项目案例.

模板引擎

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

  • Thymeleaf
  • FreeMarker
  • Velocity
  • Groovy
  • Mustache

我们在这里演示使用Thymeleaf和FreeMarker模板引擎。

Thymeleaf

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

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

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

新建一个模块

选择我们需要的组建

  • Developer Tools中的Spring Boot DevTools
  • Web中的Spring Web
  • Template Engines 中的Thymeleaf

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

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

创建模板页面

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;
/**
 * @className: ThymeleafRumenController
 * @description: TODO 类描述
 * @author: 入门小站 rumenz.com
 * @date: 2021/11/1
 **/
@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";
    }
}

启动项目

浏览器验证

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

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;
/**
 * @className: FreeMarkerRumenController
 * @description: TODO 类描述
 * @author: 入门小站 rumenz.com
 * @date: 2021/11/1
 **/
@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";
    }
}

浏览器验证

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

本小结源码地址:

GitHub:https://github.com/mifunc/springboot/tree/main/lession4

Gitee:https://gitee.com/rumenz/springboot/tree/master/lession4

https://rumenz.com/rumenbiji/springboot-tpl.html

到此这篇关于SpringBoot中web模版数据渲染展示 的文章就介绍到这了,更多相关SpringBoot模版渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • spring boot 集成 shiro 自定义密码验证 自定义freemarker标签根据权限渲染不同页面(推荐

    项目里一直用的是 spring-security ,不得不说,spring-security 真是东西太多了,学习难度太大(可能我比较菜),这篇博客来总结一下折腾shiro的成果,分享给大家,强烈推荐shiro,真心简单 : ) 引入依赖 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring</artifactId> <version>1.4

  • 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模版数据渲染展示的案例详解

    SpringBoot中web模版数据渲染展示的案例详解

    在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 .在这里我们演示一下从后台返回数据渲 染到前端页面的项目案例. 模板引擎 SpringBoot是通过模版引擎进行页面结果渲染的,官方提供预设配置的模版引擎主要有 Thymeleaf FreeMarker Velocity Groovy Mustache 我们在这里演示使用Thymeleaf和FreeMarker模板引擎. Thymeleaf Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎. Thymel

  • Java SpringBoot在RequestBody中高效的使用枚举参数原理案例详解

    Java SpringBoot在RequestBody中高效的使用枚举参数原理案例详解

    在优雅的使用枚举参数(原理篇)中我们聊过,Spring对于不同的参数形式,会采用不同的处理类处理参数,这种形式,有些类似于策略模式.将针对不同参数形式的处理逻辑,拆分到不同处理类中,减少耦合和各种if-else逻辑.本文就来扒一扒,RequestBody参数中使用枚举参数的原理. 找入口 对 Spring 有一定基础的同学一定知道,请求入口是DispatcherServlet,所有的请求最终都会落到doDispatch方法中的ha.handle(processedRequest, respons

  • SpringBoot中dubbo+zookeeper实现分布式开发的应用详解

    SpringBoot中dubbo+zookeeper实现分布式开发的应用详解

    总体实现思路是启动一个生产者项目注册, 将所含服务注册到zookeeper的注册中心, 然后在启动一个消费者项目,将所需服务向zookeeper注册中心进行订阅, 等待注册中心的通知 注册中心基于负载均衡算法给消费者匹配到合适的生产者主机,然后通知消费者可以使用 实现生产者 导入zookeeper依赖包 <!-- Dubbo Spring Boot Starter --> <dependency> <groupId>org.apache.dubbo</groupI

  • SpringBoot实战之实现结果的优雅响应案例详解

    今天说一下 Spring Boot 如何实现优雅的数据响应:统一的结果响应格式.简单的数据封装. 前提 无论系统规模大小,大部分 Spring Boot 项目是提供 Restful + json 接口,供前端或其他服务调用,格式统一规范,是程序猿彼此善待彼此的象征,也是减少联调挨骂的基本保障. 通常响应结果中需要包含业务状态码.响应描述.响应时间戳.响应内容,比如: { "code": 200, "desc": "查询成功", "tim

  • SpringBoot + WebSocket 实现答题对战匹配机制案例详解

    SpringBoot + WebSocket 实现答题对战匹配机制案例详解

    概要设计 类似竞技问答游戏:用户随机匹配一名对手,双方同时开始答题,直到双方都完成答题,对局结束.基本的逻辑就是这样,如果有其他需求,可以在其基础上进行扩展 明确了这一点,下面介绍开发思路.为每个用户拟定四种在线状态,分别是:待匹配.匹配中.游戏中.游戏结束.下面是流程图,用户的流程是被规则约束的,状态也随流程而变化 对流程再补充如下: 用户进入匹配大厅(具体效果如何由客户端体现),将用户的状态设置为待匹配 用户开始匹配,将用户的状态设置为匹配中,系统搜索其他同样处于匹配中的用户,在这个过程中,

  • C# web.config之<customErrors>节点说明案例详解

    <customErrors>节点用于定义一些自定义错误信息的信息.此节点有Mode和defaultRedirect两个属性,其中defaultRedirect属性是一个可选属性,表示应用程序发生错误时重定向到的默认URL,如果没有指定该属性则显示一般性错误.Mode属性是一个必选属性,它有三个可能值,它们所代表的意义分别如下: Mode 说明 On 表示在本地和远程用户都会看到自定义错误信息. Off 禁用自定义错误信息,本地和远程用户都会看到详细的错误信息. RemoteOnly 表示本地用

  • SpringBoot之通过BeanPostProcessor动态注入ID生成器案例详解

    SpringBoot之通过BeanPostProcessor动态注入ID生成器案例详解

    在分布式系统中,我们会需要 ID 生成器的组件,这个组件可以实现帮助我们生成顺序的或者带业务含义的 ID. 目前有很多经典的 ID 生成方式,比如数据库自增列(自增主键或序列).Snowflake 算法.美团 Leaf 算法等等,所以,会有一些公司级或者业务级的 ID 生成器组件的诞生.本文就是通过 BeanPostProcessor 实现动态注入 ID 生成器的实战. 在 Spring 中,实现注入的方式很多,比如 springboot 的 starter,在自定义的 Configuratio

  • Python中read,readline和readlines的区别案例详解

    Python中read,readline和readlines的区别案例详解

    python中有神奇的三种读操作:read.readline和readlines read()  : 一次性读取整个文件内容.推荐使用read(size)方法,size越大运行时间越长 readline()  :每次读取一行内容.内存不够时使用,一般不太用 readlines()   :一次性读取整个文件内容,并按行返回到list,方便我们遍历 一般小文件我们都采用read(),不确定大小你就定个size,大文件就用readlines() 1)我们先用read来完整读取一个小文件,代码如下: f

  • python3爬虫学习之数据存储txt的案例详解

    python3爬虫学习之数据存储txt的案例详解

    上一篇实战爬取知乎热门话题的实战,并且保存为本地的txt文本 先上代码,有很多细节和坑需要规避,弄了两个半小时 import requests import re headers = { "user-agent" : "Mozilla/5.0 (Windows NT 6.1; Win64; x64)" " AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari" &quo

  • PHP的Yii框架中创建视图和渲染视图的方法详解

    视图是 MVC 模式中的一部分. 它是展示数据到终端用户的代码,在网页应用中,根据视图模板来创建视图,视图模板为PHP脚本文件, 主要包含HTML代码和展示类PHP代码,通过yii\web\View应用组件来管理, 该组件主要提供通用方法帮助视图构造和渲染,简单起见,我们称视图模板或视图模板文件为视图. 创建视图 如前所述,视图为包含HTML和PHP代码的PHP脚本,如下代码为一个登录表单的视图, 可看到PHP代码用来生成动态内容如页面标题和表单,HTML代码把它组织成一个漂亮的HTML页面.

随机推荐