为什么Thymeleaf / bootstrap渲染不一致?

时间:2018-05-04 15:23:03

标签: spring-boot twitter-bootstrap-3 thymeleaf

我有一个Spring Boot / Thymeleaf应用程序。我注意到在某些情况下,样式渲染没有正确发生。我终于有一个完全无法解释的案例。我有两段代码:

@GetMapping(value = "/server-admin"+"/"+"cardtype")
public MyModelAndView adminEditEntityList2(Model model, Locale locale) {return super.adminEditEntityList(model, locale);}

    @GetMapping(value = "/server-admin", params = { "cardtype" })
@Override
public MyModelAndView adminEditEntityList(Model model, Locale locale) {return super.adminEditEntityList(model, locale);}

生成的html是完全相同的,我在这里只包含一个副本:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Home</title>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="css/navbar.css" />
        <link rel="stylesheet" href="css/body.css" />
        <link rel="stylesheet" href="css/footer.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="/resources/pwstrength.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
    <style>
            .row-even {background-color:white;}
            .row-odd {background-color:white-smoke;}
        </style>
    </head>
    <body>
        <div class="navigation">

            <!-- 
            <div><span th:text="@{__${#httpServletRequest.requestURI}__}"></span></div>
            <div th:with="value=${T(ws.daley.hollow.Params).params(param)}"><span th:text="${value}"></span></div>
            <div><span th:text="${param}"></span></div>
            <div th:each="var:${#vars.getVariableNames()}"><span th:text="'--'+${var}+'->'+${#vars.getVariable(var)}"></span></div>
             -->
            <div id="navbar-examle" class="navbar navbar-static">
                <div class="navbar-inner">
                    <div id="a" class="container" style="width: auto;">
                        <a class="brand" href="#" style="float:left;"><img
                            src="/images/Dadavatar.png"><span>My Project</span></a>
                        <ul id="b" class="nav" role="navigation">
                            <li id="c" class="dropdown" style="float:left;">
                                <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
                                <ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login?lang=en_US">Login</a></li>
                                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout&amp;lang=en_US">Logout</a></li>
                                    <li role="presentation" class="divider"></li>
                                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html?lang=en_US">Reset Password</a></li>
                                    <li role="presentation" class="divider"></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?lang=en_US">Sign up</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha&amp;lang=en_US">Sign up with Captcha</a></li>
                                    <li role="presentation" class="divider"></li>
                                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="(lang=${lang})" onclick="enable2FA()">Enable 2FA</a></li>
                                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="(lang=${lang})" onclick="disable2FA()">Disable 2FA</a></li>
                                </ul>
                            </li>
                            <li class="dropdown" style="float:left;">
                                <a id="drop2" href="(lang=${lang})" role="button" class="dropdown-toggle" data-toggle="dropdown">

                                    <span>English</span>

                                    <b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en_US">English</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en_US">Spanish</a></li>
                                </ul>
                            </li>

                                <li class="dropdown" style="float:left;">
                                    <a id="drop3" href="#+&#39;?lang=&#39;+${lang}" role="button" class="dropdown-toggle" data-toggle="dropdown">
                                        <span>Administration</span>
                                        <b class="caret"></b></a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist&amp;lang=en_US">Logged On Users</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userSession&amp;lang=en_US">User List</a></li>
                                    <li role="presentation" class="divider"></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?user&amp;lang=en_US">User Accounts</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role&amp;lang=en_US">Roles</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege&amp;lang=en_US">Privileges</a></li>
                                    <li role="presentation" class="divider"></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card&amp;lang=en_US">Cards</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype&amp;lang=en_US">Card Types</a></li>
                                    <li role="presentation" class="divider"></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor&amp;lang=en_US">PiProcessors</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node&amp;lang=en_US">Nodes</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction&amp;lang=en_US">Node Functions</a></li>
                                    </ul>
                                </li>


                                <li class="dropdown" style="float:left;">
                                    <a id="drop4" href="#+&#39;?lang=&#39;+${lang}" role="button" class="dropdown-toggle" data-toggle="dropdown">
                                        <span>Create Room</span>
                                        <b class="caret"></b></a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?room&amp;lang=en_US">Rooms</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?item&amp;lang=en_US">Items</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?itemstate&amp;lang=en_US">Item States</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?objective&amp;lang=en_US">Objectives</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?person&amp;lang=en_US">Persons</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?picture&amp;lang=en_US">Pictures</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?pictureimage&amp;lang=en_US">Picture Images</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?view&amp;lang=en_US">Views</a></li>
                                    </ul>
                                </li>


                        </ul>
                    </div>
                </div>
            </div>

    </div>










        <div class="content">
            <div>

                <div>
                    <h1>Card Types (Click to Edit)</h1>
                    <div>
                        <div>



                                <div>
                                    <div class="col-md-9">
                                        <a href="/server-admin?lang=en_US&amp;cardtype&amp;edit&amp;name=adhesive"><span>adhesive</span></a>
                                    </div>

                                </div>
                                <div>
                                    <div class="col-md-9">
                                        <a href="/server-admin?lang=en_US&amp;cardtype&amp;edit&amp;name=card"><span>card</span></a>
                                    </div>

                                </div>
                                <div>
                                    <div class="col-md-9">
                                        <a href="/server-admin?lang=en_US&amp;cardtype&amp;edit&amp;name=fob"><span>fob</span></a>
                                    </div>

                                </div>
                                <div>
                                    <div class="col-md-9">
                                        <a href="/server-admin?lang=en_US&amp;cardtype&amp;edit&amp;name=test"><span>test</span></a>
                                    </div>

                                </div>

                        </div>
                        <br/>
                        <div class="rowW col-md-9">
                            <div class="col-md-3 btn btn-primary rowW"><a href="/server-admin?lang=en_US&amp;cardtype&amp;new" class="btn-primary">New Card Type</a></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <br>
        <br />
        <div id="qr">
            <p>
                <span>Scan this Barcode using Google Authenticator app on your phone</span>
                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
                <span>and</span>
                <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605">iPhone</a>
            </p>
        </div>
        <div>
            <footer class="footer">
                <div class="container">
                    <span class="text-muted">&copy; 2017 - Field Server</span>
                </div>
            </footer>
         </div>
    </body>
</html>

好页面: Good page 页面错误: Bad page: 我之前和之后都注意到了这种问题。我从来没有发现过这么明显的情况。我复制并粘贴了来自&#34;查看来源&#34;在Chrome中使用vim编辑器然后使用diff来比较两个页面。它们完全相同。唯一的变化似乎是用于调用的URL。

1 个答案:

答案 0 :(得分:1)

注意浏览器中的两个网址:

  • 本地主机:8081 /服务器管理员/ cardtype LANG = EN_US
  • 本地主机:8081 /服务器管理员cardtype&安培; LANG = EN_US

现在,你的css链接:

<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/body.css" />
<link rel="stylesheet" href="css/footer.css" />

这些都是相关链接。因此,当您加载页面localhost:8081/server-admin/cardtype?lang=en_US时,它会尝试解析您的CSS。

  • 本地主机:8081 /服务器管理员/ CSS / navbar.css
  • 本地主机:8081 /服务器管理员/ CSS / body.css
  • 本地主机:8081 /服务器管理员/ CSS / footer.css

但是,当您在页面localhost:8081/server-admin?cardtype&lang=en_US上时,没有第二个/。因此,相对链接(错误地)解析为:

  • 本地主机:8081 / CSS / navbar.css
  • 本地主机:8081 / CSS / body.css
  • 本地主机:8081 / CSS / footer.css

通过观看浏览器的网络标签可以很容易地诊断出来(这将为您的css文件显示一堆404)。我认为解决这个问题的最简单方法就是使用像这样的百万美元网址 - 无论你使用哪种网址,这都应该有效。

<link rel="stylesheet" th:href="@{/css/navbar.css}" />
<link rel="stylesheet" th:href="@{/css/body.css}" />
<link rel="stylesheet" th:href="@{/css/footer.css}" />