乐趣区

关于springboot:第四节SpringBoot中web模版数据渲染展示

jiezi

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

模板引擎

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>

创立 com.rumenz.lession4.controller 包

创立模板页面

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>
<h1>FreeMarker 案例 </h1>
<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/spr…
  • Gitee:https://gitee.com/rumenz/spri…
  • https://rumenz.com/rumenbiji/…

介绍

  • 我的博客 https://rumenz.com/
  • 我的工具箱 https://tooltt.com/
  • 微信公众号:【入门小站】

  • 关注【入门小站】回复【1001】获取 linux 常用命令速查手册
  • 关注【入门小站】回复【1003】获取 LeetCode 题解【java 语言实现】
  • 关注【入门小站】回复【1004】获取 Java 根底外围总结
  • 关注【入门小站】回复【1009】获取 阿里巴巴 Java 开发手册
退出移动版