1. 程式人生 > >Spring Boot渲染Web頁面

Spring Boot渲染Web頁面

渲染Web頁面

在之前的示例中,我們都是通過@RestController來處理請求,所以返回的內容為json物件。那麼如果需要渲染html頁面的時候,要如何實現呢?
模板引擎
在動態HTML實現上Spring Boot依然可以完美勝任,並且提供了多種模板引擎的預設配置支援,所以在推薦的模板引擎下,我們可以很快的上手開發動態網站。
Spring Boot提供了預設配置的模板引擎主要有以下幾種:
• Thymeleaf
• FreeMarker
• Velocity
• Groovy
• Mustache
Spring Boot建議使用這些模板引擎,避免使用JSP,若一定要使用JSP將無法實現Spring Boot的多種特性,具體可見後文:支援JSP的配置
當你使用上述模板引擎中的任何一個,它們預設的模板配置路徑為:src/main/resources/templates。當然也可以修改這個路徑,具體如何修改,可在後續各模板引擎的配置屬性中查詢並修改。

使用Freemarker模板引擎渲染web檢視

pom檔案引入

        <!-- 引入freeMarker的依賴包. -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

後臺程式碼

package com
.cc.springboot; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.w3c.dom.ls.LSInput; @Controller public class IndexControler { @RequestMapping("/index"
) public String index(ModelMap map) { map.addAttribute("name", "kevin"); map.put("sex",1);//0 男 1 女 其他 List<String> userList=new ArrayList<String>(); userList.add("hubbert"); userList.add("cai"); userList.add("xu"); map.addAttribute("userList", userList); return "index"; } }

前臺程式碼

在src/main/resources/建立一個templates資料夾,字尾為*.ftl

index.ftl頁面:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
      ${name}
      <#if sex==1><#elseif sex==2><#else>
      其他
      </#if>

      <#list userList as user>
      ${user}
      </#list> 

</body> 
</html>

Freemarker配置

新建application.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-separated list
#spring.freemarker.view-names= # whitelist of view names that can be resolved

使用JSP渲染Web檢視

建一個打包型別為war型別的maven專案。
這裡寫圖片描述

pom檔案引入以下依賴

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.3.RELEASE</version>
    </parent>
    <dependencies>
        <!-- SpringBoot 核心元件 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
    </dependencies>

這裡寫圖片描述

在application.properties建立以下配置

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

然後建一個WEB-INF/jsp/index.jsp
這裡寫圖片描述

<%@ 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>
   this is springboot 
</body>
</html>