srping boot 前端thymeleaf测试，发现参数传递更简洁。

最新推荐文章于 2020-09-17 10:25:35 发布

原创最新推荐文章于 2020-09-17 10:25:35 发布 · 2.6w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

spring boot

本文介绍如何使用Thymeleaf实现Java项目的前后端分离，重点讲解了GET请求及表单提交处理流程，展示了具体的代码示例和前端界面元素绑定方法。

1：目录结构：

要注意，template目录和static目录要放在resource目录下，

2：后端代码

2.1：get方法处理的是第一次URL地址请求：

//调用ThymeLeaf模板文件，调用bootstrap  get方法
@RequestMapping(value="/payin", method=RequestMethod.GET)
public String sayHelloForm(Model model) {
    model.addAttribute("paymentInfo", new PaymentInfo());
    return "payin";
}

//表单提交，进行处理，并返回结果页面
@RequestMapping(value="/dopayin", method=RequestMethod.POST)
public String sayHello(@ModelAttribute PaymentInfo paymentInfo, Model model) throws Exception {
    String re=ccBpayin.payin(paymentInfo);
    model.addAttribute("paymentInfo", paymentInfo);
    model.addAttribute("re",re);
    return "payinresult";
}

GET请求，比如录入路径：http://localhost:8068/payin.html；得到相应页面

特别注意前端界面payin.html下的元素绑定：

<form action="#" th:action="@{/dopayin}" th:object="${paymentInfo}" method="post">
    <div class="form-group">
        <label for="operator">操作人</label>
        <input type="text" class="form-control" id="operator" placeholder="操作人" th:value="yangmin" th:field="*{operator}" />

        <label for="payAccountNo">付款账号</label>
        <input type="text" class="form-control" id="payAccountNo" placeholder="付款账号" th:field="*{payAccountNo}" />

支付按钮点击，提交表单后：

后端处理的是dopayin方法

dopain方法调用的payresult模板：

<body>
   <h1>Pay Resualt:</h1>
    <p th:text="'result is:' + ${re}" />
    <p th:text="'operator:' + ${paymentInfo.operator}" />
    <p th:text="'payAccountNo:' +${paymentInfo.payAccountNo}" />