1：目录结构：

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

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

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；得到相应页面

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


特别注意前端界面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}" />


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


总体来说，JAVA通过Thymeleaf实现了前后端分离，并在模板层有较好的交互