为什么Thymeleaf / bootstrap渲染不一致？
我有一个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&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&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="#+'?lang='+${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&lang=en_US">Logged On Users</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userSession&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&lang=en_US">User Accounts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role&lang=en_US">Roles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege&lang=en_US">Privileges</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card&lang=en_US">Cards</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype&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&lang=en_US">PiProcessors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node&lang=en_US">Nodes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction&lang=en_US">Node Functions</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop4" href="#+'?lang='+${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&lang=en_US">Rooms</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?item&lang=en_US">Items</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?itemstate&lang=en_US">Item States</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?objective&lang=en_US">Objectives</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?person&lang=en_US">Persons</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?picture&lang=en_US">Pictures</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?pictureimage&lang=en_US">Picture Images</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?view&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&cardtype&edit&name=adhesive"><span>adhesive</span></a>
</div>
</div>
<div>
<div class="col-md-9">
<a href="/server-admin?lang=en_US&cardtype&edit&name=card"><span>card</span></a>
</div>
</div>
<div>
<div class="col-md-9">
<a href="/server-admin?lang=en_US&cardtype&edit&name=fob"><span>fob</span></a>
</div>
</div>
<div>
<div class="col-md-9">
<a href="/server-admin?lang=en_US&cardtype&edit&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&cardtype&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">© 2017 - Field Server</span>
</div>
</footer>
</div>
</body>
</html>
好页面：
页面错误：
我之前和之后都注意到了这种问题。我从来没有发现过这么明显的情况。我复制并粘贴了来自＆＃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}" />
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？