页面静态化技术：FreeMarker

背景： 为了实现页面的管理和快速上线，需要用到页面静态化
如何： 页面静态化就是使用 模板+数据，通过技术手段将两者合二为一，生成一个html页面
业务流程：

获取模型所需要的数据
制作模版
利用静态化技术生成html
将html页面存放在文件系统中
从文件系统中取出发布到网页上

学习freemarker

1.导入freemarker的依赖

<dependencies>
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-freemarker</artifactId>
   </dependency>
   <dependency>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
   </dependency>
   <dependency>
       <groupId>com.squareup.okhttp3</groupId>
       <artifactId>okhttp</artifactId>
   </dependency>
   <dependency>
       <groupId>org.apache.commons</groupId>
       <artifactId>commons-io</artifactId>
   </dependency>
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-test</artifactId>
   </dependency>
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
   </dependency>
</dependencies>

2.在resource目录下创建配置文件application.yml

server:
  port: 8088 #服务端口
spring:
  application:
    name: test-freemarker #指定服务名
  freemarker:
    cache: false #关闭模板缓存，方便测试
    settings:
      template_update_delay: 0 #检查模板更新延迟时间，设置为0表示立即检查，如果时间大于0会有缓存不方便 进行模板测试

3.在 src/main/resources下创建templates，此目录为freemarker的默认模板存放目录，名字不要更改
在templates下创建模板文件test1.ftl，模板中的${name}最终会被freemarker替换成具体的数据。

    <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf‐8">
       <title>Hello World!</title>
   </head>
   <body>
   Hello ${name}!
   </body>
   </html>

4.创建启动类

@SpringBootApplication
public class FreemarkerTestApplication {
    public static void main(String[] args) {
        SpringApplication.run(FreemarkerTestApplication.class,args);
    }
}

5.创建模板数据类

@Data
@ToString
public class Student {
    private String name;//姓名
    private int age;//年龄
    private Date birthday;//生日
    private Float money;//钱包
    private List<Student> friends;//朋友列表 private Student bestFriend;//最好的朋友
}

6.创建controller

@Controller
@RequestMapping("/freemarker")
public class FreemarkerController {

    @RequestMapping("/test1")
    public String freemarker(Map<String,Object> map){
        map.put("name","奥特曼");
        return "test1";
    }
}

7.访问工程，端口为8088

freemarker的基础语法

1.注释：<#–注释–>
2.差值表达式：${name}，从模板中取出数据的
3.ftl表达式，接下来要重点学习的
4.文本，就是不用任何表达式的纯文本，直接展示在页面上

创建模板

@Controller
@RequestMapping("/freemarker")
public class FreemarkerController {

    @RequestMapping("/test1")
    public String freemarker(Map<String,Object> map){
        map.put("name","奥特曼");
        //向数据模型放数据 map.put("name","黑马程序员");
        Student stu1 = new Student();
        stu1.setName("小明");
        stu1.setAge(18);
        stu1.setMoney(1000.86f);
        stu1.setBirthday(new Date());
        Student stu2 = new Student();
        stu2.setName("小红");
        stu2.setMoney(200.1f);
        stu2.setAge(19);
        stu2.setBirthday(new Date());
        List<Student> friends = new ArrayList<>();
        friends.add(stu1);
        //给学生2设置朋友列表
        stu2.setFriends(friends);
        //给学生2设置最好的朋友为学生1
        stu2.setBestFriend(stu1);
        List<Student> stus = new ArrayList<>();
        stus.add(stu1);
        stus.add(stu2);
        //向数据模型放数据
        map.put("stus",stus);
        //准备map数据
        HashMap<String,Student> stuMap = new HashMap<>();
        stuMap.put("stu1",stu1);
        stuMap.put("stu2",stu2);
        //向数据模型放数据
        map.put("stu1",stu1);
        //向数据模型放数据
        map.put("stuMap",stuMap);
        //返回模板文件名称
        return "test1";
    }
}

list表达式：

<#list stus as stu>
<#--如果使用序号-->
<td>${stu_index}</td>
<td>${stu.name}</td>
…… ……
</list>

栗子

<body>
    Hello ${name}!
    <br/>
    使用list指令
    <br/>
    <table>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>生日</td>
            <td>钱包</td>
        </tr>
        <#list stus as stu>
            <tr>
                <td>${stu_index+1}</td>
                <td>${stu.name}</td>
                <td>${stu.age}</td>
                <td>生日</td>
                <td>${stu.money}</td>
            </tr>
        </#list>

    </table>
</body>

Map表达式：

获取map列表中的数据
    1。通过[]来获取数据<br/>
    姓名：${stuMap['stu1'].name}<br/>
    年龄：${stuMap['stu1'].age}<br/>
    <br/>
    2.通过点来获取数据<br/>
    姓名：${stuMap.stu1.name}<br/>
    年龄：${stuMap.stu1.age}
    <br/>
    3.遍历Map
    <table>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>钱包</td>
        </tr>
        <#list stuMap?keys as key>
            <tr>
                <td>${key_index+1}</td>
                <td>${stuMap[key].name}</td>
                <td>${stuMap[key].age}</td>
                <td>${stuMap[key].money}</td>
            </tr>
        </#list>
    </table>

if表达式

如果年龄大于18岁背景颜色就为绿色

<#--注意中间的括号是要加上的-->
<td <#if (stuMap[key].age>18)> bgcolor="blue" </#if>>${stuMap[key].name}</td>
或者不加括号
<td <#if stuMap[key].age &gt 18> bgcolor="blue" </#if>>${stuMap[key].name}</td>

空值处理

1.判断某个变量是否存在，使用"??"。栗子：list??，如果存在返回true，不存在返回false,一般用在集合或者是对象上面

<#if list??>
  ………………          
</#if>

2.缺失变量默认值使用 “!” 使用!要以指定一个默认值，当变量为空时显示默认值。
例: ${name!’’}表示如果name为空显示空字符串。
如果是嵌套对象则建议使用()括起来。

年龄：${(stuMap.stu1.age)!''}

内建函数

内建函数语法格式: 变量+?+函数名称
1.显示某个集合的大小

size:${stus?size}

2.显示日期

显示年月日: ${today?date} 
显示时分秒:${today?time} 
显示日期+时间:${today?datetime}  
自定义格式化: ${today?string("yyyy年MM月")}

3.内建函数c
map.put(“point”, 102920122); point是数字型，使用${point}会显示这个数字的值，不并每三位使用逗号分隔。如果不想显示为每三位分隔的数字，可以使用c函数将数字型转成字符串输出 ${point?c}
4.将json字符串转成对象
一个例子:
其中用到了 assign标签，assign的作用是定义一个变量。

<#assign text="{'bank':'工商银行','account':'10101920201920212'}" /> 
<#assign data=text?eval />
开户行:${data.bank} 
账号:${data.account}