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

springboot 中不建议使用jsp作为页面展示, 怎么使用可以看: http://412887952-qq-com.iteye.com/blog/2292471

关于什么是thymeleaf, 可以参照:http://www.cnblogs.com/vinphy/p/4674247.html

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

使用thymeleaf

1, 在pom.xml中加入依赖即可:

<dependency>

         <groupId>org.springframework.boot</groupId>

         <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

2, 关闭thymeleaf缓存:

########################################################

###THYMELEAF (ThymeleafAutoConfiguration)

########################################################

#spring.thymeleaf.prefix=classpath:/templates/

#spring.thymeleaf.suffix=.html

#spring.thymeleaf.mode=HTML5

#spring.thymeleaf.encoding=UTF-

# ;charset=<encoding> is added

#spring.thymeleaf.content-type=text/html

# set to false for hot refresh

spring.thymeleaf.cache=false

3, 编写模板文件, resource下的template为默认文件位置

/resource/templates/helloHtml.html

<!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.</h1>

        <p th:text="${hello}"></p>

    </body>

</html>

4, 编写controller

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, 加入依赖

<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-

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.</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 .x。在JSP .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>

原文地址: http://412887952-qq-com.iteye.com/blog/2292402