openresty 页面静态化及多级缓存

article/2025/10/29 18:42:17

openresty 页面静态化及多级缓存

在这里插入图片描述

多级缓存：

  • 数据缓存的好处不用介绍了吧！，
    所谓多级缓存，即在整个系统架构的不同系统层级进行数据缓存，以提升访问效率，这也是应用最广的方案之一。
  • 而 nginx 是可以缓存数据的，缓存在内存中，提高程序性能！
    程序中可以做缓存的技术有很多，加在以前就叫 多级缓存 而且不同的缓存技术存在，在不同的地方..实现不同的功能！
  • 目前我所知道可以做缓存的有：
    nginx —— Elasticearch —— redis —— @Ehcache JVM缓存 —— mybatis也有二级缓存！太强了！
    当然本章并不会讲解这么多，而是抽出几个来： nginx redis @Ehcache JVM缓存

页面静态化 模板渲染

  • 动态web网页开发是Web开发中一个常见的场景
    比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。
    而Lua中也有许多模板引擎 lua-resty-template 可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。

什么是动态页面？什么是静态页面？

  • 动态网页： 是以.asp、.jsp、.php、.perl、.cgi等形式为后缀，
    根据用户的不同的操作，呈现出不同的数据给用户看；
    eg: 浏览器的 搜索~ 输入不同的关键字 会呈现给用户不同的内容；

  • 静态页面： 静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。
    静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面，
    如果想更新网页内容，要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）常见的静态页面举例：.html扩展名的、.htm扩展名的

  • 除了静态页面和动态页面还有一种的伪静态页面，在网站页面转化的时候大多转化成伪静态页面。

为什么需要页面静态化

  • 网页静态化有利于搜索引擎收录，静态页面和动态页面想对比来说，搜索引擎更喜欢静态页面
    对于静态页面也更好抓取收录，这样对于网站优化来说有很大的好处，更利于排名
    你可以去观察那些大型的门户网站，比如新浪、阿里巴巴、百度等页面大多采用静态或伪静态页面来显示，可想而知，这足够说明了静态化带给网站很大好处。

  • 网页静态化有利于网站的稳定性
    首先从安全角度来看，静态页面不容易遭受黑客的攻击，
    黑客从你的网址中看不出你网站的后台、网站的程序、数据库的地址，这样就比动态页面要安全的多。
    还有就是静态页面不会因为程序、数据库等出问题，影响网站的正常打开静态页面会使网站更加稳定，增加网站的信任度。

  • 网页静态化有利于提高速度
    SEO网站优化的一个很重要的因素就是网站打开速度的快慢，打开速度越快，SEO优化效果越好…
    众所周知动态页面打开都是要调用数据库内容，这样就影响了网站速度，而静态页面则不用，减少了环节，提高了网站反映速度。

实例Demo

Boot 多级缓存设置：

这里是 redis 和 Ehcache的Java代码缓存方式：不细致讲解可以了解：点击

  • Service层 —— Controller层——数据展示！
    在这里插入图片描述

nginx 缓存 ＋页面静态化处理：

当然主要是 lua ...

info.lua

-- 中文转码
ngx.header.content_type="text/html;charset=utf8"
-- 获取url	参数 
local uri_args = ngx.req.get_uri_args()
local goodsId = uri_args["goodsId"]
-- 打印日志 
ngx.log(ngx.ERR,"json------",goodsId)local cache_ngx = ngx.shared.my_cache  				-- nginx 缓存模板对象
local goodsCacheKey = "goods:"..goodsId  			-- 设置key
local goodsCache = cache_ngx:get(goodsCacheKey) 	-- 根据get(key); 获取缓存中数据！
-- 判断是否存在数据 “” 或 nil 就发送请求....
if goodsCache == "" or goodsCache == nil then
local http = require("resty.http")
local httpc = http.new()
local resp, err = httpc:request_uri("http://127.0.0.1:6001",{method = "GET",path = "/showinfo/"..goodsId
})
-- 获取结果
goodsCache = resp.body
-- 设置缓存时间
local expireTime = math.random(600,1200)
-- set(key,value); 设置缓存
cache_ngx:set(goodsCacheKey,goodsCache,expireTime)
end-- 日志输出
ngx.log(ngx.ERR,"json------",goodsCache)
-- 获取到JSON 模板！
local cjson = require("cjson")
local goodsCacheJSON = cjson.decode(goodsCache) -- 结果数据转换成JSON
-- 响应参数封装 context 
local context = {
goodsname = goodsCacheJSON.spu.name,
img = goodsCacheJSON.spu.images,
introduction = goodsCacheJSON.spu.introduction,
specItems = goodsCacheJSON.spu.specItems
}
-- 获取模板对象。
local template = require("resty.template")
template.render("item.html", context)   		-- context 传入指定模板静态页面！

缓存

local cache_ngx = ngx.shared.my_cache  				-- nginx 缓存模板对象local goodsCache = cache_ngx:get(goodsCacheKey) 	-- 根据get(key); 获取缓存中数据！
-- 判断是否存在数据 “” 或 nil 就发送请求....
if goodsCache == "" or goodsCache == nil then-- 请求数据通过set方法,根据指定key 设置缓存/缓存时间(建议随机预防 缓存雪崩！)-- 设置缓存时间local expireTime = math.random(600,1200)-- set(key,value); 设置缓存cache_ngx:set(goodsCacheKey,goodsCache,expireTime)
end

ok。以上就是nginx 设置缓存的基本结构语法… 总的来说并不难！

页面静态化处理

nginx lua 通过：lua-resty-template实现大体内容有：

  • 模板位置：从哪里查找模板；
  • 变量输出/转义：变量值输出；
  • 代码片段：执行代码片段，完成如if/else、for等复杂逻辑，调用对象函数/方法；
  • 注释：解释代码片段含义；
  • include：包含另一个模板片段；

模板位置

  • 我们需要告诉lua-resty-template去哪儿加载我们的模块
    此处可以通过set指令定义 template_location、template_root 或者使用 root指令定义的位置加载

nginx执行的配置文件：指定该请求下的模板位置
lua.conf

#给nginx 分内存 128m 兆  缓存大小！用于存放热点数据（频繁使用的数据！）
lua_shared_dict my_cache 128m;#nginx服务
server {listen	9090;		#指定端口9090，默认80server_name	_;#静态资源管理模板地址...set $template_location "/templates";set $template_root "D:/WSMwork/www/templates";root D:/WSMwork/www/templates;  	# "指定要导入的模板路径！"  #注意这里不能设置 中文地址！location /info{default_type text/html;content_by_lua_file D:/WSMwork/www/info.lua;}
}

在这里插入图片描述
加载顺序

  • 通过ngx.location.capture从template_location查找，如果找到（状态为为200）则使用该内容作为模板；
    此种方式是一种动态获取模板方式；

  • 如果定义了template_root，则从该位置通过读取文件的方式加载模板

  • 如果没有定义template_root，则默认从root指令定义的document_root处加载模板。

  • 建议首先template_root
    尽量不要通过root指令定义的document_root加载，因为其本身的含义不是给本模板引擎使用的。

这时候，静态数据就已将放在了nginx服务器中，启动运行…
在这里插入图片描述

  • 可以直接通过，请求来获取到服务器上部署的文件…
  • 当然对于静态的 html css Js...一些文件进行配置！注意html文件中引入的外部样式路劲进行更改！

lua 脚本控制静态页面：变量输出

-- 获取到JSON 模板！
local cjson = require("cjson")
local goodsCacheJSON = cjson.decode(goodsCache) 	-- 返回结果数据转换成JSON
-- 响应参数封装 context 
local context = {
goodsname = goodsCacheJSON.spu.name,
img = goodsCacheJSON.spu.images,
introduction = goodsCacheJSON.spu.introduction,
specItems = goodsCacheJSON.spu.specItems
}-- 获取模板对象。
local template = require("resty.template")
--是否缓存解析后的模板，默认true
template.caching(true)
template.render("item.html", context)   		-- context 传入指定模板静态页面！

在这里插入图片描述

  • item.html 商品详情页面。
    nginx 可以通过 context 给静态化页面设置一些变量实现 伪静态化页面 {* 变量名 *} 页面中输出值！

更多实例：

lua脚本
info1.lua

-- 中文转码
ngx.header.content_type="text/html;charset=utf8"
local template = require("resty.template")local context = {title = "测试",name = "张三",description = "<script>alert(1);</script>",age = 20,hobby = {"电影", "音乐", "阅读"},score = {语文 = 90, 数学 = 80, 英语 = 70},score2 = {{name = "语文", score = 90},{name = "数学", score = 80},{name = "英语", score = 70},}
}
template.render("t3.html", context)
  • 文件保存 utf-8 …格式;

静态页面：

lua.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1> nginx页面静态化 </h1>{# 不转义变量输出 #}姓名：{* string.upper(name) *}<br/>{# 不转义输出,html形式输出,JS CSS 格式数据会成立！ #}{* description *}{# 转义变量输出,已文本形式输出... #}简介：{{description}}<br/>{# 可以做一些运算 #}年龄: {* age + 1 *}<br/>{# 循环输出 #}爱好：{% for i, v in ipairs(hobby) do %}{% if i > 1 then %}，{% end %}{* v *}{% end %}<br/>成绩：{% local i = 1; %}{% for k, v in pairs(score) do %}{% if i > 1 then %}，{% end %}{* k *} = {* v *}{% i = i + 1 %}{% end %}<br/>成绩2：{% for i = 1, #score2 do local t = score2[i] %}{% if i > 1 then %}，{% end %}{* t.name *} = {* t.score *}{% end %}<br/>{# 中间内容不解析 #}{-raw-}{(file)}{-raw-}{# 引入外部文件 #}{(lua2.html)}
</body>
</html>

lua2.html

<h1> 引入外部lua2.html 代码</h1>
  • {(include_file)}：包含另一个模板文件，相当于引入外部的 html 代码片段；
  • {* var *}：变量输出；
  • {{ var }}：变量转义输出, 不已以html 语法进行转义输出，可以使用 JS CSS等标签…
  • {% code %}：lua代码片段；
  • {# comment #}：注释；
  • {-raw-} 中间的内容不会解析，作为纯文本输出；

nginx配置文件
lua.conf 添加

location /info1{default_type text/html;content_by_lua_file D:/WSMwork/www/info1.lua;}
  • 模板最终被转换为Lua代码进行执行，所以模板中可以执行任意Lua代码。
  • 如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；
    而lua-resty-template模板引擎可以认为是JSP，其最终会被翻译成Lua代码，然后通过ngx.print输出。

测试：

在这里插入图片描述


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

相关文章

java网站页面静态化方案

java网站页面静态化方案

要生活得漂亮&#xff0c;需要付出极大的忍耐&#xff0c;一不抱怨&#xff0c;二不解释&#xff0c;绝对是个人才。——《变形记》 1、概述 在大型网站中&#xff0c;如京东和当当商品详情界面&#xff0c;看到的页面基本上是静态页面。为什么都要把页面静态化呢&#xff1f;…
阅读更多...
freemarker 页面静态化技术

freemarker 页面静态化技术

文章目录 一.背景二.页面静态化技术freemarker三.Freemarker基本操作1.引入依赖&#xff1a;2.创建模板文件&#xff1a;3.FTL指令&#xff1a; 四.freemarker整合spring五.总结&#xff1a;1.什么是网页静态化技术2.网页静态化技术与缓存技术的比较3.网页静态化技术的应用场景…
阅读更多...
springboot 页面静态化

springboot 页面静态化

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

PHP 页面静态化

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

页面静态化

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

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网页图片背景以及图片自适应设置

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

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

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

【前端】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;&…
阅读更多...
推荐文章

Copyright @ 2022~2023