springboot-10-前端頁面整合, thymeleaf, freemarker, jsp 模板使用

時間 2019-11-10

標籤 springboot 前端頁面整合 thymeleaf freemarker jsp 模板使用欄目 Spring 简体版

原文原文鏈接

springboot 中不建議使用jsp做爲頁面展現, 怎麼使用能夠看: http://412887952-qq-com.iteye.com/blog/2292471javascript

關於什麼是thymeleaf, 能夠參照:http://www.cnblogs.com/vinphy/p/4674247.htmlcss

springboot 默認是使用的thymeleaf模板引擎的,html

使用thymeleaf

1, 在pom.xml中加入依賴便可: java

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

2, 關閉thymeleaf緩存: web

########################################################
###THYMELEAF (ThymeleafAutoConfiguration)
########################################################
#spring.thymeleaf.prefix=classpath:/templates/
#spring.thymeleaf.suffix=.html
#spring.thymeleaf.mode=HTML5
#spring.thymeleaf.encoding=UTF-8
# ;charset=<encoding> is added
#spring.thymeleaf.content-type=text/html
# set to false for hot refresh
spring.thymeleaf.cache=false

3, 編寫模板文件, resource下的template爲默認文件位置spring

/resource/templates/helloHtml.htmlapache

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h1 th:inline="text">Hello.v.2</h1>
        <p th:text="${hello}"></p>
    </body>
</html>

4, 編寫controllerbootstrap

package com.iwhere.test.web;

import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * thelemeaf訪問controller層
 * @author wenbronk
 * @time 2017年3月17日  下午2:06:32  2017
 */
@Controller
public class TemplateController {

    @RequestMapping("/helloHtml")
    public String helloHtml(Map<String, Object> map) {
        map.put("hello", "from TemplateController.helloHtml");
        return "/helloHtml";
    }
    
}

thymeleaf 上的表達式:

<html xmlns:th="http://www.thymeleaf.org"></>
經過 xmlns命名空間引入thymeleaf
須要動態處理的元素前 加 th: 

<link th:src="@{bootstrap/css/bootstrap.min.css}" rel = "stylesheet"/>
經過 @{} 獲取web靜態資源

<span th:text="${model.name}"></>
經過 ${} 獲取model的屬性

<div th:if="${not #lists.isEmpty(people)}">
經過 ${not #lists.isEmpty(list)} 判斷people是否爲空

<li th:each="person:${people}">
遍歷元素 people
　　<button th:onclick="'getName(\'' + $(persion.name} + '\'});'">
　　　　動態給元素綁定值

<script th:inline="javascript">
　　var single = [[${singlePerson}]];
　　console.log(single.name + ": " + single.age)
</>
可在js中取值

使用freemarker

1, 加入依賴api

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

2, applicaiton.properties緩存

########################################################
###FREEMARKER (FreeMarkerAutoConfiguration)
########################################################
spring.freemarker.allow-request-override=false
spring.freemarker.cache=true
spring.freemarker.check-template-location=true
spring.freemarker.charset=UTF-8
spring.freemarker.content-type=text/html
spring.freemarker.expose-request-attributes=false
spring.freemarker.expose-session-attributes=false
spring.freemarker.expose-spring-macro-helpers=false
#spring.freemarker.prefix=
#spring.freemarker.request-context-attribute=
#spring.freemarker.settings.*=
#spring.freemarker.suffix=.ftl
#spring.freemarker.template-loader-path=classpath:/templates/#comma-separatedlist
#spring.freemarker.view-names= #whitelistofviewnamesthatcanberesolved

3, controller

/**
     * 返回html模板.
     */
    @RequestMapping("/helloFtl")
    public String helloFtl(Map<String,Object> map){
       map.put("hello","from TemplateController.helloFtl");
       return"/helloFtl";
    }

4, 模板文件

helloFtl.ftl

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello.v.2</h1>
        <p>${hello}</p>
    </body>
</html>

freemarker 和 thymeleaf是能夠共存的

jsp的支持

jsp在springboot中已經被弱化了,

1, 導入maven依賴

 <!-- servlet 依賴. -->
       <dependency>
           <groupId>javax.servlet</groupId>
           <artifactId>javax.servlet-api</artifactId>
           <scope>provided</scope>
       </dependency>
      
       <!--
           JSTL（JSP Standard Tag Library，JSP標準標籤庫)是一個不斷完善的開放源代碼的JSP標籤庫，是由apache的jakarta小組來維護的。JSTL只能運行在支持JSP1.2和Servlet2.3規範的容器上，如tomcat 4.x。在JSP 2.0中也是做爲標準支持的。
          
           否則報異常信息：
           javax.servlet.ServletException: Circular view path [/helloJsp]: would dispatch back to the current handler URL [/helloJsp] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)
            
        -->
       <dependency>
           <groupId>javax.servlet</groupId>
           <artifactId>jstl</artifactId>
       </dependency>
      
      
      
       <!-- tomcat 的支持.-->
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-tomcat</artifactId>
           <scope>provided</scope>
       </dependency>
       <dependency>
           <groupId>org.apache.tomcat.embed</groupId>
           <artifactId>tomcat-embed-jasper</artifactId>
           <scope>provided</scope>
       </dependency>

jdk編譯版本

<build>
       <finalName>spring-boot-jsp</finalName>
       <plugins>
           <plugin>
              <artifactId>maven-compiler-plugin</artifactId>
              <configuration>
                  <source>1.8</source>
                  <target>1.8</target>
              </configuration>
           </plugin>
       </plugins>
    </build>

2, application.properties

# 頁面默認前綴目錄
spring.mvc.view.prefix=/WEB-INF/jsp/
# 響應頁面默認後綴
spring.mvc.view.suffix=.jsp
# 自定義屬性，能夠在Controller中讀取
application.hello=Hello Angel From application

3, controller

package com.kfit.jsp.controller;
 
import java.util.Map;
 
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
/**
 * 測試
 * @author Angel(QQ:412887952)
 * @version v.0.1
 */
@Controller
public class HelloController {
      
       // 從 application.properties 中讀取配置，如取不到默認值爲Hello Shanhy
    @Value("${application.hello:Hello Angel}")
    private String hello;
   
      
       @RequestMapping("/helloJsp")
       public String helloJsp(Map<String,Object> map){
              System.out.println("HelloController.helloJsp().hello="+hello);
              map.put("hello", hello);
              return "helloJsp";
       }
}

4, jsp頁面 , 放在 webapps/WEB-INF/ 下

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    helloJsp
    <hr>
    ${hello}
   
</body>
</html>