关于thymeleaf中使用三目运算符出错的问题

2021-09-02 00:00:00 thymeleaf 运算符 出错

新手小白,刚学习完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>

修改完毕之后,项目运行成功,这种方法虽然简单,但无端添加了大量的重复代码,看起来十分不美观,所以如果有大神能有更好的解决方法还请务必告知

    原文作者:z`two
    原文地址: https://blog.csdn.net/a5844/article/details/106087414
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。

相关文章