thymeleaf中前后端数据交互小结

最新推荐文章于 2022-11-18 16:11:32 发布

编程方法论

最新推荐文章于 2022-11-18 16:11:32 发布

阅读量2.6k

点赞数 2

分类专栏： java

本文链接：https://blog.csdn.net/justisme/article/details/105478041

版权

java 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1. 引入静态资源：th:href或th:scr+@{/从static目录开始}

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/iamges/favicon.ico}" type="image/x-icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <meta charset="UTF-8">
    <title>书籍管理</title>
</head>

2.前端将数据绑定到后端对象：*{对象属性}，前端引用后端数据${对象属性}

<div class="form-group">
    <label for="book_name" class="col-sm-2 control-label">书名:</label>
    <div class="col-xs-4">
        <input type="text" class="form-control" id="book_name" 
               name="name" th:value="${book.name}" th:field="*{book.name}"/>
    </div>
</div>

3.后端将数据传入前端 ModelMap(由框架提供),前端使用${对象属性}

@RequestMapping(value = "/create",method = RequestMethod.GET)
public String createBookForm(ModelMap map){
    map.addAttribute("book",book);
    map.addAttribute("action","create");
    return BOOK_FORM;
}

4.表单提交的注意点。

action：表单中的内容提交给哪个页面进行处理,可能的取值：URL
input元素:输入框，由type决定类型。
触发提交的动作：
- HTML DOM submit() 方法。
- type=submit
- button

编程方法论

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf中前后端数据交互小结

1. 引入静态资源：th:href或th:scr+@{/从static目录开始}。2.前端将数据绑定到后端对象：*{对象属性}，前端引用后端数据${对象属性}3.后端将数据传入前端 ModelMap(由框架提供),前端使用${对象属性}。4.表单提交的注意点。
复制链接

扫一扫

专栏目录