SpringBoot学習記録（3）：SpringBootテンプレート統合Freemarkerの

FreeMarkerのテンプレートはじめに

公式の説明は：FreeMarkerのはつまり、テンプレートとデータに基づいて変更し、一般的なツールの出力テキスト（HTML Webページ、電子メール、設定ファイル、ソースコードなど）を生成するために使用されるように、テンプレートエンジンです。

FreeMarkerの事実、原理は次のとおりです。+テンプレートデータモデル出力=

Freemarkerの利用プロジェクトテンプレートSpringBoot

1は、環境を設定
pom.xmlファイル内のリソースをインポートするには

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

SpringBoot Freemarkerのに示すようにそれとも、プロジェクトをビルドテンプレートを確認することができます。
ここに画像を挿入説明
自動的にPOMファイルにチェックした後のjarパッケージをダウンロードして使用します。

ここに画像を挿入説明

2、コンフィギュレーション・ファイル構成Freemarkerので
YAML設定ファイル：

spring:
  freemarker:
    suffix: .html

プロパティの設定ファイル：

spring.freemarker.suffix= .html

3、新しいHTMLテンプレートテンプレートフォルダ
ここに画像を挿入説明

ケースのテスト：

Javaコード

@Controller
@RequestMapping("/index/")
public class StudentController {

	@RequestMapping("test")
	public String test(Model model) {
		
		//传入一个字符串
		model.addAttribute("test","Hellow Spring boot Freemarker!!");
		
		//传入对象
		Student stu = new Student(101, "张三");
		model.addAttribute("stu",stu);
		
		//传入集合
		List<Object> list = new ArrayList<Object>();
		list.add(new Student(102, "李四"));
		list.add(new Student(103,"王五"));
		model.addAttribute("list",list);
		
		
		return "test";
	}
}

htmlコード

<body>

	<!-- 渲染字符串 -->
	${test}</br>
	
	<!-- 渲染对象 -->
	<!-- if stu?? 表示如果stu存在 则渲染下面代码 否则渲染else标签下的代码 -->
	<#if stu??>
			编号：${stu.id}
			名字：${stu.name}</br>
		<#else>
			else
	</#if>
	
	<!-- 渲染集合 list标签 类似于java中的增强for循环 -->
	<#list list as s>
		编号：${s.id}
		名字：${s.name}</br>
	</#list>
	
</body>

試験結果が示されています
ここに画像を挿入説明

もちろん、htmlファイルは、テンプレートフォルダを置く必要はありません。それでは、どのファイル、それの保存場所を交換するには？
解決策：このコードは、構成ファイルに追加することができます。

YAML設定ファイル：

spring:
  freemarker:
    suffix: .html
    template-loader-path: classpath:/web

プロパティファイルの設定

spring.freemarker.template-loader-path=classpath:/web

テスト：
ここに画像を挿入説明

それでは、どのようなhtmlファイルなどの他のフレームワークの導入ん：、JS、あまりにもそれらをjqueryのCSS

ここでは、jQueryのに例を使用します

方法1 - 直接使用

Jarファイルは、直接静的フォルダにして、誰もがここでは示さないのhtmlフォルダへの参照に精通しています。

方法2 - webjar

webjarは何ですか

webjarは瓶のパッケージ内のリソースのフロントエンド統合では、プロジェクトで参照Mavenの展開、リソースの一元管理を使用することができます。

公式サイト：公式サイトwebjar

どのように使用するには：

1は、依存性のポンポンファイルで導入されています。

<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>jquery</artifactId>
			<version>3.4.1</version>
</dependency>

ここに画像を挿入説明
2、htmlファイル内の参照

<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>

テストにjsのコードを書きます：

<script type="text/javascript">
	$("#btn").click(function(){
		alert("click");
	})
</script>

試験結果が示されています。

ここに画像を挿入説明