快捷導(dǎo)航

SpringBoot中web模版數(shù)據(jù)渲染展示的案例詳解

更新時間：2022年01月26日 10:05:05 作者：入門小站

憑借 Spring Framework 的模塊、與你最喜歡的工具的大量集成以及插入你自己的功能的能力，Thymeleaf 是現(xiàn)代 HTML5 JVM Web 開發(fā)的理想選擇——盡管它還有更多功能，本文重點給大家介紹SpringBoot中web模版數(shù)據(jù)渲染展示,需要的朋友可以參考下

在第一節(jié)我們演示通過接口返回數(shù)據(jù),數(shù)據(jù)沒有渲染展示在頁面上。在這里我們演示一下從后臺返回數(shù)據(jù)渲染到前端頁面的項目案例.

模板引擎

SpringBoot是通過模版引擎進(jìn)行頁面結(jié)果渲染的，官方提供預(yù)設(shè)配置的模版引擎主要有

Thymeleaf
FreeMarker
Velocity
Groovy
Mustache

我們在這里演示使用Thymeleaf和FreeMarker模板引擎。

Thymeleaf

Thymeleaf是適用于 Web 和獨(dú)立環(huán)境的現(xiàn)代服務(wù)器端 Java 模板引擎。

Thymeleaf 的主要目標(biāo)是為你的開發(fā)工作流程帶來優(yōu)雅的自然模板——HTML可以在瀏覽器中正確顯示，也可以作為靜態(tài)原型工作，從而加強(qiáng)開發(fā)團(tuán)隊的協(xié)作。

憑借 Spring Framework 的模塊、與你最喜歡的工具的大量集成以及插入你自己的功能的能力，Thymeleaf 是現(xiàn)代 HTML5 JVM Web 開發(fā)的理想選擇——盡管它還有更多功能。

新建一個模塊

選擇我們需要的組建

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>

創(chuàng)建模板頁面

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="'網(wǎng)址:'+${url}"></p>
</body>
</html>

創(chuàng)建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){
        //數(shù)據(jù)也可以從數(shù)據(jù)庫查詢出來返回
        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是一款模板引擎，即一種基于模板和要改變的數(shù)據(jù)，并用來生成輸出文本(HTML網(wǎng)頁，電子郵件，配置文件，源代碼等)的通用工具。

引入依賴

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

創(chuàng)建模板

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>網(wǎng)址:${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){
        //數(shù)據(jù)也可以從數(shù)據(jù)庫查詢出來返回
        m.addAttribute("name", "入門小站");
        m.addAttribute("url", "https://rumenz.com");
        //返回是一個頁碼:src/main/resources/templates/freemarker.html
        return "freemarker";
    }
}