Spring Boot View 整合

今天主要介绍一下和springboot相关的视图技术,从springboot的角度来说,默认支持的视图是fremarker,thymeleaf,默认不支持JSP,当然有的项目当中仍然使用了jsp,没有关系只要稍加配置和修改也是可以支持jsp的.每种视图技术下面都会讲到,在进入代码之前先概括的介绍一下视图相关的组件技术,在web领域里面,常用的视图技术又jsp,fremakre,velocity.thymeleaf等

JSP视图

优点: 
1、功能强大,可以写java代码 
2、支持jsp标签(jsp tag 
3、支持表达式语言(el 
4、官方标准,用户群广,丰富的第三方jsp标签库 
5、性能良好。jsp编译成class文件执行,有很好的性能表现 

FREMAKER 视图:

优点: 
1、不能编写java代码,可以实现严格的mvc分离 
2、性能非常不错 
3、对jsp标签支持良好 
4、内置大量常用功能,使用非常方便 
5、宏定义(类似jsp标签)非常方便 
6、使用表达式语言 
缺点: 

无法直接用浏览器渲染页面原来的样子

VELOCITY 视图:

优点: 
1、不能编写java代码,可以实现严格的mvc分离 
2、性能良好,据说比jsp性能还要好些 
3、使用表达式语言,据说jsp的表达式语言就是学velocity 
缺点: 

JSP的标签支持的不够好

THYMELEAF视图:

优点:

1 静态html嵌入标签属性,浏览器可以直接打开模板文件,方便前端和后端进行调式

2 扩展性非常好

缺点:

模板必须符合XML的规范,这点太麻烦了,书写的时候一定要注意

上面模板使用最多的是fremaker,但是它的性能并不是最好的,相反应该算是比较差的,性能最好的是veclocity,然后到jsp,最后才fremaker.(当然因为相差时间是非常短暂的,所以对于用户影响很小.)

而我们今天只讲其中的三种来和springboot怎么整合?下面先讲解第一种:

FremarkerSpringboot整合,直接上代码吧,看项目结构

首先看一下pom.xml的配置文件内容

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>spring_boot</artifactId>
        <groupId>com.suning.springboot</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>spring_boot_fremarker</artifactId>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.2.RELEASE</version>
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>

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

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

    </dependencies>
</project>

写一个测试的controller

package com.springboot.fremarker.controller;

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

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @Author 18011618
 * @Description
 * @Date 10:46 2018/7/13
 * @Modify By
 */
//@RestController
@Controller
public class FremarkerController {
    @RequestMapping("/list")
    public String index(Map<String, Object> result) {
        result.put("name", "jhp");

        // 模拟数据
        List<Map<String, Object>> friends = new ArrayList<Map<String, Object>>();
        Map<String, Object> friend = new HashMap<String, Object>();
        friend.put("name", "wangli");
        friend.put("age", 28);
        friend.put("love","编程");
        friends.add(friend);

        friend = new HashMap<String, Object>();
        friend.put("name", "guoyanbin");
        friend.put("age", 29);
        friend.put("love","打游戏");
        friends.add(friend);

        friend = new HashMap<String, Object>();
        friend.put("name", "yaodong");
        friend.put("age", 26);
        friend.put("love","深蹲");
        friends.add(friend);

        result.put("friends", friends);

        return "list";
    }
}

看一下对应配置文件:

spring:
    freemarker:
        allow-request-override: false
        cache: true
        charset: UTF-8
        check-template-location: true
        content-type: text/html
        expose-request-attributes: false
        expose-session-attributes: false
        expose-spring-macro-helpers: false
        suffix: .ftl
        template-loader-path: classpath:/templates/  #模板保存的路径
server:
  port: 8888

再看一下模板文件:这里根据规则,模板文件名称应该叫list.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World!</title>
</head>
<body>
<center>
    <p>
        welcome ${name} to freemarker!
    </p>

    <h4>烧烤小分队成员:</h4>
       <#list friends as item>
               姓名:${item.name} , 年龄:${item.age},爱好:${item.love}
           <br>
       </#list>
</center>
</body>
</html>

最后写一个启动应用类:

package com.springboot.fremarker;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @Author 18011618
 * @Description
 * @Date 10:47 2018/7/13
 * @Modify By
 */
@SpringBootApplication
@EnableAutoConfiguration
public class FremarkerApplication {
    public static void main(String[] args) {
        SpringApplication.run(FremarkerApplication.class,args);
    }
}

这个时候在浏览器访问 http://localhost:8888/list 对应的结果如下所示:

效果就实现了,当然这个过程一开始让我出现了一个很纠结的问题,就是访问浏览器并没有结果而是直接返回了字符串,找了好长时间也没有找到原因,最后才发现因为@Controller@RestController的区别导致的,因为在使用springboot的时候,大家都倡导把@Controller替换为RestController来替代之前的@ResponseBody+@Controller功能,但是问题是

如果使用了@RestController,它是不会解析模板引擎的,直接返回http相关的内容,后来换成了@Controller就好了,第一种视图技术就演示完了,下面再看第二种

效果就实现了,当然这个过程一开始让我出现了一个很纠结的问题,就是访问浏览器并没有结果而是直接返回了字符串,找了好长时间也没有找到原因,最后才发现因为@Controller@RestController的区别导致的,因为在使用springboot的时候,大家都倡导把@Controller替换为RestController来替代之前的@ResponseBody+@Controller功能,但是问题是

如果使用了@RestController,它是不会解析模板引擎的,直接返回http相关的内容,后来换成了@Controller就好了,第一种视图技术就演示完了,下面再看第二种

ThymeleafSpringBoot整合:

直接上代码吧,看项目结构:

看一下对应的Pom.xml的内容:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <artifactId>spring_boot_thymeleaf</artifactId>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.2.RELEASE</version>
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

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

        <!--支持web开发-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

    </dependencies>

</project>

写一个测试的controller:

package com.springboot.thymeleaf;

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

import java.util.Map;

/**
 * @Author 18011618
 * @Description
 * @Date 11:14 2018/7/13
 * @Modify By
 */
@Controller
public class ThhmeleafController {
    /**
     * 返回html模板.
     */
    @RequestMapping("/list")
    public String helloHtml(Map<String,Object> map){
        map.put("hello","wecome to thymeleaf world!");
        return "hello";
    }
}

写一个启动应用类:

package com.springboot.thymeleaf;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @Author 18011618
 * @Description
 * @Date 11:15 2018/7/13
 * @Modify By
 */
@SpringBootApplication
public class ThyApplication {
    public static void main(String[] args) {
        SpringApplication.run(ThyApplication.class,args);
    }
}

看一下对应的配置文件内容:applicaion.properties

########################################################
###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
server.port=8888

最后看一下模板文件内容:hello.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 THYMELEAF</h1>
<p th:text="${hello}"></p>
</body>
</html>

启动该类,并在浏览器端访问 http://localhost:8888/list 出现的结果如下所示:

这次第二种方案也成功整合了,下面看一下最后一种,对JSP的支持

JSPSpringBoot的整合:

看一下对应pom.xml配置文件内容:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <artifactId>spring_boot_jsp</artifactId>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.2.RELEASE</version>
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>
<dependencies>
    <!--支持JSP视图渲染-->
    <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>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <scope>provided</scope>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>

    <!--支持web开发-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

</dependencies>
</project>

写测试的controller

package com.springboot.jsp;

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

import java.util.Map;

/**
 * @Author 18011618
 * @Description
 * @Date 11:13 2018/7/13
 * @Modify By
 */
@Controller
public class JspController {
    @RequestMapping("/helloJsp")
    public String helloJsp(Map<String,Object> map){
        System.out.println("wecome to jsp world!");
        map.put("hello", "hello");
        return "hell";
    }

}

写一个对应的启动类:

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @Author 18011618
 * @Description
 * @Date 11:12 2018/7/13
 * @Modify By
 */
@SpringBootApplication
public class JspApplication {
    public static void main(String[] args) {
        SpringApplication.run(JspApplication.class,args);
    }
}

对应的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>
helloJsp
<hr>
${hello}

</body>
</html>

application.properties内容:

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

注意:这个和上面的两种就有区别了,上面的两种都是直接启动jar就可以看到效果,而这种一定要项目打包成war包,放到tomcat容器中之后,访问tomcat中的项目才有效果,具体就演示了,大家可以自己看一下效果.

springboot相关的视图技术就讲解完了.

版权声明:转载请标明博客地址谢谢!

 

 

 

 

 

 

 

 

 

 

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值