SpringBoot+ThymeleafはHTMLファイルの導入を実装(インクルード機能と同様)_html/css_WEB-ITnose

私はハイエンドのフロントエンド処理に慣れていないため、MVC 経由でコンテンツを直接転送したいため、値の受け渡しの問題を処理するために Thymeleaf テンプレートを選択しました。フロントエンドへ。ただし、多くの PHP フレームワークで実装されているインクルード テンプレート メソッドは、ヘッダー ファイル、ナビゲーション、ページ フッターなどをメイン コンテンツから効果的に分離できるので、Thymeleaf テンプレートを使用して、同様のことを実現したいと考えています。機能が含まれます。

---

アイデアと背景

エネルギーがあるなら、RESTFul 構造を使用するのが最善だと思います。その後、angularjs または他のメソッドを使用する方が合理的かもしれません。フロントエンドについてはあまり詳しくないので自分でyyしてみました

本題に戻りますが、環境は主にSpring Boot FrameworkとThymeleafを使って構築しています。主なアイデアは、Thymeleaf の「th:untext()」メソッドを使用して、バックエンド処理で ModelMap を通じて予約されたヘッダー ファイル、ナビゲーションなどを実際の Web ページにマップすることです。

---

実際の操作

1. 背景

まず実行できる Spring boot+Thymeleaf プロジェクトを設定します。具体的なチュートリアルがたくさんあるので省略します。詳細に。

その後、デフォルトのディレクトリ構成が採用されます。これはおおよそ次のとおりです: resource static —— (デフォルトの静的ファイルディレクトリ) templates —— (デフォルトのThymeleafテンプレートディレクトリ) application.properties

2.基本

を処理した後、th:untext() 関数を使用して、他のコンテンツを含める必要があるテンプレート ファイル内の関連部分をマークし、関連するコンテンツをコントローラーの ModelMap にロードします。おそらく次のようになります。このテンプレートファイル部分:

<header class="am-topbar admin-header" th:utext="${headerContent}">  
<p class="am-topbar-brand">    
<strong>创澳商务</strong> <small>交易者系统</small>  </p>  </header>

バックエンド処理部分:

@RequestMapping("/background")    
private String backgroud(ModelMap map){        
map.addAttribute("headerContent", "hello word!");        
return "background";    
}

3. WYSIWYG メソッド

テンプレート ファイル (html) の変更が必要になる場合があるためこれにより期待どおりの効果が得られますが、Thymeleaf などのフレームワークの最大の特徴の 1 つは、フロントエンドの設計とバックエンドの実装を分離できることです (HTML ファイルを直接使用するため、サーバーが不要な場合でも、ブラウザ経由でデザインしたテンプレートファイルを直接閲覧することも可能ですので、ご紹介できるのはHTMLファイルでも良いと思いますが、これも基本的な考え方に沿っています。機能が含まれます。したがって、dom ファイルのトラバースの問題を解決するために、Jsoup パッケージがプロジェクトに導入されました。 もちろん、この完全なプロセスを完全にスキップして、txt や json などを直接使用することもできます。もちろん、他の広く使用されている dom トラバーサル ツールを選択することもできますが、ここでこの jsoup バッグを使用したいだけです。 jsoup のセレクタ構文は基本的に JQuery などのフロントエンド ツールの構文と同じです。JQuery に慣れている人にとっては非常に朗報です。具体的な構成は次のとおりです。 Maven の依存関係を追加します

セレクターを使用して要素を取得し、コンテンツを取得します

<dependency>          
<groupId>org.jsoup</groupId>          
<artifactId>jsoup</artifactId>          
<version>1.9.2</version>     
</dependency>

これを実行した後、HTML を通じて直接ページをデザインし、それをバックグラウンドを通じてフロントエンド ページに含めることができますプログラム。

map.addAttribute("headerContent", doc.select("header").toString());
map.addAttribute("sideBarContent", doc.select("#admin-offcanvas").first().toString());

4. ヘッダ参照を含める

一般的なナビゲーション部分(pなど)については、上記の処理を行えばOKです。同様の機能を実現するには、組み込み、分離など、head内のさまざまな参照が当然必要になります。そうしないと、参照する必要のある css や js を変更するたびに、各ファイルを再度修正する必要があり、考えただけで頭が痛くなります。

しかし問題は、ModelMapを使ってヘッダーリンクを参照する場合、以下の処理が解析できないことです。そうなると、css と js の参照は当然めちゃくちゃになります。

これに対処するときは、主にフレームワーク自体の特性を利用して、すべての css ファイルを静的フォルダー (デフォルトでは Spring Boot によって保存される静的ファイル) に置きました。リソース) を参照し、href 値 (href="css/main.css?7.1.34") を記述することでこの問題を直接解決します。

th:href="@{/css/main.css}"

もちろん、もっと良い解決策があるかもしれないと思いますので、アドバイスをお願いします~

5. static 下の CSS ファイルが不整合になる可能性がある問題

リンクとスクリプトによってファイル パスの問題が発生する問題は解決しましたが、href を最後まで記述すると、新しい問題が発生します。html ファイルはすべてテンプレートの下にあるため、css ファイルを直接使用することはできません。複数のフォルダーの場合、正しい CSS ファイルは通常サーバー経由でインポートできますが、ページのデザインと編集はブラウザー経由で直接行うことができません。これはフロントエンド デザインとバックエンド実装の

分離に違反します。前に説明した

機能。 この問題をさらに解決するには、css ファイルをテンプレート フォルダーの下にコピーするだけです (さらにサブフォルダーを作成したい場合は、各フォルダーの下に CSS ファイルをコピーする必要があります)。このソリューションはまったく洗練されておらず、CSS ファイルの同期を忘れることにより、サーバーの表示とデザインの表示の間に不一致が発生する可能性があります。

そこで、

汚くない

にするために、新しい解決策を採用しました。それは、HTML ファイルの static フォルダーの下に CSS の href を直接記述してから、このとき、新しい href メソッドは static などのプレフィックスを削除することで取得され、同じ CSS を使用しながらフロントエンドの設計とバックエンドの実装を分離できます。また、パスには静的機能が含まれているため、部分文字列関数を直接使用するのは非常に便利です。具体的な実装は次のとおりです:

    public void getNavigation(Integer naviType,ModelMap map){                        
    String fileUrl = templateUrl;        
    switch(naviType){            
    case 1:                //admin navigatioin                
    fileUrl = fileUrl + "header_admin.html";                
    break;            
    case 2:                //user navigation                
    fileUrl = fileUrl + "header_trader.html";                
    break;            
    default:                
    fileUrl = fileUrl + "header_trader.html";                
    break;        
    }                
    try {            
    InputStream input = this.getClass().getResourceAsStream(fileUrl);            
    Document doc = Jsoup.parse(input,"UTF-8","http://www.mychuangao.com/");            
    map.addAttribute("headerContent", doc.select("header").toString());            
    map.addAttribute("sideBarContent", doc.select("#admin-offcanvas").first().toString());            
    map.addAttribute("footerContent", changeAttrAddress(doc.select("footer"),"script","src"));            
    map.addAttribute("headContent", changeAttrAddress(doc.select("head"),"link","href"));        
    } catch (IOException e) {            
    logger.error("error when using jsoup");            
    logger.error(e.getMessage());           
     map.addAttribute("headContent", "");            
    map.addAttribute("headerContent", "");            
    map.addAttribute("sideBarContent", "");            
    map.addAttribute("footerContent", "");        
    }    
    }    
    private String changeAttrAddress(Elements parentNode,String dealingNodeName,String attrName){        
    Elements elements = parentNode.select(dealingNodeName);        
    for(Element elment : elements){            
    String orignalAddress = elment.attr(attrName);            
    if(orignalAddress.isEmpty())
    {                
    continue;            
    }            
    orignalAddress = delInnerPath(orignalAddress);            
    elment.attr(attrName,orignalAddress);        
    }        
    return parentNode.toString();    
    }    
    private String delInnerPath(String address){        
    String keyWord = "static";        
    if(address.contains(keyWord)==false)
    {            
    return address;        
    }        
    int position = address.indexOf(keyWord) + keyWord.length() + 1;        
    return address.substring(position);    
    }

---

注意点

1. 注意要使用th:untext()函数，而非th:text()函数，原因你懂的~

2. 处理路径时，如果使用了获取绝对路径的方式，可能会造成访问权限问题，在web项目中要慎重

3. 大家可以根据自己的需求更改spring boot和Thymeleaf的文件目录，具体可以参考修改spring boot默认目录