SpringBoot中跳转html页面并渲染model中的内容

最新推荐文章于 2022-07-10 09:44:24 发布
最新推荐文章于 2022-07-10 09:44:24 发布
阅读量2.9k 收藏 12
点赞数 3
分类专栏： Java SpringBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amourtani/article/details/103914252
版权

SpringBoot中跳转html页面并渲染model中的内容，简单易懂

0.环境及前提

1. 开发环境

  • idea，jdk1.8（不限制版本），SpringBoot

2. 前提

  • 请求参数没有问题；
  • 业务逻辑没有问题；
  • 可以正常获得数据；
  • 有需要跳转的页面。

1.包结构

包结构
前提页面的位置：resources/static/index.html
需要跳转的页面：resources/templates/test.html

2.各页面代码

1.static/index.html页面代码
这里只用于跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>页面一：static/index.html</h1>
    <h1><a href="/test">点击跳转到页面二</a></h1>
</body>
</html>

2.templates/test.html页面代码
这里用于接收后台传来的Model内容的渲染
重点：
使用th:value="${name}"属性将Model的内容渲染为input的value
报错请Alt+回车引入依赖

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎来到页面二：templates/test.html</h1>
<h1>姓名：<input type="text" th:value="${name}"></h1>
<h1>性别：<input type="text" th:value="${sex}"></h1>
</body>
</html>

3.SpringBootController代码
这里是控制器，将name和sex通过model传递给前端

package com.zixiu.demo_th.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * Description: 本类用于SpringBoot中跳转html页面并渲染model中的内容；控制器
 * @author zixiu on 2020/1/9 18:55
 */
@Controller
public class SpringBootController {
    @GetMapping("/test")
    public String test(Model model){
        String name="zixiu";
        String sex="男";
        model.addAttribute("name",name);
        model.addAttribute("sex",sex);
        return "test";
    }
}

3.在pom.xml中引入依赖

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

4.运行效果

跑起来。。。
首页效果：
在这里插入图片描述
需要跳转的页面：
在这里插入图片描述
这里可以看到html已经正常解析model的内容并渲染。

5.SpringBoot(thymeleaf)中常用th标签

关键字功能介绍案例
th:id替换id<input th:id="'xxx' + ${collect.id}"/>
th:text文本替换<p th:text="${collect.description}">description</p>
th:utext支持html的文本替换<p th:utext="${htmlcontent}">content</p>
th:object替换对象<div th:object="${session.user}">
th:value属性赋值<input th:value = "${user.name}" />
th:with变量赋值运算<div th:with="isEvens = ${prodStat.count}%2 == 0"></div>
th:style设置样式<div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></div>
th:onclick点击事件<td th:onclick = "'getCollect()'"></td>
th:each属性赋值<tr th:each = "user,userStat:${users}">
th:if判断条件<a th:if = "${userId == collect.userId}">
th:unless和th:if判断相反<a th:href="@{/login} th:unless=${session.user != null}">Login</a>
th:href链接地址<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:switch多选择配合th:case使用<div th:switch="${user.role}">
th:caseth:switch的一个分支<p th:case = "'admin'">User is an administrator</p>
th:includ布局标签，替换内容到引入的文件<head th:include="layout :: htmlhead" th:with="title='xx'"></head>
th:replace布局标签，替换整个标签到引入的文件<div th:replace="fragments/header :: title"></div>
th:selectdselected选择框选中th:selected="(${xxx.id} == ${configObj.dd})"
th:src图片类地址引入<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline定义js脚本可以使用变量<script type="text/javascript" th:inline="javascript">
th:action表单提交的地址<form action="subscribe.html" th:action="@{/subscribe}">
th:remove删除某个属性<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:attr设置标签属性，多个属性可以用逗号分隔比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。

最后：如果有问题请及时评论。

这是本人花了两周时间做出的小程序，感兴趣的可以扫一下，欢迎提取意见

点此链接查看小程序介绍：一款炫酷简洁的记账小程序

在这里插入图片描述

子休。
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
springboot重定向到页面_springboot 使用model重定向到html模板，对数据进行展示
weixin_39743369的博客
12-21 2782
1：使用springboot, ,html使用thymeleaf,nekohtml模板在build.gradle中添加依赖buildscript {repositories {mavenCentral()}dependencies {classpath('org.springframework.boot:spring-boot-gradle-plugin:1.5.9.RELEASE')}}grou...
静态页面html中跳转传值的JS处理技巧
10-22
主要介绍了静态页面html中跳转传值的JS处理技巧,结合实例形式分析了HTML页面跳转通过URL传递参数的方法与javascript处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下
spring model html页面,springboot 使用model重定向到html模板，对数据进行展示
weixin_33315077的博客
06-04 714
1：使用springboot, ,html使用thymeleaf,nekohtml模板在build.gradle中添加依赖buildscript {repositories {mavenCentral()}dependencies {classpath('org.springframework.boot:spring-boot-gradle-plugin:1.5.9.RELEASE')}}grou...
SpringBoot跳转渲染HTML页面（详解）（五）
热门推荐
DJun的博客
11-03 1万+
本文的实例代码也会放在文末免费分享给大家的。正文开始： 目录 一、直接访问 1、新建一个SpringBoot的项目 2、实现页面跳转 （1） 新建 HTML 文件 （2） 新建Controller包 （3） 添加 thymeleaf 的依赖 3、实现跳转 二、 间接访问 1、 变更位置 2、 强制访问 三、关于静态资源访问 1、 规则 2、 示例 四、 页面渲染 1...
SpringBoot -＞ Thymaleaf自动渲染html(手动改变配置覆盖原来的配置,图片文字)
rod0320的博客
10-24 444
1.配置Thymaleaf <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 2.添加html到templetes文件夹,方法指定 @Reques
SpringBoot（二）编写HTML页面
lizc_lizc的博客
06-01 8289
学习内容 使用Thymeleaf编写一个HTML页面 访问静态资源 如何传递参数给HTML页面 模拟登录验证过程 构建项目 上一节已经说过如何构建一个SpringBoot项目，SpringBoot（一）Hello World。由于本文采用了Thymeleaf模板引擎，因此需要添加Thymeleaf依赖，pom.xml如下所示 <dependencies> ...
springboot无法跳转页面的问题解决方案
08-25
在本文中，我们将讨论 SpringBoot 中无法跳转页面的问题解决方案。本解决方案通过示例代码详细介绍了跳转页面的问题解决方法，对大家的学习或者工作具有参考价值。 知识点1：跳转页面的问题 在 SpringBoot 中，...
SpringBoot页面跳转访问css、js等静态资源引用无效解决.docx
06-03
【SpringBoot页面跳转访问css、js等静态资源引用无效解决】 解释：SpringBoot项目默认访问根目录有三个分别是： /resources ：系统默认的根路径 /static ：所有静态资源文件如js、css、jpg、html等文件是可以直接...
php自动跳转中英文页面
10-30
当来访者浏览器语言是中文就进入中文版面国外的用户默认浏览器不是中文的就跳转英文页面
springboot+thymeleaf中实现查询功能之后跳转到的页面未被渲染
hehehehao1的博客
11-08 1375
问题1 今天在用springboot做实训项目的时候发现了一个问题，在我的添加功能写好之后点击这个调出添加页面的按钮就直接插入空的数据并且返回添加页面了，找了半天才发现原来是在controller里把返回页面和插入数据写在一个方法里了，而前端的href发送请求映射了那个方法，导致添加页面的确定按钮失效。 解决方法 把方法拆分成两个分别处理不同的请求，一个处理返回添加页面的请求，一个执行插入数据 的...
springboot中使用thymeleaf模板访问html等静态页面,并利用ModelAndView传递数据过去,Java模板引擎之Freemarker
奔跑的菜鸡
03-05 7410
引言 在传统的web开发中通常使用jsp页面，首先需要在pom文件中引入springmvc相关的包，然后写springmvc的配置文件（包括访问资源的路径解析），之后还需再web.xml中配置访问路由。这无疑太麻烦了，每次开发前都需要编写大量的配置文件。 springboot为此提供了高效便捷的解决方案，只需再pom.xml中添加web开发的依赖，便可进行web开发，省去了繁琐的配置步骤。 下面为...
springbhtml获取model值
Welcome to my 小博客
12-31 2055
此方法通过thymeleaf模板引擎获取 1.引入thymeleaf依赖 org.springframework.boot spring-boot-starter-thymeleaf 2.如图，html头部定义 3.js中获取的话把input type设置为hidden，通过js，jq等都可以。（jq最好下载到本地引用，网上连接可能引入不进来） ...
SpringBoot项目后台跳转html页面
InterceptWall的博客
01-05 2104
后台跳转有两种形式：1.无模板引擎；2.有模板引擎。 这篇我们先说不加入模板引擎，进入主题。 修改SpringBoot配置文件 spring: mvc: view: prefix:/ suffix:.html resources: static-locations: - classpath:/templates/ mvc配置...
SpringBoot后台直接跳转到html页面
threelifeadv的博客
09-21 1万+
SpringBoot内嵌了Tomcat服务器，可以通过java -jar的方式直接启动jar包程序，也可以通过tomcat服务器启动war包，那么jar包中如果想要让SpringBoot程序直接容后台return到某个HTML页面中，该怎么操作呢？ SpringBoot提供了对模板的支持，我们可以通过模板将程序从后台直接跳转到一个具体的页面中，本案例通过maven项目来创建jar包项目，方法如下...
第四节:SpringBoot中web模版数据渲染展示
Linux,Java,SpringBoot,Python,Lua略知一点
01-24 537
在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 。在这里我们演示一下从后台返回数据渲染到前端页面的项目案例. 模板引擎 SpringBoot是通过模版引擎进行页面结果渲染的，官方提供预设配置的模版引擎主要有 Thymeleaf FreeMarker Velocity Groovy Mustache 我们在这里演示使用Thymeleaf和FreeMarker模板引擎。 Thymeleaf Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。 Th.
spring mvc modelandview html,ModelAndView和Model有什么区别|springmvc教程
weixin_42554042的博客
06-15 283
在springmvc中的ModelAndView和Model有什么区别呢？其实它们只是表现形式不太一样，两者基本上是可以相互替代的，下面用两个小案例来解释springmvc中的ModelAndView和Model之间的区别。比如我们跳转到一个web界面，并且需要传递参数，该怎么做呢？先用Model来实现传值，代码如下：@GetMapping("/question")publicStringin...
spring boot使用ModelAndView实现页面跳转
xiao_yan_的博客
02-01 3744
ModelAndView private ModelAndView getGoods(){ ModelAndView modelAndView = new ModelAndView("路径"); //上面的路径只需要填写html名字，不需要填写index.html，只需要填写index return modelAndView; }
springboot 开发 本地前后端传值到动态HTML界面！！！
ZhengJCheng的博客
07-23 8789
今天想写个简单的ssm框架下的前后端交互的项目 用idea的springboot框架进行开发！ 不出意料的遇到了许多坑，那么现在就来一一填一下吧。 创建过程前几篇博客说了，就不重复了。 目录 第一个坑：如何让后端控制器跳转到前端HTML页面 第二个坑：HTMl中获取后端传过来的值！！ 第一个坑：如何让后端控制器跳转到前端HTML页面 从控制器跳转的方法很多种， ...
SpringMVC数据页响应ModelAndView之页面跳转
weixin_60719453的博客
07-10 3666
目录SpringMVC的数据响应SpringMVC的数据响应方式①页面跳转②回写数据2、返回ModelAndView对象方式1：直接new对象 方式2:写在方法里让SpringMVC创建方式3：model和view分开做方式4：通过HttpServletRequest页面跳转1、返回字符串形式直接返回字符串：此种方式会将返回的字符串与视图解析器的前后缀拼接后跳转。 返回带有前缀的字符串： 2、返回ModelAndView对象 方式1：直接new对象 方式3：model和vi
springboot如何跳转页面并把参数展示
最新发布
06-10
在 Spring Boot 中，可以使用 Thymeleaf 模板引擎来实现页面跳转和参数传递。下面是实现方法： 1. 在 pom.xml 文件中添加 Thymeleaf 依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 2. 在 application.properties 文件中配置 Thymeleaf 模板引擎： ```properties # Thymeleaf spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html ``` 3. 创建控制器类（如：ProductController），用于处理请求和返回页面。在该控制器中，可以使用 @GetMapping 或 @PostMapping 注解来映射请求，同时使用 @RequestParam 或 @PathVariable 注解来获取请求参数。 ```java @Controller public class ProductController { @Autowired private ProductService productService; @GetMapping("/products") public String list(Model model) { List<Product> productList = productService.getAllProducts(); model.addAttribute("productList", productList); return "productList"; } @GetMapping("/products/{id}") public String detail(@PathVariable("id") Long id, Model model) { Product product = productService.getProductById(id); model.addAttribute("product", product); return "productDetail"; } @PostMapping("/products") public String add(Product product) { productService.addProduct(product); return "redirect:/products"; } // 其他方法省略... } ``` 4. 在 templates 目录下创建 HTML 模板文件，并使用 Thymeleaf 模板语言展示数据和跳转页面。可以使用 th:text 和 th:each 等属性来展示数据，使用 th:href 属性来设置页面跳转链接。 productList.html: ```html <!DOCTYPE html> <html> <head> <title>Product List</title> </head> <body> <h1>Product List</h1> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr th:each="product : ${productList}"> <td th:text="${product.id}"></td> <td th:text="${product.name}"></td> <td th:text="${product.price}"></td> </tr> </tbody> </table> <a th:href="@{/products/add}">Add Product</a> </body> </html> ``` productDetail.html: ```html <!DOCTYPE html> <html> <head> <title>Product Detail</title> </head> <body> <h1>Product Detail</h1> <h2 th:text="${product.name}"></h2> <p th:text="${product.description}"></p> <p th:text="'Price: ' + ${product.price}"></p> <a th:href="@{/products}">Back</a> </body> </html> ``` 5. 在控制器中调用模板文件，并将数据传递给模板渲染引擎： ```java @GetMapping("/products") public String list(Model model) { List<Product> productList = productService.getAllProducts(); model.addAttribute("productList", productList); return "productList"; } ``` 其中，"productList" 是模板文件名，productList 是控制器方法中的数据模型。 6. 最后，在浏览器中访问页面，即可看到展示出来的数据和页面跳转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

子休。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值