3、thymeleaf模板引擎構建前臺html, 後臺使用 ModelAndView 和 Model 模型

時間  2019-11-24
標籤 thymeleaf 模板 引擎 構建 前臺 html 後臺 使用 modelandview model 模型 欄目 HTML 简体版
原文   原文鏈接

項目源碼：https://github.com/y369q369/springBoot.git      ->     thymeleafhtml

 私聊QQ： 1486866853html5

1.pom.xml中依賴jar包(注意加紅字段)java

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>MVC</groupId>
    <artifactId>springbootMVC</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springbootMVC</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>

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

        <!-- thymeleaf模板依賴 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        
        <!-- web依賴 ：包含內置tomcat和spring的web依賴  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2.在 src/main/resources 新建 templates 目錄  和 application.yml(替代application.properties, 在springBoot項目中若是二者都有會先加載application.yml， 而後再加載 application.properties 覆蓋yml文件， 建議只留 yml文件)github

 

 

 application.yml 的配置內容(注意：spring.thymeleaf.mode: LEGACYHTML5，解除html的書寫規範)web

server:
  #springBoot內置tomact的端口號
  port: 8086
  servlet:
    #springBoot項目的前綴名
    context-path: /thymeleaf

spring:
  # thymeleaf 模板引擎配置
  thymeleaf:
　　 # 不設置緩存
    cache: false  
    # thymeleaf模板 解除嚴格約束(對html5沒有結束符的標籤解決)
    mode: LEGACYHTML5
    # thymeleaf修飾的動態頁面 自定義根目錄(springBoot默認的動態頁面存放文件夾就是templates)
    prefix: classpath:/templates/

3. ModelAndView的數據模型 ： 在 src/main/java 新建 controller 文件夾，在新建 ModelAndViewController.java 類，  在templates目錄下新建對應的 modelAndView.html spring

3.1   ModelAndViewController.javaapache

package demo.controller;

import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
  * @author GrassPrince
  * @time   2019年3月23日 -下午9:01:57
  * @description:測試ModelAndView的模型
  */
@RequestMapping("/ModelAndView")
@Controller
public class ModelAndViewController {
	
	//測試new ModelAndView(String viewName)構造方法
	@GetMapping("/modelAndView1")
	public ModelAndView modelAndView1() {
		//new ModelAndView("/modelAndView")和new ModelAndView("modelAndView")均可以
//		return new ModelAndView("/modelAndView");
		return new ModelAndView("modelAndView");
		//重定向的地址注意，徹底地址且前面須要加/
//		return new ModelAndView("redirect:/ModelAndView/modelAndView2");
	}
	
	//測試ModelAndView(String viewName, String modelName, Object modelObject)構造方法
	@GetMapping("/modelAndView2")
	public ModelAndView modelAndView2() {
		return new ModelAndView("/modelAndView", "model2", "modelObject  2");
	} 
	
	//測試ModelAndView(String viewName, @Nullable Map<String, ?> model)構造方法
	@GetMapping("/modelAndView3")
	public ModelAndView modelAndView3(Map<String, Object> map) {
		map.put("map1", "obj 1");
		map.put("map2", "obj 2");
		return new ModelAndView("modelAndView", map);
	}
	
	//測試addObject(String attributeName, @Nullable Object attributeValue)
	//	  addObject(Object attributeValue)方法
	@GetMapping("/modelAndView4")
	public ModelAndView modelAndView4() {
		ModelAndView mav = new ModelAndView();
		//設置返回的url
		mav.setViewName("modelAndView");
		//變量名, 變量值
		mav.addObject("obj1", "modelObject  4");
		// 變量值(變量名爲變量值的所屬類的類名)
		mav.addObject("modelObject  5");
		return mav;
	}
}

　3.2  modelAndView.html  　瀏覽器

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
	<head>
		<title>測試ModelAndView</title>
		<meta name="keywords" content="keyword1,keyword2,keyword3"/>
	    <meta name="description" content="this is my page"/>
	    <meta name="content-type" content="text/html; charset=UTF-8"/>
	</head>
	<body>
		<div style="padding-top : 100px; text-align: center;">
			<p>Hello ModelAndView</p>
			
			<!-- 接收model2 -->
			<p th:text="${model2}"></p>
			
			<!-- 接收map,拼接的字符串用' -->
			<p th:text="${map1 +', '+ map2}"></p>
			
			<!-- 接收obj,拼接的字符串用' -->
			<p th:text="${obj1 +', '+ string}"></p>
		</div>
		
	</body>
</html>

3.3  啓動項目下的 DemoApplication.java (myeclipse2018右擊，Run As / Debug As   ->  Spring Boot App)緩存

瀏覽器地址欄輸入 ： http://localhost:8086/thymeleaf/ModelAndView/modelAndView2 ， 頁面顯示以下 

 

 4.Model數據模型  ，在 controller 文件夾下新建 ModelController.java 類,  在 templates 目錄下新建  model.html

4.1  ModelController.java

package demo.controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

/**
  * @author GrassPrince
  * @time   2019年3月24日 -上午12:15:05
  * @description:Model的使用，Model必須在方法參數中定義
  */
@RequestMapping("/Model")
@Controller
public class ModelController {
	
	//測試重定向
	@GetMapping("/model4")
	public String model4(Model model) {
		return "redirect:https://www.baidu.com";
	}
	
	//測試addAttribute(Object attributeValue)方法
	@GetMapping("/model1")
	public String model1(Model model) {
		// 對象值， 對象名爲對象值所屬類型
		model.addAttribute("addAttribute(Object attributeValue)");
		return "model";
	}
	
	//測試addAttribute(String attributeName, @Nullable Object attributeValue)方法
	@GetMapping("/model2")
	public String model2(Model model) {
		//  對象名,對象值
		model.addAttribute("content", "addAttribute(String attributeName, @Nullable Object attributeValue)");
		return "model";
	}
	
	//測試addAllAttributes(Map<String, ?> attributes)方法
	@GetMapping("/model3")
	public String model3(Model model) {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("map", "addAllAttributes(Map<String, ?> attributes)");
		model.addAllAttributes(map);
		return "model";
	}

}

　4.2  model.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
	<head>
		<title>測試Model</title>
		<meta name="keywords" content="keyword1,keyword2,keyword3"/>
	    <meta name="description" content="this is my page"/>
	    <meta name="content-type" content="text/html; charset=UTF-8"/>
	</head>
	<body>
		<div style="padding-top : 100px; text-align: center;">
			<p>Hello Model</p>
			
			<!-- 測試model的addAttribute(Object attributeValue)方法 -->
			<p th:text="${string}"></p>
			
			<!-- 測試model的addAttribute(String attributeName, @Nullable Object attributeValue)方法 -->
			<p th:text="${content}"></p>
			
			<!-- 測試model的addAllAttributes(Map<String, ?> attributes)方法 -->
			<p th:text="${map}"></p>
		</div>
		
		
	</body>
</html>

4.3  啓動項目下的 DemoApplication.java (myeclipse2018右擊，Run As / Debug As   ->  Spring Boot App)

瀏覽器地址欄輸入 ： http://localhost:8086/thymeleaf/Model/model1， 頁面顯示以下 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程