Как правильно использовать макет Thymeleaf: фрагмент с Spring Boot? - PullRequest
Новая
       3

Как правильно использовать макет Thymeleaf: фрагмент с Spring Boot?

0 голосов
/ 07 апреля 2020

Я неправильно понял вопрос, что не получил никакого ответа в течение 3 дней?

Thymeleaf в основном работает в моем проекте, но макет: фрагмент не хочет работать так, как я пытался. Возможно, я делаю что-то не так и читаю похожие темы, но мне нужна помощь с этим. Мне нужен логин. html имеет ту же панель навигации и нижний колонтитул, которые определены в main. html

main. html находится в / templates / layouts и html находится в / templates / auth

ОБНОВЛЕНИЕ

Декоратор является основным. html, куда я помещаю <div layout:fragment="content"> в теле, где контент предположим, чтобы получить. Я попытался установить layout:decorator="layouts/main"> в теге html логина и layout:fragment="content" в теге тела.

логин. html

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

    lang="en" layout:decorator="layouts/main">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <!--We are choosing these two to let the browser to load faster-->
    <link rel="stylesheet" type="text/css" href="css/logincss.css">
    <!--this is the last one so that we can override previous boostrap styles if we want-->
    <head>

    <body class="signin-body">

    <div layout:fragment="content">
        <div class="container signin-container">
            <div class="row">
                <div class="col"></div>
                <div class="col-sm-12 col-md-8">
                    <div class="card signin-card">
                        <div class="card-block">
                            <form name="login" th:action="@{/login}" method="post" class="signin-form">
                                <div class="form-group">
                                <h2 class="form-signin-heading">Please sign in</h2>
                                    <div th:if="${param.error}" class="alert alert-danger">Wrong username and password</div>
                                    <div th:if="${param.logout}" class="alert alert-success">You successfully logged out</div>
                                    <label for="username" class="sr-only">Username</label>
                                    <input type="text" id="username" name="username" class="form-control" placeholder="Username" required="true">
                                    <label for="password" class="sr-only">Password</label>
                                <div class="form-group">
                                <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="true">
                                </div>  
                                    </div>                               
                                <button class="btn btn-lg btn-primary btn-block signin-btn" type="submit">Login</button>
                                <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="customCheck1">
                             <!-- <label class="custom-control-label" for="customCheck1">Remember me <a href="#"> Need help?</a></label> -->
                             <a class= "new-account" href="/registration">Create New Account</a>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        <div class="col"></div>
    </div>
</div>
</div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="css/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    </body>

</html>

main. html

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

        >


<head>
    <!-- Required meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->


  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://kit.fontawesome.com/2dafcd6f62.js" crossorigin="anonymous"></script>

    <!-- Bootstrap CSS // Let's connect the CSS to the grid system -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap.min.css">


    <!--CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" th:href="@{css/style.css}">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css" th:href="@{css/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css}">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap.min.css" th:href="@{css/bootstrap-4.3.1-dist/css/bootstrap.min.css}">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
    <div class="main-container">
        <!-- ########## MENU BAR ########## -->

        <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
            <a class="navbar-brand" href="#">MENU</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item active"></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" th:text="${references}" target="_blank">some text...</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${qualifications}">
          qualification or something
        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#" th:text="${it}">Some text...</a>
                            <a class="dropdown-item" href="#" th:text="${vaadin}">Some text...</a>
                            <a class="dropdown-item" href="#" th:text="${java}">Some text...</a>

                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${myproject}">
          some text...
        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="pdf/modulzaro.pdf" th:text="${exam}">some text...</a>
                        </div>
                    </li>
                </ul>
            </div>

            <form th:action="@{/logout}" method="post">
                <input class="button-logout" type="submit" value="Log Out" />
            </form>

        </nav>

        <div layout:fragment="content">

        </div>
    </div>

    <!--FOOTER-->
    <footer class="footer bg-dark">
        <!--we can put here our own container-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 col-lg-3 socialWrapper">
                    <p class="contact">Email: 
                        <br>Phone: </p>
                </div>
                <div class="col-sm-12 col-lg-9 footer-font-icons">
                    <a href="#" target="_blank">
                        <!--target="_blank" will open our github page on a new page-->
                        <i class="fa fa-github-square fa-3x" aria-hidden="true"></i></a>
                    <a href="#" target="_blank">
                        <i class="fa fa-stack-overflow fa-3x" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>

    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="css/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

WebConf. java

@Configuration
public class WebConf implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/login").setViewName("auth/login");
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
    }

}

1 Ответ

0 голосов
/ 10 апреля 2020

Хорошо, я нашел источник проблемы:

Я забыл добавить следующую зависимость: 

<dependency>
        <groupId>nz.net.ultraq.thymeleaf</groupId>
        <artifactId>thymeleaf-layout-dialect</artifactId>
    </dependency>

Теперь это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...