Я немного изучал 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. Мне понравился этот подход, потому что здесь я полностью контролирую свои библиотеки, и мне не нужно указывать номера версий в приложении.
Затем я настроил обработчик ресурсов для извлечения веб-файлов и диалект весеннего макета...
@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>
... the header...
<!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>
(Странный) эффект заключается в том, что стиль правильно применяется к кнопкам на главной странице, но не к панели навигации.
То, что я пытался сделать, это
- trying to include bootstrap, popper and jquery with direct links (taken from Bootstrap homepage)
- trying to directly include the header into the homepage, just after
Я на 100% уверен, что делаю какую-то невероятно глупую ошибку, но я, вероятно, видел код столько раз, что не могу понять, что я делаю неправильно.
Спасибо за помощь :)
Лоренцо
