thymeleaf初步学习总结

最新推荐文章于 2024-06-26 11:56:50 发布

小王没脑袋

最新推荐文章于 2024-06-26 11:56:50 发布

阅读量296

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/wzy0507/article/details/130909444

版权

学习总结
项目写的不好又重新写咯必须拿thymeleaf进行渲染提交数据等等就去浅学了一下thymeleaf 刚开始完全不知道咋用 thymeleaf是在html里面进行渲染的所以当时也不知道咋调用接口后来慢慢的也就会了
thymeleaf的介绍
Thymeleaf 是一个服务器端 Java 模板引擎，能够处理 HTML、XML、CSS、JAVASCRIPT 等模板文件。Thymeleaf 模板可以直接当作静态原型来使用。
通过<html xmlns:th="http://www.thymeleaf.org">引入 Thymeleaf 命名空间。
得到对象的值
thymeleaf的基本语法
th：text：渲染数据的值

<p th:text="${message}"></p>

th:if:如果是true则会渲染反之则不会

<p th:tif="${User.isVip}"></p>

th:each 遍历循环

<ul>
<li th:each="list:${user.list}">
</li>
</ul>

th:href 用来处理超链接
可以通过拼接字符串的形式实现带参跳转刷新页面
thymeleaf表单提交数据
实例：
登录提交账号和密码

<form class="logonmain" th:action="@{users/login}" method="POST">
                <div class="inputname">
                    <svg t="1682271941130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4647" id="mx_n_1682271941131" width="200" height="200"><path 、fill="#1677ff" p-id="4648"></path></svg>
                    <input placeholder="请输入账号或邮箱" id="userNameinput" name="username" type="text">
                </div>
                <p class="logonname notice">账号或密码不能为空</p>
                <div class="inputpw">
                    <svg t="1682273396015" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2655" width="200" height="200"><path  p-id="2656"></path></svg>
                    <input placeholder="请输入密码" type="password" id="passwordKeyinput" name="password">
                </div>
                <p class="logonpassword notice">账号或密码错误</p>
                <input id="logontopbtn" type="submit" th:name="submit" value="登录">
                <div class="change">忘记密码?使用验证码登录</div>
                <a class="adminlogin" th:href="@{http://localhost:8080/Diet/adminlogin}">管理员账号登录</a>
            </form>

将按钮绑定为th:name=“submit”；
thymeleaf两层遍历渲染类里面的集合

<div th:each="noteImageLists:${note}">
                                <li class="undersmall" th:each="noteImage:${noteImageLists.noteImageList}" >
                                        <img class="smallphoto" th:src="${noteImage.imageUrl}"/>

                                </li>
                            </div>