freemarker 页面静态化技术

article/2025/10/29 18:59:11

文章目录

    • 一.背景
    • 二.页面静态化技术freemarker
    • 三.Freemarker基本操作
      • 1.引入依赖:
      • 2.创建模板文件:
      • 3.FTL指令:
    • 四.freemarker整合spring
    • 五.总结:
      • 1.什么是网页静态化技术
      • 2.网页静态化技术与缓存技术的比较
      • 3.网页静态化技术的应用场景
      • 4.什么是FreeMarker

一.背景

用户访问动态页面时都需要通过ajax发送请求查询数据库获取动态数据进行展示,但是这页面的访问量如果比较大且数据库中的数据变化频
率并不高,这就会对数据库造成了很大的访问压力。如何对数据库减压并提高系统运行性能呢?答案就是页面静态化。

页面静态化其实就是将原来的动态网页(例如通过ajax请求动态获取数据库中的数据并展示的网页)改为通过静态化技术生成的静态网页,这样用户在访问网页时,服务器直接给用户响应静态html页面,没有了动态查询数据库的过程。

二.页面静态化技术freemarker

FreeMarker 是一个用 Java 语言编写的模板引擎,它基于模板来生成文本输出。FreeMarker与 Web 容
器无关,即在 Web 运行时,它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术,而且还
可以用于生成 XML,JSP 或 Java 等。

在这里插入图片描述

三.Freemarker基本操作

1.引入依赖:

<dependency> 	<groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.23</version> 
</dependency>

2.创建模板文件:

模板文件中有四种元素:

  • html原生文本
  • 注释,即<#-- -->
  • 插值::即${…}部分,将使用数据模型中的部分替代输出
  • FTL指令::FreeMarker指令,和HTML标记类似,名字前加#予以区分,不会输出
    freemarker模板文件后缀一般为 .ftl

编写模板文件:

<html> <head><meta charset="utf-8"> <title>Freemarker入门</title> </head><body>
<#--我只是一个注释,我不会有任何输出 -->${name}你好,${message} </body>
</html>

通过java结合模板文件生成html文件

public static void main(String[] args) throws Exception{ //1.创建配置类 Configuration configuration=new Configuration(Configuration.getVersion()); //2.设置模板所在的 目录 configuration.setDirectoryForTemplateLoading(new File("D:\\ftl")); //3.设置字符集 configuration.setDefaultEncoding("utf-8"); //4.加载模板 (模板目录下以ftl后缀的模板文件)Template template = configuration.getTemplate("test.ftl"); //5.创建数据模型 Map map=new HashMap(); map.put("name", "张三"); map.put("message", "欢迎!"); //6.创建Writer对象 ,创建html生成的目录Writer out =new FileWriter(new File("d:\\test.html")); //7.输出 template.process(map, out); //8.关闭Writer对象 out.close(); }

生成的html文件如下:(对应的$ {name}、$ {message}被成功替换)

<html> <head><meta charset="utf-8"> <title>Freemarker入门</title> </head><body>张三你好,欢迎 </body>
</html>

3.FTL指令:

  • assign指令:用于在页面上定义一个变量
  1. 定义一个简单类型

<#assign linkman=“周先生”>
联系人:${linkman}

  1. 定义一个json对象

<#assign info={“mobile”:“123456”,‘address’:‘地球’} >
电话:$ {info.mobile} 地址:$ {info.address}

  • include指令:用于模板文件的嵌套。一个模板引入另一个模板
<!--head.ftl-->
<h1> hello</h1>
<!--test.ftl-->
<#include "head.ftl"/>
<br>
world

最终生成的html文件

<h1>hello</h1>
<br>
world
  • if 指令:在模板文件中使用指令进行判断
<#if success=true>你已通过实名认证 
<#else>你未通过实名认证 
</#if>

在java中:

map.put("success", true);
  • list指令:list指令用于遍历

模板文件

<#list>
商品名称: ${goods.name} 价格:${goods.price}
<br>
</#list>

java代码

List goodsList=new ArrayList(); 
Map goods1=new HashMap(); 
goods1.put("name", "苹果"); 
goods1.put("price", 5.8); 
Map goods2=new HashMap(); 
goods2.put("name", "香蕉"); 
goods2.put("price", 2.5); 
Map goods3=new HashMap(); 
goods3.put("name", "橘子"); 
goods3.put("price", 3.2); 
goodsList.add(goods1); 
goodsList.add(goods2); 
goodsList.add(goods3); 
map.put("goodsList", goodsList);

以上就是freemarker的基本用法,但是在实际开发中freemarker要远远复杂的多。

四.freemarker整合spring

依赖引入和上面一样:

<dependency> 	<groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.23</version> 
</dependency>

spring配置文件:

<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> 
<!--指定模板文件所在目录--> <property name="templateLoaderPath" value="/WEB-INF/ftl/" /><!--指定字符集--><property name="defaultEncoding" value="UTF-8" /> 
</bean> <context:property-placeholder location="classpath:freemarker.properties"/>
//生成的html文件所存放的位置
out_put_path=D:/ideaProjects/zj/health_mobile/src/main/webapp/pages

通用生成html文件样式:

/**
* templateName模板文件的名称
* htmlPageName生成html文件的名称
* map  给${} 赋值的映射关系
*/public void generteHtml(String templateName,String htmlPageName,Map map){Configuration configuration = freeMarkerConfigurer.getConfiguration();//获得配置对象Writer out = null;try {Template template = configuration.getTemplate(templateName);//构造输出流out = new FileWriter(new File(outPutPath + "/" + htmlPageName));//输出文件template.process(map,out);out.close();} catch (Exception e) {e.printStackTrace();}}

五.总结:

1.什么是网页静态化技术

随着用户访问量以及数据量的增大,网页静态化技术方案如今越来越流行。
什么是网页静态化技术呢?简单来说就是将网页以纯静态方式的形式展现。

2.网页静态化技术与缓存技术的比较

共同点:都可以减小数据库的访问压力。

区别:

(1)缓存技术(例如redis)适用于小规模的数据。以及一些经常变动的数据

(2)网页静态化技术适用于大规模但是变化不太频繁的数据

3.网页静态化技术的应用场景

(1)新闻门户网站的文章类型频道一般都用到了网页静态化技术。点击新闻直接会跳到静态化的页面。
(2)电商网站的商品详情页也十分常用,我们在存储商品的时候会生成静态化页面,点击商品详情,会直接跳到生成的商品详情的静态化页面。
(3)网页静态化技术可以结合Nginx这种高性能web服务器来提高并发访问量。

4.什么是FreeMarker

FreeMarker是一款用Java语言编写的模板引擎,用它可以通过模板和要改变的数据来生成输出文本(例如HTML网页,配置文件,源代码等),作为用来实现网页静态化技术的一种手段。FreeMarker的使用率大大超过其他一些技术。对于系统中频繁使用数据库进行查询但是内容更新很小的应用,都可以用FreeMarker将网页静态化,这样就避免了大量的数据库访问请求,从而提高网站的性能。

其他链接:
freemarker官网


http://chatgpt.dhexx.cn/article/A4AhAPg5.shtml

相关文章

springboot 页面静态化

springboot 页面静态化 页面静态化&#xff1a;将动态渲染的页面保存为静态页面&#xff08;一般存储在nginx&#xff09;&#xff0c;提高访问速度 说明&#xff1a;页面静态化适用于数据不常变更的场景&#xff0c;如果数据频繁变更&#xff0c;宜使用其他方案提高访问性能 …

PHP 页面静态化

前言 随着网站的内容的增多和用户访问量的增多&#xff0c;网站加载会越来越慢&#xff0c;受限于带宽和服务器同一时间的请求次数的限制&#xff0c;我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化。 一、页面静态化概念 静态化定义 静态化就是指把原本的动态…

页面静态化

前言 我们在使用购物网站的时候&#xff0c;会选择相应的商品点击查看详情&#xff0c;其实会发现每件商品的商品详情页面都是差不多的&#xff0c;除了一些数据外&#xff0c;其余结构布局都是一模一样的&#xff0c;那么是为每件商品都写一个详情页面吗&#xff1f;很显然这…

img标签图片自适应的样式

问题&#xff1a; img标签宽高固定的情况下&#xff0c;上传的图片尺寸不一致&#xff0c;会导致图片被拉伸变形&#xff0c;影响页面美观。 解决方法&#xff1a; 用css3的object-fit 属性、object-position 属性可以解决&#xff0c;代码如下&#xff1a; <!DOCTYPE htm…

图片自适应屏幕大小

有时候美工给过来的图片不规范&#xff0c;用户手机屏幕大小不一样。可能导致在不同的用户手机上显示效果不一样&#xff0c;这时候需要对图片的显示做自适应。 一把来说自适应可以根据需求&#xff0c;做成宽高固定显示屏幕大小。但对于一些长图可能出现图片被压缩在一个屏幕…

响应式图像--图片自适应大小

Foreword 做项目的过程中遇到了一个图片拉伸的问题&#xff0c;做的是手机端的页面&#xff0c;当让其以电脑端页面显示的时候&#xff0c;图片被拉伸的有那么点丑&#xff01;所以改改它&#xff01; Why 为什么会出现这样的情况呢&#xff1f; 1、因为图片是放在盒子…

HTML网页图片背景以及图片自适应设置

关于HTML网页图片背景以及图片自适应设置 Test 1 背景图片需要用到标签中的background属性 图片背景需要显示的位置是网页的身体部分即在body中显示&#xff0c;因此background属性应该放在body标签内 本次使用图片的大小为4808*2704像素&#xff0c;这是图片原来的样子 这是…

html图片自动适应,css如何让图片自适应?

要使图片能够自适应显示&#xff0c;我们一般可以通过设置CSS样式&#xff0c;让图片作为父元素的背景图片&#xff0c;再设置相关属性来实现。下面我们来看一下使用css设置图片自适应的方法。 css设置图片自适应示例&#xff1a; HTML代码&#xff1a;title css代码&#xff1…

【前端】js实现图片自适应

前言&#xff1a; 前几天写第一版代码的时候&#xff0c;测试跟我说&#xff0c;你这用户上传图片显示有问题啊&#xff0c;图像不是被拉宽就是被拉长了&#xff0c;不行啊。因为我给el-image设计的是固定长宽&#xff0c;如果图片不是这个比例&#xff0c;那直接就会变形了&am…

谈一下图片的自适应

在工作中经常遇到要求图片自适应的需求&#xff0c;下面就谈一下我在工作中经常使用的一些方法 单独使用img标签的情况 单独使用img的时候&#xff0c;可以只设置width就可以了&#xff0c;height不用设置&#xff0c;因为img不设置height&#xff0c;它会自动根据图片的比例…

浅谈图片宽度自适应解决方案

在网页设计中&#xff0c;随着响应式设计的到来&#xff0c;各种响应式设计方案层出不穷。对于图片响应式的问题也有很多前端开发人员在进行研究。比较好的图片响应式设想便是在不同的屏幕分辨率下使用不同实际尺寸的图片&#xff0c;而达到在高速网络环境中使用大或超大高清图…

浅谈图片展示、图片自适应解决方案

文章目录 导读CSS 解决方案background-size&#x1f437;background-size: contain&#xff1b;&#x1f437;background-size&#xff1a;100%&#xff1b;&#x1f437;background-size:cover; object-fit&#x1f437;object-fit: contain&#xff1b;&#x1f437;object-f…

实时即未来,大数据项目车联网之项目基石与前瞻【一】

文章目录 写在前面车联网项目全新升级 车联网行业背景介绍车联网技术汽车行业新能源汽车 车联网行业技术车辆网行业产业链与国内知名企业 车联网项目车联网技术架构和技术选型车联网项目的架构搭建 写在前面 车联网项目全新升级 更全 8-》21篇 更细 -》 图文并茂、部分代码首…

开发一个大数据项目的架构与流程

如果我们想做一个数据分析项目&#xff0c;我们就应该清楚数据的处理流程。 我们大致可以分为: 数据采集——数据存储——数据清洗——数据分析——数据可视化和数据挖掘、二次分析 在以上流程处理完成之后&#xff0c;会进入调度阶段&#xff1a;将数据采集、清洗、分析、导出…

大数据项目大致流程

1、提出需求-需要和多个部门负责人进行协商&#xff1a;关于项目的可行性分析 2、需求分析-进行需求调研&#xff08;研究竞品&#xff09;、市场调研&#xff0c;如果是给甲方做产品&#xff0c;需要和甲方协商需求细则 3、技术选型-需要多个开发部门的人员参与协商 考虑的…

大数据项目之电商数仓、数据仓库概念、项目需求及架构设计

文章目录 1.数据仓库概念2. 项目需求及架构设计2.1 项目需求分析2.1.1 采集平台2.1.2 离线需求2.1.3 实时需求2.1.4 思考题 2.2 项目框架2.2.1 技术选型2.2.2 系统数据流程设计2.2.3 框架版本选型2.2.3.1 Apache框架版本 2.2.4 服务器选型2.2.4.1 物理机&#xff1a;2.2.4.2 云…

大数据项目开发进度(实时更新)

文章目录 前言项目概述项目进度第一周0525-0529&#xff1a;第二周0601-0605&#xff1a;第三周0608-0612&#xff1a;第四周0615-0621&#xff1a;&#xff08;周末加班&#xff09;第五周0622-0628&#xff1a;&#xff08;周末加班&#xff09;第六周0629-0705&#xff1a;&…

大数据项目需求分析

以大数据项目为主线&#xff0c;技术理论与项目实践相结合&#xff0c;按照大数据项目的开发流程逐步推进&#xff0c;本文主要讲解项目的需求分析、架构设计以及离线和实时数据流程设计&#xff0c;然后提前规划好大数据项目需要的集群&#xff0c;按照项目的实现逻辑&#xf…

大数据项目篇--项目架构图

文章目录 离线架构离线架构-表信息离线架构-ETL信息 实时架构 离线架构 离线架构-表信息 离线架构-ETL信息 实时架构