freemark页面静态化

页面静态化

什么是页面静态华

将动态页面转化成静态的html,降低与数据库的交互次数,提高页面的访问速度
就是服务器在请求来之前把已经固定好的东西先编译好了,等请求来了再动态的填数据,不要等请求来了什么都没做忙得半死
利用第三方提供的模板引擎,生成对应的html
thymeleaf
freemark
Velocity

为什么要使用网页静态化技术

网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力
而网页静态化比较适合大规模且相对变化不太频繁的数据。另外网页静态化还有利于SEO。
将网页以纯静态化的形式展现,就可以使用Nginx这样的高性能的web服务器来部署
Nginx可以承载5万的并发,而Tomcat只有几百

Freemarker

什么是 Freemarker

freemarker是apache的一个开源的模板引擎,它基于模板来生成文本输出。
freemaker模板引擎可以通过模板和数据生成静态化页面.

优点

  1. 提前根据模板和数据生成静态化页面通过io流将页面写入到硬盘上, 访问的时候直接访问.就不用访问数据库了, 可以大大提高数据库的高并发读取性能. 是数据库访问量降低.
  2. 由于页面是提前生成好的, 所以访问速度快, 客户体验好
  3. 由于html不需要tomcat解析浏览器可以直接访问, 所以给tomcat降低高并发访问压力.

使用场景

新闻网站新闻页面通过freemarker提前生成好
电商网站商品详情页面通过freemarker提前生成好
原则:页面有固定的样式, 并且一次生成多次读取, 尽量少的改动数据

运行过程

在这里插入图片描述

模板

模板在freemarker中是以.ftl为后缀名的文件, 在模板中可以使用html标签, css, js,图片等静态资源
模板中可以使用el表达式获取数据, 但是无法使用jstl标签来判断和循环, 所以模板引擎会有自己的一套
标签库供我们使用.

数据

数据一般存储在关系型数据库或者redis或者mongodb中获取.

模板文件中四种元素

  1. 文本,直接输出的部分
  2. 注释,即<#–…-->格式不会输出
  3. 插值(Interpolation):即${…}部分,将使用数据模型中的部分替代输出
  4. FTL指令:FreeMarker指令,和HTML标记类似,名字前加#予以区分,不会输出

入门程序

  1. 创建Maven工程
    在这里插入图片描述
  2. 引入pom依赖
<dependency>
		<groupId>org.freemarker</groupId>
		<artifactId>freemarker</artifactId>
		<version>2.3.23</version>
</dependency>  

  1. 创建模板文件
    在这里插入图片描述
<html>
<head>
    <meta charset="utf-8">
    <title>Freemarker入门小DEMO </title>
</head>
<body>
<#--注释内容  -->
${name},你好。${message}
</body>
</html>

  1. 生成文件
    创建一个测试类
    TestFreemarker
    在这里插入图片描述
public class TestFreemarker {
    /*
    第一步:创建一个 Configuration 对象,直接 new 一个对象。构造方法的参数就是 freemarker的版本号。
    第二步:设置模板文件所在的路径。
    第三步:设置模板文件使用的字符集。一般就是 utf-8.
    第四步:加载一个模板,创建一个模板对象。
    第五步:创建一个模板使用的数据集,可以是 pojo 也可以是 map。一般是 Map。
    第六步:创建一个 Writer 对象,一般创建一 FileWriter 对象,指定生成的文件名。
    第七步:调用模板对象的 process 方法输出文件。
    第八步:关闭流
     */
    public static void main(String[] args) throws Exception {
        //1.创建配置类
        Configuration configuration=new Configuration(Configuration.getVersion());
        //2.设置模板所在的目录(绝对路径)
        configuration.setDirectoryForTemplateLoading(new File("D:\\java\\撩课-高新强\\分布式项目(代码)\\code2\\FreeMarkerPro\\src\\main\\resources\\ftl"));
        //3.设置字符集
        configuration.setDefaultEncoding("utf-8");
        configuration.setOutputFormat(XMLOutputFormat.INSTANCE);
        //4.加载模板
        Template template = configuration.getTemplate("MyFreemark.ftl");
        //5.创建数据模型
        Map map=new HashMap();
        map.put("name", "joker");
        map.put("message", "welcome Freemarker");
        //6.创建Writer对象
        Writer out =new OutputStreamWriter(new FileOutputStream(new File("d:\\test.html")),"utf-8");
        //7.输出
        template.process(map, out);
        //8.关闭Writer对象
        out.close();
    }
}

点击测试
生成文件在D:test.html
在这里插入图片描述

FTL指令

assign指令

此指令用于在页面上定义一个变量
在这里插入图片描述

<#assign myname="Myxq--">
${myname}

定义对象类型
在这里插入图片描述

<#assign info={"name":"myxqName",'age':'30'} >
电话:${info.name}  地址:${info.age}

list指令

遍历数组
在这里插入图片描述

		List goodsList=new ArrayList();
        goodsList.add("goods1");
        goodsList.add("goods2");
        goodsList.add("goods3");
        Map map=new HashMap();
        map.put("goodsList",goodsList);
        //6.创建Writer对象
        Writer out =new OutputStreamWriter(new FileOutputStream(new File("d:\\test.html")),"utf-8");
        //7.输出
        template.process(map, out);

在这里插入图片描述

<#list goodsList as goods>
    ${goods_index} --- ${goods}
</#list>

遍历对象数组
在这里插入图片描述

		List userList=new ArrayList();
        User user1 = new User();
        user1.setName("myxq1");
        user1.setAge("30");
        userList.add(user1);

        User user2 = new User();
        user2.setName("myxq2");
        user2.setAge("31");
        userList.add(user2);

        Map map=new HashMap();
        map.put("users",userList);
        //6.创建Writer对象
        Writer out =new OutputStreamWriter(new FileOutputStream(new File("d:\\test.html")),"utf-8");
        //7.输出
        template.process(map, out);

在这里插入图片描述

<#list users as user>
    ${user_index} --- ${user.name}--${user.age}
</#list>

if指令

在这里插入图片描述

<#assign myname="myxq">

<#if myname="myxq">
    <h1>大标题1myxq</h1>
<#else>
    <h1>大标题2</h1>
</#if>

include指令

用于模板文件的嵌套
在这里插入图片描述

<#include "header.ftl">

内建函数

内建函数语法格式

变量+?+函数名称

获取集合大小

在这里插入图片描述

共  ${users?size}  个元素

转换JSON字符串为对象

在这里插入图片描述

<#assign text="{'name':'myxq','age':'18'}" />
<#assign data=text?eval />
姓名:${data.name}  年龄:${data.age}

日期格式化

在这里插入图片描述

		Map map=new HashMap();
        map.put("users",userList);

        map.put("today",new Date());

在这里插入图片描述

当前日期:${today?date} <br>
当前时间:${today?time} <br>
当前日期+时间:${today?datetime} <br>
日期格式化:  ${today?string("yyyy年MM月")}

数字转换为字符串

数字直接显示,会出现逗号
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

去除逗号
在这里插入图片描述

空值处理运算符

如果在模板中使用了变量但是在代码中没有对变量赋值,那么运行生成时会抛出异常
可以使用"??"判断某变量是否存在
在这里插入图片描述

${price?c}


<#if price??>
    price变量存在
<#else>
    price变量不存在
</#if>

缺失变量默认值:“!”

可以判断是否为空值,也可以使用!对null值做转换处理
当为空时, 会使用默认值代替

在这里插入图片描述

${price!'变量为空哦'}

运算符

算数运算符

FreeMarker支持的算术运算符包括:+, - , * , / , %
在这里插入图片描述

逻辑运算符

逻辑与:&&
逻辑或:||
逻辑非:!
逻辑运算符只能作用于布尔值,否则将产生错误

比较运算符

1 =或者==:判断两个值是否相等
2 !=:判断两个值是否不等.
3 >或者gt:判断左边值是否大于右边值
4 >=或者gte:判断左边值是否大于等于右边值
5 <或者lt:判断左边值是否小于右边值
6 <=或者lte:判断左边值是否小于等于右边值

注意事项
=和!=可以用于字符串,数值和日期来比较是否相等
=和!=两边必须是相同类型的值,否则会产生错误

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值