【发布时间】：2018-06-19 16:46:03
【问题描述】：
我正在探索一点 Spring Boot，并且正在查看一些前端库 - 我承认我几乎从未见过 :)
我可能犯了一些愚蠢的错误，导致 Bootstrap 无法正常工作。我正在尝试设置标题页。 因为我讨厌做简单的事情，所以我使用 Spring Boot、Webjars 和 Thymeleaf。都是第一次。但似乎一切都很好，我不明白哪里出了问题。
首先，这里是 Gradle 依赖项。我正在使用弹簧 2.0.0.M7。我剪切了应用的插件存储库和组/版本
buildscript {
ext {
springBootVersion = '2.0.0.M7'
}
repositories {
mavenCentral()
maven { url "https://repo.spring.io/snapshot" }
maven { url "https://repo.spring.io/milestone" }
}
dependencies {
classpath group: 'org.springframework.boot', name: 'spring-boot-gradle-plugin', version: "${springBootVersion}"
}
}
// ##### COMPILE DEPENDENCIES
// DATABASE
compile group: 'mysql', name: 'mysql-connector-java'
// SPRING
compile group: 'org.springframework.boot', name: 'spring-boot-devtools'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-data-jpa'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-json'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-web'
// THYMELEAF
compile group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.2.2'
// WEB JAVASCRIPT LIBS
compile group: 'org.webjars', name: 'webjars-locator', version: '0.32-1'
compile group: 'org.webjars', name: 'bootstrap', version: '4.0.0-beta.3'
我正在使用 webjars 定位器。我喜欢这种方法，因为我可以在这里完全控制我的库，而且我不必在应用程序上放置版本号。
然后我设置了资源处理程序来检索 webjars，以及 spring 布局方言......
@Bean
WebMvcConfigurer configurer() {
return new WebMvcConfigurer() {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/webjars/**")
.addResourceLocations("/webjars/")
.resourceChain(false);
}
};
}
@Bean
LayoutDialect layoutDialect() {
return new LayoutDialect();
}
...Spring 应用程序...
@SpringBootApplication(scanBasePackages = { "it.aegidea.wolf" })
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
...控制器...
@Controller
public class HomepageController {
@RequestMapping(value = "/", method = RequestMethod.GET)
public String getHomepage() {
return "homepage";
}
}
...整体布局...
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!--/* Each token will be replaced by their respective titles in the resulting page. */-->
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Task List</title>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div th:include="commons/header :: page-header"></div>
<div class="container">
<div layout:fragment="content">
</div>
</div>
<!-- Injected -->
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/popper.js/dist/umd/popper.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
...标题...
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<nav class="navbar navbar-default navbar-fixed-top" th:fragment="page-header">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#title-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="title-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
...最后是主页。
<!DOCTYPE html>
<html
lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{commons/layout}">
<head>
<meta charset="UTF-8" />
<title>Wolf</title>
</head>
<body>
<div layout:fragment="content">
<p th:text="'Hello World!'" >Hello World!</p>
<div class="btn-group">
<button type="button" class="btn btn-success">This is a success button</button>
<button type="button" class="btn btn-warning">This is a warning button</button>
<button type="button" class="btn btn-danger">This is a danger button</button>
</div>
</div>
</body>
</html>
（奇怪的）效果是样式被正确应用到主页中的按钮，而不是导航栏。
我尝试做的是
- 试图通过直接链接包含 bootstrap、popper 和 jquery（取自 Bootstrap 主页）
- 试图直接将标题包含在主页中，就在 之后
我 100% 确定我犯了一些非常愚蠢的错误，但我可能已经多次看到代码，以至于我看不出我做错了什么。
感谢任何人的帮助:)
洛伦佐
【问题讨论】：
-
你能把你的完整仓库上传到 github 吗？
-
@chenrui 谢谢 :) github.com/il-lore/tmp_wolf.git
-
仅供参考，我开始添加一些休眠用户表和弹簧安全性的东西，所以事情可能与我发布的代码略有不同
标签： spring-mvc spring-boot thymeleaf bootstrap-4 webjars