转载

跟我学spring boot thymeleaf系列文章第三章 thymeleaf表单进阶

源码地址:

https://github.com/pony-maggie/spring-boot-thymeleaf-learn

本章介绍下thymeleaf表单一些比较复杂的操作。

编码

我们先实现一个测试controller，

@RestController
public class UserController {
    private List<User> userList = new ArrayList<>();

    {
        userList.add(new User("1", "socks", "123456", new Date()));
        userList.add(new User("2", "admin", "111111", new Date()));
        userList.add(new User("3", "jacks", "222222", null));
    }

    @GetMapping("/")
    public ModelAndView index() {
        return new ModelAndView("user/user", "userList", userList);
    }

    @GetMapping("/user/{userId}")
    public ModelAndView userForm(@PathVariable String userId) {
        return new ModelAndView("user/userForm", "user", userList.get(0));
    }

}

当用户在浏览器输入”/”时，我们通过user.html页面展示所有用户的信息，当输入类似”/usre/id时，我们通过userForm.html展示某个id用户信息，展示效果我们用表单来做。

前端页面，我们先定义一个公共的头部页面， head.html，然后定义两个前面说到user.html和userForm.html文件。先把代码贴出来再说知识点。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--声明static为页面片段名称-->
<head th:fragment="static">
    <link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <link th:href="@{/webjars/bootstrap/js/bootstrap.min.js}" rel="stylesheet" type="text/css"/>
</head>
</html>

user.html

<head>
    <meta charset="UTF-8"/>
    <title th:text="用户列表">User</title>
    <!--默认拼接前缀路径,开头请勿再添加斜杠,防止部署运行报错！-->
    <script th:replace="common/head::static"></script>
</head>
<body>
<h3>用户列表</h3>
<div th:each="user,userStat:${userList}" th:class="${userStat.even}?'even':'odd'">
    序号：<input type="text" th:value="${userStat.count}"/>
    账号：<input type="text" th:value="${user.username}"/>
    密码：<input type="password" th:value="${user.password}"/>
    时间：<input type="text" th:value="${user.createTime}"/>
    时间：<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>
</div>

<script th:inline="javascript">
    //通过内联表达式获取用户信息
    var userList = [[${userList}]];
    console.log(userList)
</script>
</body>
</html>

userForm.html

<head>
    <meta charset="UTF-8"/>
    <title th:text="用户信息">User</title>
    <script th:replace="common/head::static"></script>
</head>
<body>
<h3>用户表单</h3>
<form class="form-horizontal" th:object="${user}">
    <input type="hidden" id="id" name="id" th:value="*{id}">
    <div class="form-group">
        <label class="col-md-2 control-label">账号:</label>
        <div class="col-md-4">
            <input class="form-control" id="username" name="username" th:value="*{username}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">密码:</label>
        <div class="col-md-4">
            <input class="form-control" id="password" name="password" th:value="*{password}" type="password"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">时间:</label>
        <div class="col-md-4">
            <input class="form-control" id="createTime" name="createTime" th:value="*{#dates.format(createTime,'yyyy-MM-dd HH:mm:ss')}" />
        </div>
    </div>
</form>

</body>

head.html中用到了fragment这个关键字。通过th:fragment定制片段，然后通过th:replace 填写片段路径和片段名。说白了就是一个文件引用另外一个文件的语法，但是它的强大在于颗粒度比较细，可以细到标签级别。

我们在head.html中通过链接表达式(@{})，引入一些本地的静态资源。webjars这个资源是通过pom引入的，

<dependency><!--Webjars省略版本号-->
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.1.3</version>
        </dependency>

th:each可以用来遍历后端传过来的list集合。在集合的迭代过程还可以获取状态变量，只需在变量后面指定状态变量名即可，状态变量可用于获取集合的下标/序号、总数、是否为单数/偶数行、是否为第一个/最后一个。

th:inline是内联表达式，可以是文本内联，比如：

<p th:inline="text">Hello, [[${session.user.name}]]!</p>

[[…]]之间的表达式在Thymeleaf被认为是内联表达式，输出的时候会被替换成真正的值。如果不使用th:inline=”text”,则会被当做字符串显示。

也可以是上面示例那样的脚本内联，比如：

<script th:inline="javascript">
    //通过内联表达式获取用户信息
    var userList = [[${userList}]];
    console.log(userList)
</script>

这里的脚本很简单，就是获取用户列表打印出来。

测试

启动springboot，浏览器输入

http://localhost:9091/

会看到所有用户的列表信息。

输入，

http://localhost:9091/user/1

查看某个用户的信息。

参考:

https://www.jianshu.com/p/908b48b10702

跟我学spring boot thymeleaf系列文章第三章 thymeleaf表单进阶放个图片占位置

（转载本站文章请注明作者和出处思无邪-machengyu）

原文 http://www.machengyu.net/thymeleaf/2019/08/05/thymeleaf-learn-chapter3.html

正文到此结束

所属分类：编程技术 Java

本文标签： HTML core 图片 2019 pom jquery App src ORM 部署源码 map 时间 REST JavaScript ArrayList 测试 cat list 文章 session 定制代码 value 1111 springboot web js GitHub XML ACE Spring Boot java https CSS HTML文件 Word id spring git Bootstrap 遍历 http IO ip UI
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

跟我学spring boot thymeleaf系列文章第三章 thymeleaf表单进阶

编码

测试

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流