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

posted @ 2017-03-17 14:12 bronk 阅读(3873) 评论(0) 编辑收藏举报

刷新页面返回顶部

bronk

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

使用thymeleaf

thymeleaf 上的表达式:

使用freemarker

jsp的支持

公告