iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
自我挑戰組

Spring In Action系列 第 5

Between Front & Back

  • 分享至 

  • xImage
  •  

當我們把user客製化的sword存起來後再轉跳至order頁面讓user填寫訂購資訊,再送出後得到包含客製化sword的完整訂單時,值得一提的是在checkbox紀錄了各ingredient的項目為string,但是Sword物件的ingredient是Ingredient物件,這中間的轉換書中使用了Spring原生的Converter<S, T>介面,S代表轉換前的型別,T代表轉換後的型別,只要implements這個介面,並Override T convert(S s)方法,Spring Boot會藉由auto configuration自動透過這個converter來處理controller的request,挺讚的。

@Component
public class IngredientByIdConverter implements Converter<String, Ingredient> {
 
  private Map<String, Ingredient> ingredientMap = new HashMap<>();
  
  public IngredientByIdConverter() {
    ingredientMap.put("KNIGHT", 
        new Ingredient("KNIGHT", "knight", Type.BLADE));
    ingredientMap.put("SAMURAI", 
        new Ingredient("SAMURAI", "samurai", Type.BLADE));
    ingredientMap.put("IRON", 
        new Ingredient("IRON", "iron", Type.MATERIAL));
    ingredientMap.put("VALYRIAN", 
        new Ingredient("VALYRIAN", "valyrian", Type.MATERIAL));
    ingredientMap.put("STRAIGHT", 
        new Ingredient("STRAIGHT", "straight", Type.HOLD));
    ingredientMap.put("BEND", 
        new Ingredient("BEND", "bend", Type.HOLD));
  }
  
  @Override
  public Ingredient convert(String id) {
    return ingredientMap.get(id);
  }
 
}

若要加上validation,可藉由JavaBean Validation API來將model的class貼上validate的annotation,主要用了@NotNull, @Min, @NotBlank, ,@Pattern 還有Hibernate提供的@CreditCardNumber。

在Model加上validate annotation後,也要在controller的argument加上@Valid,並加上Errors引數,這樣後端的驗證機制就完成了。

再來要在view層上,透過Thymeleaf的以下片段埋在form中的各欄位來達成抓取validation errror:

<span class="validationError"
            th:if="${#fields.hasErrors('yourFieldNameHere')}"
            th:errors="*{yourFieldNameHere}">ingredients Error</span>

除了Thymeleaf,也還有其他的前端html產生引擎,只要在dependency替換掉,並確保src/main/resources裡面的html檔案有按照選擇的引擎語法來寫就行了。

Thymeleaf:

<h3>Designate your wrap:</h3>
<div th:each="ingredient : ${wrap}">
  <input th:field="*{ingredients}" type="checkbox" 
         th:value="${ingredient.id}"/>
  <span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>

Mustache:

<h3>Designate your wrap:</h3>
{{#wrap}}
<div>
  <input name="ingredients" type="checkbox" value="{{id}}" />
  <span>{{name}}</span><br/>
</div>
{{/wrap}}

另外值得一提的是JSP,如果要用JSP的話可以不用加上dependency,因為servlet container都會預設有JSP的支援,只是到時候打包不能build成JAR,因為servlet container預設還是會從/WEB-INF來讀JSP檔案,不會從src/main/resources,所以就比較不建議開發SpringBoot還用JSP了。


上一篇
Controller
下一篇
JdbcTemplate
系列文
Spring In Action30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言