第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Thymeleaf 上使用具有動態(tài)數(shù)據(jù)的多個“組件”(文件)?

如何在 Thymeleaf 上使用具有動態(tài)數(shù)據(jù)的多個“組件”(文件)?

ibeautiful 2023-05-10 13:23:45
我正在建立一個新網(wǎng)站,我希望有多個文件用于可重復(fù)使用的組件(頁眉、頁腳、通用導(dǎo)入、腳本等)。我還想為每個布局(組合我定義的組件)創(chuàng)建文件,如“主應(yīng)用程序”、“全屏儀表板”等。最后,我想創(chuàng)建只包含我需要的內(nèi)容的頁面,然后將其插入布局我的選擇。像這樣的東西:文件圖我看過這個問題,但這需要我在 java 上調(diào)用布局,并將我的內(nèi)容作為參數(shù),而不是在我的內(nèi)容上定義要使用的布局。我還考慮過只使用我的“布局”作為模板,然后復(fù)制+粘貼到一個新的“內(nèi)容”文件中并編輯占位符。這是一個示例控制器:   @View("ticketing/home")    @Get("/")    public HttpResponse home() {        final Map<String, Object> resultMap = new HashMap<>();        resultMap.put("requests", ticketingClient.getSummaryRequests()); //Returns a list of tickets to be displayed.        return HttpResponse.ok(resultMap); //Maps the resultMap variable to the ticketing/home thymeleaf template    }這就是我想要構(gòu)建內(nèi)容文件的方式:<html>    <head>        <title>Tickets</title>    </head><body>    <div>        <p>My Content is here!</p>        <img src="wow.jpeg">    </div></body></html>這就是我現(xiàn)在的布局:<html xmlns:th="http://www.thymeleaf.org"><head>    <title>Application Layout</title>    <th:block th:include="./fragments/head.html :: imports"></th:block></head><body>    <div id="wrapper">        <!-- Sidebar Menu -->        <div th:replace="./fragments/sidebar.html :: sidebar"></div>        <div id="page-wrapper" class="gray-bg">            <!-- Navigation Menu -->            <div th:replace="./fragments/topbar.html :: topbar"></div>            <!-- Page Header -->            <div th:replace="./fragments/pageheader.html :: pageheader"></div>            <!-- Main Content -->            <div class="wrapper wrapper-content animated fadeInUp" th:fragment="content">                <div class="row">                    <div class="col-lg-12">                        <div class="wrapper wrapper-content">                            <p>Content here</p>                        </div>                    </div>                </div>            </div>        </div>    </div>    <div th:replace="./fragments/footer.html :: footer"></div>    <th:block th:replace="./fragments/scripts.html :: scripts"></th:block></body></html>我希望能夠使用相同的 java 語法(帶有注釋)來使用我的視圖。我寧愿在內(nèi)容文件中進(jìn)行更多更改,也不愿在布局文件中進(jìn)行更改。
查看完整描述

1 回答

?
FFIVE

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個贊

找到了一個有用的答案:

這是一些代碼:組件:內(nèi)容

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<title>Content Wrapper</title>

</head>

<body>

? ? <div class="wrapper wrapper-content animated fadeInUp" th:fragment="content(content)">

? ? ? ? <!-- Main Content -->

? ? ? ? <div class="row">

? ? ? ? ? ? <div class="col-lg-12">

? ? ? ? ? ? ? ? <div class="wrapper wrapper-content">

? ? ? ? ? ? ? ? ? ? <th:block th:replace="${content}"></th:block>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? </div>

</body>

</html>

組件:頁眉


<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org" th:fragment="pageheader">

<head>

<title>Page Header</title>

</head>

<body>

? ? <div class="row wrapper border-bottom white-bg page-heading" th:fragment="pageheader(title)">

? ? ? ? <div class="col-sm-8 col-lg-9">

? ? ? ? ? ? <!-- Title -->

? ? ? ? ? ? <h2 th:replace="${title}">This is main title</h2>

? ? ? ? ? ? <th:block th:if="${breadcrumb}">

? ? ? ? ? ? ? ? <!-- Breadcrumb -->

? ? ? ? ? ? ? ? <ol class="breadcrumb" th:replace="${breadcrumb}">

? ? ? ? ? ? ? ? ? ? <li class="breadcrumb-item"><a href="index.html">This is</a></li>

? ? ? ? ? ? ? ? ? ? <li class="breadcrumb-item active"><strong>Breadcrumb</strong></li>

? ? ? ? ? ? ? ? </ol>

? ? ? ? ? ? </th:block>

? ? ? ? </div>

? ? ? ? <div class="col-sm-4 col-lg-3">

? ? ? ? ? ? <th:block th:if="${actions}">

? ? ? ? ? ? ? ? <!-- Main Action -->

? ? ? ? ? ? ? ? <div class="title-action btn-group" th:if="${actions}" th:replace="${actions}">

? ? ? ? ? ? ? ? ? ? <a href="" class="btn btn-primary">Main Actions</a>

? ? ? ? ? ? ? ? ? ? <a href="" class="btn btn-primary">Main Actions</a>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </th:block>

? ? ? ? </div>

? ? </div>

</body>

</html>

布局:applayout


<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org" th:fragment="layout"> <!-- ${content} and ${title} are mandatory -->

<head>

<title th:replace="${title}">Application Layout</title>

<th:block th:include="./fragments/head.html :: imports"></th:block>

</head>

<body>

? ? <div id="wrapper">

? ? ? ? <!-- Sidebar Menu -->

? ? ? ? <div th:replace="./fragments/sidebar.html :: sidebar"></div>

? ? ? ? <div id="page-wrapper" class="gray-bg">

? ? ? ? ? ? <!-- Navigation Menu -->

? ? ? ? ? ? <div th:replace="./fragments/topbar.html :: topbar"></div>

? ? ? ? ? ? <!-- Page Header -->

? ? ? ? ? ? <div th:replace="./fragments/pageheader.html :: pageheader(title=${title},breadcrumb=${breadcrumb},actions=${actions})"></div>

? ? ? ? ? ? <!-- Main Content -->

? ? ? ? ? ? <div class="wrapper wrapper-content animated fadeInUp" th:replace="./fragments/content.html :: content(${content})"></div>

? ? ? ? </div>

? ? </div>

? ? <div th:replace="./fragments/footer.html :: footer"></div>

? ? <th:block th:replace="./fragments/scripts.html :: scripts"></th:block>

</body>

</html>

內(nèi)容:門票


<!DOCTYPE html>

<html th:replace="~{layout/applayout.html :: layout(title=~{::title},breadcrumb=~{::ol},content=~{::#main},scripts=~{::#scripts})}" xmlns:th="http://www.thymeleaf.org">

<head>

<title>Homepage</title>

</head>

<body>

? ? <ol class="breadcrumb">

? ? ? ? <li class="breadcrumb-item"><a href="index.html">Home</a></li>

? ? ? ? <li class="breadcrumb-item active"><strong>wow</strong></li>

? ? </ol>

? ? <div id="main">

? ? ? ? <div class="col">

? ? ? ? ? ? <p>WOW</p>

? ? ? ? </div>

? ? ? ? <div class="col">

? ? ? ? ? ? <p>WOW</p>

? ? ? ? </div>

? ? ? ? <div class="col">

? ? ? ? ? ? <p>WOW</p>

? ? ? ? </div>

? ? </div>

? ? <th:block id="scripts">

? ? </th:block>

</body>

</html>

這樣我就可以在我的內(nèi)容頁面上有可選參數(shù),每個片段單獨(dú)處理這些參數(shù)。


查看完整回答
反對 回復(fù) 2023-05-10
  • 1 回答
  • 0 關(guān)注
  • 196 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號