Spring Boot入门(十二) 之 前端静态资源的引入 (webjars 以及 thymeleaf 视图解析器)

简介: Spring Boot入门(十二) 之 前端静态资源的引入 (webjars 以及 thymeleaf 视图解析器)

首先webjars其实就是以jar包的形式来引入静态资源,官网在此传送门

我们可以看到这里边的静态资源,点击这个maven就会出现maven的坐标


这样就可以直接在pom文件里边导入静态资源

当然我们自己写好的前端静态页面是要放入classpath:/templats/这个目录下的,没有templates可以手动建一个.

首先我们导入坐标

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

然后我们新建静态模板HTML页面,

比如我们在里边写一个success.html做测试,这样thymeleaf会自动解析帮忙寻找success.html去跳转


controller层这么写,注意这次是没有@ResponseBody这个注解的,主要是这样才可以跳转页面,否则是会把success直接打印到屏幕上的.

然后我们启动服务器

可以看到成功跳转

之前我们在写javaweb的时候使用的jsp,jsp支持很多嵌入的代码,比如c:for each c:if 这些可以很简单的在前端进行遍历的标签,在springboot弃用了jsp而改用thymeleaf

然后在前端页面加入头,它的作用是可以给你thymeleaf的语法提示

xmlns:th="http://www.thymeleaf.org"

controller层呢,我们给他传入参数就用一个map来存入

前端页面这里使用th:text="{ }"它的作用是给这个代码所在的标签里边填入数据,比如这个例子就是把后台的map里边的hello拿出来放入div中,后台的hello的值就是你好,就是这么传递过来的

这样就会发现又可以像jsp一样愉快的传递数据了,thymeleaf的标签远不止这一个,他有很多的标签可供使用,我们可以参考thymeleaf官网 传送门

点击doc可以查看文档

可在线读也可保存到本地

里边有各种解释,当然还是要考验英文水平的哈


相关文章
|
22天前
|
前端开发 UED 开发者
颠覆你的前端知识:防抖与节流的区别及实战解析!
【8月更文挑战第23天】在Web前端开发中,处理用户界面交互产生的事件可能会影响性能。为此,我们有两种优化方法:防抖(debounce)和节流(throttle)。防抖确保函数仅在事件停止触发一段时间后执行一次,适用于如搜索自动补全场景。而节流则确保函数按固定时间间隔执行,不管用户操作频率如何。本篇技术博客将深入解析两者差异并提供示例代码,帮助开发者更好地理解和应用这些技巧以提升应用性能和用户体验。
53 0
|
16天前
|
XML 存储 网络安全
ROS入门(二):launch文件解析
该文章是关于ROS入门的第二篇教程,详细解析了ROS中的launch文件,包括其运行方式、XML格式规范、标签使用、参数替代、条件属性以及通过简单和复杂案例来演示launch文件的使用,最后介绍了如何在参数服务器上设置参数。
ROS入门(二):launch文件解析
|
15天前
|
前端开发 数据可视化 Java
SpringBoot的4中常见入参形式错误解析
在使用SpringBoot进行前后端接口对接时,常遇到如500、400等请求错误,本文总结了四个常见的复杂请求类型及其解决方案,包括实体嵌套List提交、普通文件上传、List提交及数组Array提交,详细展示了正确的前端与后端代码实现,帮助开发者避免常见错误,提高开发效率。
24 0
SpringBoot的4中常见入参形式错误解析
|
22天前
|
存储 前端开发 JavaScript
深入Web前端:栈与堆的优缺点全解析,让你大开眼界!
【8月更文挑战第23天】本文以问答形式解析了Web前端开发中至关重要的内存管理概念——栈与堆。栈采用后进先出(LIFO)原则存储执行上下文,适用于函数调用管理;而堆则灵活存储如对象和数组等复杂数据类型。栈操作迅速但访问受限,堆则提供动态空间分配但可能牺牲内存效率。理解两者特性有助于提升JavaScript编程技巧。
29 1
|
23天前
|
Java Shell Linux
【Linux入门技巧】新员工必看:用Shell脚本轻松解析应用服务日志
关于如何使用Shell脚本来解析Linux系统中的应用服务日志,提供了脚本实现的详细步骤和技巧,以及一些Shell编程的技能扩展。
22 0
【Linux入门技巧】新员工必看:用Shell脚本轻松解析应用服务日志
|
25天前
|
JavaScript 算法 前端开发
"揭秘Vue.js的高效渲染秘诀:深度解析Diff算法如何让前端开发快人一步"
【8月更文挑战第20天】Vue.js是一款备受欢迎的前端框架,以其声明式的响应式数据绑定和组件化开发著称。在Vue中,Diff算法是核心之一,它高效计算虚拟DOM更新时所需的最小实际DOM变更,确保界面快速准确更新。算法通过比较新旧虚拟DOM树的同层级节点,递归检查子节点,并利用`key`属性优化列表更新。虽然存在局限性,如难以处理跨层级节点移动,但Diff算法仍是Vue高效更新机制的关键,帮助开发者构建高性能Web应用。
37 1
|
14天前
|
数据库 Windows
超详细步骤解析:从零开始,手把手教你使用 Visual Studio 打造你的第一个 Windows Forms 应用程序,菜鸟也能轻松上手的编程入门指南来了!
【8月更文挑战第31天】创建你的第一个Windows Forms (WinForms) 应用程序是一个激动人心的过程,尤其适合编程新手。本指南将带你逐步完成一个简单WinForms 应用的开发。首先,在Visual Studio 中创建一个“Windows Forms App (.NET)”项目,命名为“我的第一个WinForms 应用”。接着,在空白窗体中添加一个按钮和一个标签控件,并设置按钮文本为“点击我”。然后,为按钮添加点击事件处理程序`button1_Click`,实现点击按钮后更新标签文本为“你好,你刚刚点击了按钮!”。
37 0
|
14天前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
29 0
|
14天前
|
SQL 存储 BI
什么是视图?详细解析与应用指南
【8月更文挑战第31天】
62 0
|
14天前
|
前端开发 UED 开发者
React组件优化全攻略:深度解析让你的前端应用飞速运行的秘诀——从PureComponent到React.memo的彻底性能比较
【8月更文挑战第31天】在构建现代Web应用时,性能是提升用户体验的关键因素。React作为主流前端库,其组件优化尤为重要。本文深入探讨了React组件优化策略,包括使用`PureComponent`、`React.memo`及避免不必要的渲染等方法,帮助开发者显著提升应用性能。通过实践案例对比优化前后效果,不仅提高了页面渲染速度,还增强了用户体验。优化React组件是每个开发者必须关注的重点。
27 0

推荐镜像

更多