Spingboot整合thymeleaf
程序员文章站
2022-04-15 17:49:45
## Spingboot推荐thymeleaf方式创建web项目pom依赖 org.springframework.boot spring-boot-starter-thymeleaf
## Spingboot推荐thymeleaf方式创建web项目
- pom依赖
<!--Springboot - thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
- 创建文件夹
resources->新建文件夹
->templates
templates
- 创建静态页面
里面直接新建html文件就好了,只是默认文件不能传入我们的值，我们需要添加才能使用数据，才能渲染出最后的页面
默认的文件是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
我们改一改
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello
<div th:text="${username}">用户名</div>
</body>
</html>
里面的这个是必须的，不然无法使用thymeleaf模板引擎
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
这个就是thymeleaf的语法，具体的使用可以查看官网的用法
官网文档页面
官网2.x的文档
中文文档
<div th:text="${username}">用户名</div>
- 创建controller，接受请求
比如根目录下，设置默认的打开页面，/，参数的传递就使用ModelMap
@RequestMapping("/")
public String index(ModelMap map){
map.addAttribute("username","张三,hello");
System.out.println("hello");
return "index";
}
返回类型String，注意这里方法上面就不能有@ResponseBody的注解,不然就访问不到页面返回的是字符串了。
- 页面静态资源保存的位置
默认在resources下面新建static文件夹存放静态文件就可以直接访问
但是文件名是中文的不行
- 完成，开启工程，直接访问就能看到效果了
测试页面
出现的问题：
- 提示Check your ViewResolver setup!
可能是pom文件没有引入，或者没有刷新pom文件，必须手动的刷新pom文件，不然启动了程序就会报错。
基本使用：
后台使用
Model model
model.addAttribute("pwNotes",pwNotes);
- 遍历
页面上不需要使用get和set方法，实际上就是自动调用的get和set方法
<table>
<tbody>
<th><td>id</td><td>用途</td><td>用户名</td><td>提示</td><td>其他</td><td>修改</td><td>删除</td></th>
<tr th:each="pwNote : ${pwNotes}">
<td th:text="${pwNote.id}">id</td>
<td th:text="${pwNote.purpose}">用途</td>
<td th:text="${pwNote.username}">用户名</td>
<td th:text="${pwNote.tip}">提示</td>
<td th:text="${pwNote.other}">其他</td>
<td><a th:href="@{/pwnote/create/{id}(id=${pwNote.id})}">修改</a></td>
<td><a th:href="@{/deleteById/{id}(id=${pwNote.id})}">删除</a></td>
</tr>
</tbody>
</table>
核心功能为
<tr th:each="pwNote : ${pwNotes}">
<td th:text="${pwNote.id}">id</td>
<td>
<a th:href="@{/deleteById/{id}(id=${pwNote.id})}">删除</a>
</td>
</tr>
其他的遍历的类似，这里是遍历的List集合
本文地址：https://blog.csdn.net/weixin_41979605/article/details/109562614