新手小白,刚学习完springboot基础知识,便在网上找了个个人博客的开源项目练手,项目中使用的前端技术是thymeleaf模板引擎,初次接触thymeleaf,在实际操作中遇到了不少问题,着实让我头大,
闲话不多说,今天在使用thymeleaf时遇到了需要根据实际情况进行判断选择跳转路径的需求,于是我第一反应就是使用三目运算,代码如下:
th:action="*{id}==null? @{/admin/types} : @{/admin/types/{id}(id=*{id})}"
可不知道为什么在第一个@处下方一直爆红,提示 expected, got ‘@{’, 怀着忐忑的心情跑了一遍项目,果不其然出bug了,在网上找了许久也没有找到什么有用的方法或提示,万般无奈之下只好使用最笨的方法,即采用thymeleaf的switch和case
将原本的form表单赋复制了一遍,然后在外部添加了一个div盒子
具体代码如下
<div class="ui container">
<div th:object="${type}" th:switch="*{id}==null">
<form action="#" method="post" th:case="true" th:object="${type}" th:action="@{/admin/types}" class="ui form">
<input type="hidden" name="id" th:value="*{id}">
<div class="required field">
<div class="ui left labeled input">
<label class="ui teal basic label">名称</label>
<input type="text" name="name" placeholder="分类名称" th:value="*{name}">
</div>
</div>
<div class="ui error message"></div>
<!--/*/ <div class="ui negative message" th:if="${#fields.hasErrors('name')}"> <i class="close icon"></i> <div class="header">验证失败 </div> <p th:errors="*{name}">提交信息不符合规则</p> </div> /*/-->
<div class="ui right aligned container">
<button type="button" class="ui red button" onclick="window.history.go(-1)">返回</button>
<button type="submit" class="ui teal button">提交</button>
</div>
</form>
<form action="#" method="post" th:case="false" th:object="${type}" th:action="@{/admin/types/{id}(id=*{id})}" class="ui form">
<input type="hidden" name="id" th:value="*{id}">
<div class="required field">
<div class="ui left labeled input">
<label class="ui teal basic label">名称</label>
<input type="text" name="name" placeholder="分类名称" th:value="*{name}">
</div>
</div>
<div class="ui error message"></div>
<!--/*/ <div class="ui negative message" th:if="${#fields.hasErrors('name')}"> <i class="close icon"></i> <div class="header">验证失败 </div> <p th:errors="*{name}">提交信息不符合规则</p> </div> /*/-->
<div class="ui right aligned container">
<button type="button" class="ui red button" onclick="window.history.go(-1)">返回</button>
<button type="submit" class="ui teal button">提交</button>
</div>
</form>
</div>
</div>
修改完毕之后,项目运行成功,这种方法虽然简单,但无端添加了大量的重复代码,看起来十分不美观,所以如果有大神能有更好的解决方法还请务必告知