工作中的技术总结_ form表单的前后台交互 _20210825

工作中的技术总结_ form表单的前后台交互 _20210825

在项目经常会使用 form 表单 进行数据的 页面展示 以及数据的 提交和后台处理

1、数据是怎么从后台传递到前台的

model.addAttribute("patternFileInfoForm", patternFileInfoFormOld);
return "patternfile/addsub";
// 在这个项目中 一般是通过 model 传递到前台 前台通过路径访问 controller层方法 数据经过处理 最后将 数据对象 保存到 model的 一个命名空间里面

2、前台的获取和处理

<form class="form-horizontal" 
      th:action="@{/pattern-file/save}" 
      th:object="${patternFileInfoForm}"
      id="addForm" method="post" enctype="multipart/form-data">
    <table class="table table-condensed table-bordered table-striped" id="table">
        <tr>
            <td style="background: #000; color: #FFF"  class="p-1 white-space-nowrap sticky-cell">测定器种类*</td>
            <td style="background-color: #D0D0D0;">
                <div style="width: 40%">
                    <select class="for-select2" name="equipmentType" id="equipmentType" placeholder="测定器种类的选择" style="width: 100%">
                 <option value=""></option>
                 <option th:each="equipmentType : ${equipmentTypeList}"
                              th:value="${equipmentType}"
                              th:text="${equipmentType}"
                              th:selected="${equipmentType}== ${patternFileInfoForm.equipmentType}">
                 </option>
             </select>
         </div>
     </td>
     </tr>


		<tr>
                <td style="background: #000; color: #FFF"  class="p-1 white-space-nowrap sticky-cell">测定器*</td>                 
                <td style="background-color: #D0D0D0;">   
                  <div style="width: 40%">
                    <select class="for-select2" name="equipmentName" id="equipmentName" placeholder="测定器的选择" style="width: 100%">
                       <option value=""></option>
                    </select>
                  </div>  
                </td>
              </tr>

              <tr>
                <td style="background: #000; color: #FFF"  class="p-1 white-space-nowrap sticky-cell">模式区分*</td>
                <td style="background-color: #D0D0D0;">
                  <div style="width: 40%">
                    <select class="for-select2" name="patternFileTypeName" id="patternFileTypeName" placeholder="模式区分的选择" style="width: 100%">
                      <option value=""></option>
                    </select>
                  </div>
                </td>
              </tr>

              <tr>
                <td style="background: #000; color: #FFF"
                  class="p-1 white-space-nowrap sticky-cell">模式文件*</td>              
                <td style="background:#D0D0D0">                
		          <div id="patternFileUpload" class="uploadFile" data-type="single" data-code="MM060" style="width:300px;" th:with="files=*{fileName}, fieldName='fileName', tempFiles=*{patternFileNameValue}, tempFieldName='patternFileNameValue'">
		           	<div th:replace="common/upload :: uploadFragment"></div>
		          </div>
          		</td>               
              </tr>
              <tr>
                <td style="background: #000; color: #FFF"
                  class="p-1 white-space-nowrap sticky-cell">评论</td>
                <td style="background-color: #D0D0D0;">
                <input class="form-control" id="patternFileComment" th:field="${patternFileInfoForm.patternFileComment}"></td>
              </tr>             
            </table>
    <input type="hidden" id="successMessage" th:value="${successMessage}" />
            <input type="hidden" id="status" th:value="${status}" />  
            <input type="hidden" id="patternVersionErr" th:value="${patternVersionErr}" />
            <input type="hidden" id="checkMode" name="checkMode" />  
  </form>

这个 form 是通过 thymeleaf 来绑定对象并进行渲染 ，其中有多个隐藏域 用于对值的提交或者一些状态的获取

3、前台获取的数据如何提交到后台

$("#updateButton").click(
    function () {
        var l = Ladda.create(this);
        Common.showConfirm('confirm', '确认保存',
                           '即将保存画面中的内容。是否确认完成？', function () {
            $("#patternFileComment").removeClass("is-invalid");
            if ($("#patternFileComment").val().trim() == "" && $("#patternFileComment").val().length > 0) {
                $("#patternFileComment").addClass("is-invalid");
                Common.showConfirm('error', '出错', Common.message.COMMON044, null, null);
                return;
            }
            if (patternFileCommentOld !== null && patternFileCommentOld !== $("#patternFileComment").val()) {
                $("#historyPatternFileCommentValue").val(patternFileCommentOld)
            }
            l.start();
            $("#checkMode").val("check");
            $("#updateForm").submit();
        }, null);
    })

这是一段 js 代码主要是点击按钮进行提交的操作 $("#updateForm").submit(); 就是一个提交函数，将 表单信息提交到后台 后台controller通过 指定类型对象的参数进行接收，以及验证等等操作：

4、后台的获取

@RequestMapping(value = {"/update"}, method = {RequestMethod.POST})
public String update(
    @Validated(value = PatternFileInfoForm.Update.class) @ModelAttribute PatternFileInfoForm patternFileInfoForm,
    BindingResult bindingResult, 
    RedirectAttributes redirectAttributes, 
    Model model, 
    Principal principal,
    HttpServletRequest request)

@ModelAttribute PatternFileInfoForm patternFileInfoForm 就是接收参数 这里定义了类型 和 参数名 @ModelAttribute (包路径：org.springframework.web.bind.annotation.ModelAttribute;) 是接收model参数的 注解

@Validated(value = PatternFileInfoForm.Update.class) @Validated (包路径：org.springframework.validation.annotation.Validated;)是用于数据验证的，参数是验证的规则 这里是一个在数据进行更新时使用的验证规则，可以检查数据在更新时 必填项是否填写