您现在的位置是:首页 > 正文

Springboot之Thymeleaf 表单标签(表单提交)|第二章-yellowcong 热门推荐

2024-02-01 04:59:38阅读 3

通过post方式提交表单的时候,需要有一个实体类,去接收表单传递的数据类容,在对象的属性读取中,Thymeleaf 提供了两种方式:1、直接通过${userInfo.username} ,这种实体bean + 属性的方式;2、通过选择表达式*{username}的这种方式。 在表单提交的表单中,表单对象需要在界面跳转进来的时候,传递一个表单对象过来,不然就会报错,不知道这个表单对象是什么鬼。

代码地址

https://gitee.com/yellowcong/springboot-thymeleaf/tree/master/chapter2/springboot-thymeleaf1

目录结构

这里写图片描述

表单提交

1、表单界面控制器

这一段代码中,我传递了一个表单对象到了前台界面中,如果我们不这么做,就会找不到表单对象提交的那个实体类了。

/**
* 创建日期:2018年4月5日<br/>
 * 代码创建:黄聪<br/>
 * 功能描述:首页模版<br/>
 * @return
 */
@RequestMapping("/index")
public String index(ModelMap map){
    //单个数据
    map.put("username", "入门案例");

    UserForm user = new UserForm();
    user.setPassword("test_ps");
    user.setUsername("test");

    map.put("userInfo", user);
    return "admin/index";
}

2、表单界面

下面这段代码演示了,通过${}*{}的方式来读取表单类对象了。

<!DOCTYPE html>
<!-- 需要添加
<html  xmlns:th="http://www.thymeleaf.org">
这样在后面的th标签就不会报错
 -->
<html  xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title th:text="${username}">xx</title>
</head>
<body>
<h1 th:text="${username}">Hello World</h1>
<h1>获取对象信息</h1>
<h2>1、通过直接访问对象的方式</h2>
<p th:text="${userInfo.username}"></p>
<p th:text="${userInfo.password}"></p>


<h2>2、通过th:object访问对象的方式</h2>
<div th:object="${userInfo}">
    <p th:text="*{username}"></p>
    <p th:text="*{password}"></p>
</div>

<h1>表单提交</h1>
<!-- 表单提交用户信息,注意字段的设置,直接是*{} -->
 <form action="#" th:action="@{/add}" th:object="${userInfo}" method="post">  
  <input type="text" th:field="*{username}" />  
  <input type="text" th:field="*{password}" />  
  <input type="submit" />  
</form> 
</body>
</html>

3、表单处理类

这个处理请求中,只是简单的将提交的对象数据获取,然后返回到网页了。

/**
 * 创建日期:2018年4月6日<br/>
 * 代码创建:黄聪<br/>
 * 功能描述:处理add请求<br/>
 * @param user
 * @return
 */
@ResponseBody
@RequestMapping(value="/add",method=RequestMethod.POST)
public String add(@ModelAttribute UserForm user){
    String username = user.getUsername();
    String password = user.getPassword();
    return username+"__"+password;
}

实现效果

这里写图片描述

参考文章

https://blog.csdn.net/huihuilovei/article/details/64466548
https://blog.csdn.net/asd_op/article/details/53232039
https://www.cnblogs.com/jiangbei/p/8462294.html

网站文章

  • Docker swarm部署控制

    Docker swarm部署控制

    还记得我之前写过一片文章叫做《Docker快速部署项目,极速搭建分布式》,在那里讲述了如何去使用docker swarm,如何构建自己的私人镜像仓库。随着最近的业务量的增长,机子加多。对于docker...

    2024-02-01 04:59:32
  • linux下的export和source命令

    1、source命令 source ~/.../../file source命令作用:source是bash shell的内置命令,在当前shell下读取并执行“file中的命令” 通常用于重新执行刚...

    2024-02-01 04:59:05
  • 计算机导论与计算机组成原理关系,计算机组成原理

    一 、课程简介课程中文名称:《计算机组成原理与汇编语言》课程英文名称:Computer principle and assembly language课程编号:ZYB08003课程性质:专业必修课学时...

    2024-02-01 04:58:57
  • 什么是分布式事务?

    什么是分布式事务?

    目录什么是事务什么是分布式事务分布式事务使用场景什么是事务我们先来回顾下什么是事务https://blog.csdn.net/Delicious_Life/article/details/105466...

    2024-02-01 04:58:53
  • html字体大小有最小值

    今天写代码的时候发现font-size 属性中字体大小有一个最小值 12px,在谷歌浏览器中一直调又是一个小发现。

    2024-02-01 04:58:25
  • mysql 题1

    (1)查询计算机系学生的修课情况,要求列出学生的名字、所修课的课 程号和成绩。 select SNAME,cno from sc ,student where dept = &#39;计算机系&#39...

    2024-02-01 04:58:19
  • java基础(十九)非标准json字符串转json对象的处理

    需求事件: 前端要使用vue进行文件的上传,但是由于前端框架的封装原因,只能通过url编码进行上传文件中的附带参数的传递,因此有了今天的处理过程。 并且前端由于业务原因,添加了一些不属于后端vo对象的...

    2024-02-01 04:58:11
  • 惠普服务器cpu芯片,惠普、戴尔推出ARM服务器_Intel服务器CPU_服务器产业-中关村在线...

    惠普服务器cpu芯片,惠普、戴尔推出ARM服务器_Intel服务器CPU_服务器产业-中关村在线...

    惠普、戴尔推ARM服务器对英特尔是致命打击?10月31日,惠普和戴尔这两个英特尔无论在消费领域还是服务器领域的长期盟友也选择了“背叛”。在2013ARMTechCon会议上公布了推出ARM服务器的计划...

    2024-02-01 04:58:04
  • localStorage使用总结,页面跳转,保存值

    例子 &lt;ul id=&quot;edit&quot; contenteditable=&quot;true&quot;&gt; &lt;li&gt;修改我吧,然后刷新页面看看,^_^&lt;/l...

    2024-02-01 04:57:34
  • day3 -- select语句学习

    day3 -- select语句学习

    AND / OR操作符可以任意次数的组合但是 AND的计算次序优先级更高 <== 结合序问题 <== 使用圆括号括起来解决。SQL语句是由简单的英语单词构成的。这些单词称为关键字,每个SQL语句...

    2024-02-01 04:57:27