从控制器，数据未转换为 html 视图页面答案

【问题标题】：From controller, data is not transforming to html view page从控制器，数据未转换为 html 视图页面
【发布时间】：2020-05-24 04:44:13
【问题描述】：

我正在尝试通过控制器将数据发送到 html 页面，但无法数据传输失败。控件与标签一起重定向到所需页面，但表单数据未反映在视图页面中。

   ***HomeController***

 package com.example.demo.web;      

    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.mvc.support.RedirectAttributes;

    import com.example.demo.domain.User;

    @Controller
    public class HomeController {

        User user = new User();

        @RequestMapping("/")
        public String home(Model model) {
            model.addAttribute("formData", user);

            return "index";
        }

        @RequestMapping(value="/create", method=RequestMethod.POST)
        public String processFormData(User user, RedirectAttributes attr) {

            attr.addFlashAttribute("user",user);
            return "redirect:display";
        }

        @RequestMapping(value="/display", method=RequestMethod.GET)
        public String displayFormData(User user) {
            return "result";
        }

    }

index.html

 <!DOCTYPE html>

    <html xmlns:th="http://thymeleaf.org">

    <head>

    <meta charset="UTF-8">

    <title> Home Page </title>

    </head>
    <body>
    <p> Enter Data Below </p>
    <form action="/create" method="post" th:object="${formData}">

    <p>Full Name:<input type="text" th:feild="${formData.fullName}"/></p>
    <p>Age:<input type="text" th:feild="${formData.age}"/></p>
    <p>Employed?<input type="checkbox" th:feild="${formData.employed}" th:value="true"/></p>
    <p>Gender:</p>
    <p>Male<input type="radio" th:feild="${formData.gender}" th:value="Male"/>
       Female<input type="radio" th:feild="${formData.gender}" th:value="Female"/></p>
        <p><input type="submit" value="Submit"/> <input type="reset" value="Reset"/></p>
    </form>

    </body>
    </html>

result.html

<html xmlns:th="https://thymeleaf.org">  
<table>  
<tr>  
<td><h4>User Name: </h4></td>  
<td><h4 th:text="${user.fullName}"></h4></td>  
</tr>  
<tr>  
<td><h4>Age: </h4></td>  
<td><h4 th:text="${user.age}"></h4></td>  
</tr>  
</table>  
</html>

【问题讨论】：

你能发帖吗，你遇到了什么错误或者你在哪一步卡住了？？

标签： java spring spring-boot thymeleaf

【解决方案1】：

控制器类发送和读取表单视图。用户数据作为参数传递给 processForm() 处理程序。 Spring 尝试用请求数据填充 bean。数据也可自动用于 Thymeleaf 结果视图。 @Controller 注解允许通过类路径扫描自动检测实现类。

@Controller 通常与请求处理方法中使用的@RequestMapping 注解结合使用。我使用@GetMapping 和@@PostMapping` 作为@RequestMapping(method = RequestMethod.POST) 的快捷方式

@Controller 
public class HomeController {
//This responds to localhost:8080/
@GetMapping("/")
    public String sendForm(User user){
    return "index";
}

//This responds to localhost:8080/
@PostMapping("/")
    public String processForm(User user){
    return "result";
}

用户类。这是用户类。它会自动填充来自表单请求的数据。属性必须与表单字段匹配。您应该能够在下面的模板视图中看到匹配的属性名称。

    public class User {

        private String fullName;
        private int age;
        private String occupation;

        public String getFullName() {
            return fullName;
        }

        public void setFullName(String name) {
            this.fullName = name;
        }

        public String getOccupation() {
            return occupation;
        }

        public void setOccupation(String occupation) {
            this.occupation = occupation;
        }

        public int getAge() {
            return age;
        }

        public void setAge(int age) {
            this.age = age;
        }
    }

index.html th:object 指的是用户表单 bean。这不是一个类名，而是一个 Spring bean 名；因此它是小写的。使用 *{} 语法，我们引用定义的对象。在这种情况下，它是 user 对象。我注意到你拼错了th:field，这也会产生错误。

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title></title>
</head>
<body>
<p> Enter Data Below </p>
<form th:action="@{/}" th:object="${user}" method="post">

    <p>Full Name:<input type="text" th:field="*{fullName}" id="fullName" name="fullname" autofocus="autofocus"></p>
    <p>Age:<input type="number" th:field="*{age}" id="age" name="age" autofocus="autofocus" /></p>

    <p><input type="submit" value="Submit"/> <input type="reset" value="Reset"/></p>
</form>
</body>
</html>

结果.html 我们使用 ${} 语法来识别表单属性。

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title></title>
</head>
<body>
<table>
    <tr>
        <td><h4>User Name: </h4></td>
        <td><h4 th:text="${user.fullName}"></h4></td>
    </tr>
    <tr>
        <td><h4>Age: </h4></td>
        <td><h4 th:text="${user.age}"></h4></td>
    </tr>
</table>
</body>
</html>

【讨论】：

谢谢艾比豪。现在我清楚地理解了流程的概念。再次感谢
@Narendra 如果您的问题得到解决，请将此答案标记为正确。谢谢