springbootSpring Boot全家桶

Spring Boot视图技术

2020-07-03  本文已影响0人  狄仁杰666

前言

经过前2期文章（见上面链接）的学习，我们学会了如何建立Spring Boot项目、如何在Spring Boot框架底下开发API、如何开发具备数据库交互的API等。但联系到实际情况，我们会发现这样的项目远远不够，至少：

缺少用户交互界面！

咱们今天就在之前的基础上，简单开发一个用户交互界面！其中用到的主要技术是：视图技术！

什么是视图技术

我们这里指的是Spring Boot MVC中的后端视图技术，也即MVC（Model View Controller）中的V（View）。视图技术又分：
1. 使用模板引擎，后端渲染模板，把渲染好的页面，发送给客户端展示；
2. JSON序列化技术Jackson。

我们今天学习的是第一种，即模板引擎。Spring Boot 在视图引擎上就已经集成自动配置的模版引擎有：

(JSP技术Spring Boot官方是不推荐的，但也是可以集成的，我们此处就不做研究了...)
其中FreeMarker和Thymeleaf是最常用的2种模版引擎，我们今天就来学习下这2种模板引擎如何在Spring Boot框架下使用！
在介绍之前，我们先在项目目录src/main/resources底下建文件夹templates：

templates文件夹

1）FreeMarker

1. 添加项目依赖；
2. 修改配置文件；
3. 创建模板文件；
4. 编写Controller；
5. 编写模板文件；
6. 启动项目，浏览器访问页面；

1. 添加项目依赖；
在pom.xml文件内的dependencies节点下添加以下依赖：

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

2. 修改配置文件；
在src/main/resources/application.properties文件内添加freemarker的配置：

#configuration for Freemarker
spring.freemarker.template-loader-path=classpath:/templates/
spring.freemarker.suffix=.ftl
spring.freemarker.charset=UTF-8

3. 创建模板文件；
在src/main/resources/templates下创建.ftl文件，如FreeMarkerDemo.ftl：

FreeMarkerDemo

4. 编写Controller；
在LeadController内添加2个方法，用来演示FreeMarker视图引擎：

    @GetMapping("/{leadId}/FreeMarkerDemo1.html")
    public ModelAndView showLeadByFreeMarker(@PathVariable("leadId") Integer leadId) {
        Lead lead = leadService.getLead(leadId);
        ModelAndView view = new ModelAndView();
        view.addObject("lead", lead);
        view.setViewName("FreeMarkerDemo");
        return view;
    }

    @GetMapping("/{leadId}/FreeMarkerDemo2.html")
    public ModelAndView showLeadByFreeMarker(@PathVariable("leadId") Integer leadId, ModelAndView view) {
        Lead lead = leadService.getLead(leadId);
        view.addObject("lead", lead);
        view.setViewName("FreeMarkerDemo");
        return view;
    }

//1. view.setViewName("FreeMarkerDemo");代表指向的是resources/templates/FreeMarkerDemo.ftl模板；
//2.上述2个写法都能达到一样的目的，只是写法不太一样而已，一个view在方法体内实例化，一个是方法入参；

5. 编写模板文件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarkerDemo</title>
</head>
<body>
    <input type="text" value="${lead.leadId}"/>
    <input type="text" value="${lead.email}"/>
</body>
</html>

6. 启动项目，浏览器访问页面；

2）Thymeleaf

1. 添加项目依赖；
2. 修改配置文件；
3. 创建模板文件；
4. 编写Controller；
5. 编写模板文件；
6. 启动项目，浏览器访问页面；

1. 添加项目依赖；
在pom.xml文件内的dependencies节点下添加以下依赖：

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

2. 修改配置文件；
在src/main/resources/application.properties文件内添加Thymeleaf的配置：

#configuration for Thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8

3. 创建模板文件；
在src/main/resources/templates下创建HTML文件，如ThymeleafDemo.html：

ThymeleafDemo
4. 编写Controller；
在LeadController内添加2个方法，用来演示Thymeleaf视图引擎： 
    @GetMapping("/{leadId}/ThymeleafDemo1.html")
    public ModelAndView showLeadByThymeleaf(@PathVariable("leadId") Integer leadId) {
        Lead lead = leadService.getLead(leadId);
        ModelAndView view = new ModelAndView();
        view.addObject("lead", lead);
        view.setViewName("ThymeleafDemo");
        return view;
    }

    @GetMapping("/{leadId}/ThymeleafDemo2.html")
    public ModelAndView showLeadByThymeleaf(@PathVariable("leadId") Integer leadId, ModelAndView view) {
        Lead lead = leadService.getLead(leadId);
        view.addObject("lead", lead);
        view.setViewName("ThymeleafDemo");
        return view;
    }

//1. view.setViewName("ThymeleafDemo");代表指向的是resources/templates/ThymeleafDemo.html模板；
//2.上述2个写法都能达到一样的目的，只是写法不太一样而已，一个view在方法体内实例化，一个是方法入参；

5. 编写模板文件；

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ThymeleafDemo</title>
</head>
<body>
    <input type="text" th:value="${lead.leadId}"/>
    <input type="text" th:value="${lead.email}"/>
</body>
</html>
#1.注意关键代码：xmlns:th="http://www.thymeleaf.org" ；或xmlns:th="http://www.w3.org/1999/xhtml"；
#2.要把html节点属性通过渲染赋值的话，需要在属性前使用标识：“th:”；
#3.渲染的数据来源是controller中设置的：view.addObject("lead", lead);
#4.可以取设置的object内的数据，如：${lead.leadId}，指的是lead对象内的leadId这个数据；

6. 启动项目，浏览器访问页面;

如果数据源是个数组类型的数据，如数据源leads：

[
    {
        "leadId": 123,
        "email": "123@XXX.com"
    },
    {
        "leadId": 321,
        "email": "321@XXX.com"
    }
]

那么可以这么遍历进行展示：

#FreeMarker
<#list leads as lead>
    <tr>
        <td>${lead.leadId</td>
        <td>${lead.email}</td>
    </tr>
</#list>

#Thymeleaf
<tr th:each="lead : ${leads}">
    <td th:text="${lead.leadId}"></td>
    <td th:text="${lead.email}"></td>
</tr>

我们还可以在模板文件内设置html的样式，包括引用css文件，这样页面就能满足美观性方面的需求了，关于这块可自行脑补。

模板引擎语法、详细介绍

模板引擎应用场景

现在都在提倡前后端分离，而模板引擎其实还是有一定的使用场景的，我目前能想到的应用场景有（欢迎指正、添加）：
1. 页面为简单的表单式页面；
2. 无前后端分离需求，且希望快速建立简单交互界面的；
3. 可能出于某种安全考虑，如不希望客户端知道API返回的数据结构时，采用模板引擎策略在服务端渲染页面；
4. 由于某些特殊原因，如需兼容多端等，需要在服务端渲染页面的；
...

码字不容易，点赞需积极

谢谢！！！

上一篇下一篇

猜你喜欢

热点阅读