Почему рендеринг Thymeleaf / bootstrap не согласован? - PullRequest
Новая
       37

Почему рендеринг Thymeleaf / bootstrap не согласован?

0 голосов
/ 04 мая 2018

У меня есть приложение Spring Boot / Thymeleaf. Я заметил, что в некоторых ситуациях рендеринг стилей происходит неправильно. У меня наконец есть один случай, который совершенно необъясним. У меня есть 2 кода: 

@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: Я заметил такую ​​проблему ранее время от времени. Я никогда не находил случая, когда это так очевидно. Я скопировал и вставил html из «View Source» в Chrome с помощью редактора vim, а затем использовал diff для сравнения двух страниц. Они одинаковые. Похоже, единственное изменение - это URL, используемый для вызова.

1 Ответ

0 голосов
/ 04 мая 2018

Обратите внимание на два URL в браузере:

  • локальный: 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 / KSS / body.css
  • локальный: 8081 / CSS / footer.css

Это легко диагностируется при просмотре вкладки сети вашего браузера (там будет показано 404 для ваших css-файлов). Я думаю, что самый простой способ исправить это - просто использовать URL-адреса тимелина, например, так, чтобы они работали независимо от используемых вами URL. 

<link rel="stylesheet" th:href="@{/css/navbar.css}" />
<link rel="stylesheet" th:href="@{/css/body.css}" />
<link rel="stylesheet" th:href="@{/css/footer.css}" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...