模板引擎

  1. jsp

html + java代码 =》 Servlet类 =》 放到容器中执行
缺点 繁杂而不利于维护 本质上是“模板” 通过规则和标签抽象出来的
2）模板引擎
freemarker velocity thymeleaf beetl(国人开创 据说性能很高)
image.png
image.png

3）基于api的前后端分离
web服务器：解析静态资源 如 nginx apache （前台接待 — 外网访问）
应用服务器：解析动态+静态资源 如tomcat jetty (核心价值提供者 — 内网访问)
nginx（前端代码） —> ajax 请求api —> tomcat（服务端代码） 数据格式json

FreeMarker

1.引入依赖

  1. <dependency>
  2.   <groupId>org.springframework.boot</groupId>
  3.     <artifactId>spring-boot-starter-freemarker</artifactId>
  4. </dependency>

2.路径配置

server:
  port: 8090


spring:
  mvc:
    view:
      #文件位置，不能修改
      prefix: /templates/
      #文件后缀
      suffix: .ftl

3.编写页面
index.ftl

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title></title></head>
<body>
    Hi FreeMarker. 现在时间是 ${now} <br>
    ${"Hi FreeMarker. 现在时间是 ${now} !"} <br>
    ${"Hi FreeMarker. 现在时间是 " + now+ " !"}
</body>
</html>

FTLController.java

package com.duing.springbootdemo03.controller;

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

import java.util.Date;

@Controller
public class FTLController {

    @RequestMapping("/ftl")
    public String index(Model model){
        model.addAttribute("now",new Date().toString());
        return "index";
    }
}

image.png

Thymeleaf(官方推荐)

image.png
1.引入依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
        <!-- https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect -->
<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
    <version>2.3.0</version>
</dependency>

2.在main/resources目录下，创建templates文件夹，创建html文件
文件中引入，获取对标签的提示
image.png
image.png
3.简单应用
①变量表达式

package com.duing.springbootdemo03.controller;

import com.duing.springbootdemo03.bean.Restaurant;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ThymeleafController {

    @RequestMapping("/thyme")
    public String index(Model model){
        Restaurant restaurant=new Restaurant();
        restaurant.setBoss("黄晓明");
        restaurant.setChef("林大厨");
        model.addAttribute("name","<h1>klxh</h1>");
        model.addAttribute("restaurant",restaurant);
        return "/thymeleaf/index";
    }
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <p th:text="${name}" >name</p>
  <p th:utext="${name}" >name</p>
    <p th:text="${restaurant.boss}">restaurant boss</p>
    <p th:text="${restaurant.chef}">restaurant chef</p>
</body>
</html>

image.png
注意，th:text不会解析标签，传入什么就展示什么，而th:utext会解析标签

②选择变量表达式
index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:object="${restaurant}">
    <p>boss: <span th:text="*{boss}">boss</span></p>
    <p>chef: <span th:text="*{chef}">chef</span></p>
</div>
</body>
</html>

image.png

③链接url表达式
index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="/welcome" th:href="@{/welcome}">welcome</a>
</body>
</html>

welcome.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>welcome</h1>
</body>
</html>

Thymeleaf.java

package com.duing.springbootdemo03.controller;

import com.duing.springbootdemo03.bean.Restaurant;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ThymeleafController {

    @RequestMapping("/thyme")
    public String index(Model model){
        Restaurant restaurant=new Restaurant();
        restaurant.setBoss("黄晓明");
        restaurant.setChef("林大厨");
        model.addAttribute("name","<h1>klxh</h1>");
        model.addAttribute("restaurant",restaurant);
        return "/thymeleaf/index";
    }

    @RequestMapping("/welcome")
    public String welcome(){
        return "/thymeleaf/welcome";
    }
}

image.png
image.png

④消息表达式
index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="#{something}">message</p>
</body>
</html>

image.png
something=快乐每一天
image.png

⑤片段表达式
image.png
footer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <footer th:fragment="copy">&copy; 2019</footer>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:insert="footer :: copy"></div>
    <div th:replace="footer :: copy"></div>
    <div th:include="footer :: copy"></div>
</body>
</html>

image.png
对应index.html中的三句，转化成如下
image.png

image.png