欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Spingboot整合thymeleaf

程序员文章站 2022-07-10 18:22:03
​## 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

相关标签: 后端 java