在pom文件加入jquery依赖后如何应用到thymeleaf模板
时间: 2024-05-15 14:14:48 浏览: 12
可以在模板中使用以下语法引入jquery:
```
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
```
其中,`@{/webjars/jquery/jquery.min.js}`是thymeleaf的URL语法,用于指定jquery.min.js所在的路径。这里使用webjars来管理jquery的依赖。需要在pom文件中添加以下依赖:
```
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.0</version>
</dependency>
```
添加依赖后,maven会自动下载jquery相关的jar包并加入到项目中。
相关问题
thymeleaf ajax 渲染,Springboot集成html页面,thymeleaf模板渲染,AJAX调用后端接口
Thymeleaf是一个流行的服务器端模板引擎,它可以将数据和模板相结合,生成HTML页面。而AJAX则是一种在不重新加载整个页面的情况下与服务器进行交互的技术。
在Spring Boot中集成Thymeleaf非常容易。首先,需要在pom.xml文件中添加Thymeleaf依赖项:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
```
接下来,可以创建一个Controller类来处理请求并返回HTML页面。例如:
```java
@Controller
public class MyController {
@GetMapping("/")
public String home(Model model) {
model.addAttribute("message", "Hello Thymeleaf!");
return "index";
}
}
```
这个Controller类处理根路径的GET请求,并将一个名为“message”的属性添加到模型中。然后,它返回名为“index”的模板。
在这个例子中,“index”模板可以使用Thymeleaf标记来渲染页面。例如:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Page</title>
</head>
<body>
<h1 th:text="${message}">Hello World!</h1>
</body>
</html>
```
这个模板使用Thymeleaf语法来渲染一个标题,标题的文本来自于“message”模型属性。
现在,假设需要使用AJAX来从后端调用接口并渲染页面。可以使用jQuery库来简化这个过程。例如:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Page</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "/api/data",
success: function(data) {
$("h1").text(data.message);
}
});
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
```
这个模板包含了一个名为“api/data”的接口调用,当页面加载时会自动调用该接口。当接口调用成功后,页面上的标题将被替换为返回的数据。注意,这里使用了jQuery的“$.ajax”函数来执行异步请求。
最后,需要在Controller中添加一个处理接口调用的方法。例如:
```java
@RestController
public class MyRestController {
@GetMapping("/api/data")
public Map<String, String> getData() {
Map<String, String> data = new HashMap<>();
data.put("message", "Hello AJAX!");
return data;
}
}
```
这个RestController类处理“api/data”路径的GET请求,并返回一个包含名为“message”的属性的Map对象。这个属性将被用于渲染页面标题。
如果一切正常,现在可以启动应用程序并访问根路径。页面将加载并显示一个标题“Hello World!”,然后自动使用AJAX调用接口“/api/data”,并将标题替换为返回的数据“Hello AJAX!”。
thymeleaf如何配置使用
Thymeleaf的配置使用主要有以下几个步骤:
1. 在Spring Boot的配置文件(application.properties或application.yml)中添加Thymeleaf模板的配置。这些配置可以覆盖默认的配置。例如,可以设置模板文件的路径、后缀、编码、缓存等信息。比如:
```
# Thymeleaf模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
```
其中,`spring.thymeleaf.prefix`用于指定模板文件的路径,`spring.thymeleaf.suffix`用于指定模板文件的后缀,`spring.thymeleaf.encoding`用于指定模板文件的编码方式,`spring.thymeleaf.cache`用于指定是否启用缓存。
2. 在项目的pom.xml文件中添加Thymeleaf的依赖。可以使用`spring-boot-starter-thymeleaf`作为依赖,例如:
```
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
```
3. 编写Controller类,处理请求并返回相应的视图。在方法上使用`@RequestMapping`注解可以指定请求的URL路径,然后通过`ModelAndView`对象设置视图名和模型数据。例如:
```
@RequestMapping(value = "/greeting")
public ModelAndView test(ModelAndView mv) {
mv.setViewName("/greeting");
mv.addObject("title","欢迎使用Thymeleaf!");
return mv;
}
```
4. 在项目的资源目录下创建Thymeleaf的模板文件。在模板文件中可以使用Thymeleaf的语法进行动态内容的渲染。例如:
```
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="@{/css/1.css}" rel="stylesheet"/>
</head>
<body>
<p th:text="'Hello, ' + ${title}" /><br/>
<script th:src="@{/js/jquery/1.11.0/jquery.js}"></script>
<script>
$(function(){
alert("page load finish.");
});
</script>
</body>
</html>
```
其中,`th:text`用于动态设置内容,`th:href`用于指定CSS文件的路径,`th:src`用于指定JavaScript文件的路径。
以上就是Thymeleaf的配置和使用步骤。通过配置文件设置Thymeleaf的模板路径、后缀、编码、缓存等信息,然后在Controller中指定视图和模型数据,最后在模板文件中使用Thymeleaf的语法进行内容的渲染。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Springboot+Thymeleaf配置与使用](https://blog.csdn.net/m0_67393619/article/details/126509573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)