问题：

Spring Boot 2 Webjars引导程序Thymeleaf=未应用主题

倪炎彬

2023-03-14

我正在探索一个小Spring Boot，我正在查看一些前端库——我承认我几乎从未见过：）

我可能犯了一些愚蠢的错误，导致引导程序无法工作。我正在尝试设置标题页。因为我讨厌做简单的事情，所以我使用Spring Boot、Webjars和Thymeleaf。这是第一次。但似乎一切都很好，我不明白怎么了。

首先，这里是Gradle依赖项。我使用的是spring 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定位器。我喜欢这种方法，因为我可以完全控制我的库，而且我不必在应用程序上输入版本号。

然后，我设置了资源处理程序来检索WebJAR和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%确定我正在犯一些难以置信的愚蠢错误，但我可能已经看过代码太多次了，以至于我看不到我做错了什么。

感谢所有人的帮助：）

洛伦佐

东门城

2023-03-14

不出所料，答案总是比预期的要简单。我在bootstrap 4中使用bootstrap 3 css类（navbar固定顶），它改变了类。

引导4的示例标头：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

示例菜单项：

<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>

下面是引导程序4的指南

https://getbootstrap.com/docs/4.0/components/navbar/

Spring Boot 2 Webjars引导程序Thymeleaf=未应用主题

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档