iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > Python >SpringBoot中web模版数据渲染展示的案例详解
  • 523
分享到

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

2024-04-02 19:04:59 523人浏览 独家记忆

Python 官方文档:入门教程 => 点击学习

摘要

在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 。在这里我们演示一下从后台返回数据渲 染到前端页面的项目案例. 模板引擎 SpringBoot是通过模版引擎进行页面结果渲

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

模板引擎

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

  • Thymeleaf
  • FreeMarker
  • Velocity
  • Groovy
  • Mustache

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

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;

@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;

@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模版渲染内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: SpringBoot中web模版数据渲染展示的案例详解

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

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

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

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

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作