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-8 # ;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.2</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-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>
原文地址: http://412887952-qq-com.iteye.com/blog/2292402
