Ian的Java成長紀錄: thymeleaf

顯示具有 thymeleaf 標籤的文章。顯示所有文章

2021年5月18日星期二

[Spring Boot]Thymleaf使用fragment及遇到中文亂碼問題

如果每個畫面都有固定片段的話

可以將該片段提取出來當作一個fragment

fragment設以下標籤

...裡面為重複的程式片段

</head>

然後在引用的部分, 用replace來帶掉

<title>AIoT智能腎臟病照護加值服務平台login</title>

</head>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

如果引用之後, 本來的頁面的中文變成亂碼呈現

可以在內容加入<meta charset="UTF-8"/>

如下圖

[Spring Boot] Thymeleaf 引用靜態資源

拿到新的前端包,

要進到spring boot使用Thymleaf引入, 遇到了問題

還有爆

Refused to apply style from 'OOXXX' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

查了一下得知, 原來是資源沒有引入的問題,

後來查了一下才知道

放在static下面的靜態資源要這樣引入

引入程式碼如下

另外解決一直跳轉到login問題

import org.springframework.context.annotation.Configuration;

import org.springframework.security.config.annotation.web.builders.HttpSecurity;

import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration

@EnableWebSecurity

public class SecurityConfigSEVEN extends WebSecurityConfigurerAdapter {

@Override

protected void configure(HttpSecurity http) throws Exception {

//super.configure(http);

//配置不需要登陆验证

http.authorizeRequests().anyRequest().permitAll().and().logout().permitAll();

}

參考網址:

https://blog.csdn.net/SEVENY_/article/details/104660418

參考網址:

https://blog.csdn.net/chenbetter1996/article/details/84994801

https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type

2021年2月11日星期四

[SpringBoot 1.5] 引入靜態頁面相關問題及使用fragment

引入靜態頁面的時候

我們原本可能會使用

<link rel="stylesheet" href="../../static/css/me.css">

這個語法在模板templates(有引入thymeleaf)下, 並不能讀取到

因此~需要改為

<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">

用th:href="@{}"來引入資源

然後重新build再刷新頁面就沒問題了

---------------------------------------------------------------------------------------

使用fragment

1 首先產生一個html檔案命名為_fragments

2 然後我們將大部分頁面上會重複的程式碼複製到這頁面

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客詳情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>

3 將引入方式修改為th:href="@{}"

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../static/css/typo.css" th:href="@{css/typo.css}">
<link rel="stylesheet" href="../static/css/animate.css" th:href="@{css/animate.css}">
<link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

4 將重複的片段掛上fragment

<head th:fragment="head(title)">

5 如果遇到每個頁面有共通元素, 但是內容不一樣,

例如 <title>博客詳情</title>

這時候我們就要使用傳參數的方式(注意取參數要用$)

<head th:fragment="head(title)">

<title th:replace="${title}">博客詳情</title>

</head>

這樣來做搭配

6 而在要引入的頁面(比方說index.html)

我們可以這樣做, 這樣就是將title裡面的參數傳遞過去

<head th:replace="_fragments :: head(~{::title})">

完整的程式碼:

_fragments.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">博客詳情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{css/typo.css}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{css/animate.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

</body>
</html>

index.html 的header

<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" >
</head>

2021年1月22日星期五

[SpringBoot 1.5] Thymeleaf 判斷顯示根據參數

我們在左邊的目錄, 在情境下會想要當點選的時候, 要改變不同的顏色

可以用以下的判斷來顯示

在list.html中使用以下

<div th:replace="commons/bar::#sidebar(activeUri='emps.html')"></div>

用以告訴對方目前頁面是emps.html

而dashboard.html中使用以下

<div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>

用以告訴對方目前頁面是main.html

而在被鑲嵌的目錄就可以設置以下

<a class="nav-link active"
   th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
   href="#" th:href="@{main.html}">

這個就是判斷如果現在點選該頁面的話, 目前的activeUri被設置為main.html就會判斷出來

然後因此nav-link的css值就會有active

同理, 如果是Customers被選到的時候要讓他有顯示

就用以下這段就行了

<a class="nav-link active"
   th:class="${activeUri=='emps.html'?'nav-link active':'nav-link'}"
   href="#" th:href="@{/emps}">

2021年1月20日星期三

[SpringBoot 1.5] thymeleaf template layout介紹

1 抽取公共片段

在會重複使用的code中加入th:fragment="copy"

如以下

OOXXX

</div>

2引入公共片段

然後在要重複的code中插入

這邊也可以寫作

這樣就可以共用程式碼簡化重複的code了

而 ~{footer :: copy}為

~{templatename:: selector} 模板名::選擇器

~{templatename:: fragmentname} 模板名::片段名

------------------------------------------------------------

三種引用方式

th:insert >將公共片段整段插入到聲明引用的元素中

th:replace >將聲明引入的元素替換為公共片段

th:include >將引入的片段的內容包含進這個標籤中

範例

</footer>

引入方式

<body>

</body>

效果

<body>

<div>

</footer>

</div>

</footer>

<div>

</div>

</body>

------------------------------

另外一種設定方式, 可以依照id( ~{templatename:: selector} )

</div>

2021年1月18日星期一

[SpringBoot 1.5] 使用 thymeleaf

在pom.xml檔案這一段加入properites中

<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
<!--布局功能的支持程序 thymeleaf3 主程序 layout2以上版本-->
<!--thymeleaf2 layout1 适配-->
<thymeleaf-layout-dialect.version>2.3.0</thymeleaf-layout-dialect.version>

然後 dependencies中加入這段

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

因為thymeleaf 在SpringBoot的autoconfigure包中已經有配置好

package org.springframework.boot.autoconfigure.thymeleaf;

import java.nio.charset.Charset;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.util.MimeType;

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

   private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");

   private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");

   public static final String DEFAULT_PREFIX = "classpath:/templates/";

   public static final String DEFAULT_SUFFIX = ".html";

因此以上項目, 如果頁面有放在templates資料夾下面, 他就能使用已經配置好的tymeleaf功能

另外一部分還要在頁面的頭部加入以下內容

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

以下我們示範一個簡單的範例

畫面:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>成功</h1>

<div th:text="${hello}">這是顯示歡迎訊息</div>
</body>
</html>

------------------------------------------------------------------------

java code:

@Controller

public class HelloController {

@RequestMapping("/success")
public String success(Map<String,Object> map){
    map.put("hello","您好");
    return "success";
}

訂閱：文章 (Atom)

Ian的Java成長紀錄

2021年5月18日星期二

[Spring Boot]Thymleaf使用fragment及遇到中文亂碼問題

[Spring Boot] Thymeleaf 引用靜態資源

2021年2月11日星期四

[SpringBoot 1.5] 引入靜態頁面相關問題及使用fragment

2021年1月22日星期五

[SpringBoot 1.5] Thymeleaf 判斷顯示根據參數

2021年1月20日星期三

[SpringBoot 1.5] thymeleaf template layout介紹

2021年1月18日星期一

[SpringBoot 1.5] 使用 thymeleaf

2026半年度目標

檢舉濫用情形

2021年5月18日 星期二

2021年2月11日 星期四

2021年1月22日 星期五

2021年1月20日 星期三

2021年1月18日 星期一

2021年5月18日星期二

2021年2月11日星期四

2021年1月22日星期五

2021年1月20日星期三

2021年1月18日星期一