HTML页面静态化技术

article/2025/10/29 18:16:07

随着网站的内容的增多和用户访问量的增多，无可避免的是网站加载会越来越慢，受限于带宽和服务器同一时间的请求次数的限制，我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化。

此文已Django的电商网站为例（处理高并发问题）

技术点：首页静态化，详情页面静态化，定时任务，异步任务

所谓的静态化技术就是 将查询好的数据填充到模板中,然后将生成的html写入到指定的文件中

静态处理后又给网站带来了哪些好处？

  • 静态页面相对于动态页面更容易被搜索引擎收录。
  • 访问静态页面不需要经过程序处理，因此可以提高运行速度。
  • 减轻服务器负担。
  • HTML页面不会受Asp相关漏洞的影响。

分析需求：

1.首页频繁被访问 ，经常需要更新，发生变化，页面只有一个（用定时任务处理，定时刷新）

2.详情页面页面多，只有在数据发生变化时才需要更新页面（需要生成的静态化页面多，用celery处理）

前期配置：

需要在Django的setting.py文件中添加模板路径

修改成：

 'DIRS': [os.path.join(BASE_DIR, 'templates')],

添加文件保存路径

DEFAULT_FILE_STORAGE = 'utils.fastdfs.fdfsstorage.FastDFSStorage'

在项目中创建templates文件夹

注意创建的路径，如果路径创建错误，会一直报Templates DoesNotExist的错误 

此时可以找一个test.py

import osfrom mall.settings import BASE_DIRurl = [os.path.join(BASE_DIR, 'templates')]
print(url)

输出一下路径看路径是否正确

在templates文件夹中创建home.html,index.html和detail.html并添加对应的前端代码

获取到前端和详情页面的数据，保证能正常访问 

首页：（分类数据和首页数据）

静态化：

1.获取到模板

2.将数据渲染到模板中

3.需要将html数据写入指定的文件中

    template = loader.get_template('index.html')html_data = template.render(context)#将文件写入file_path = os.path.join(settings.GENERATED_STATIC_HTML_FILES_DIR,'index.html')with open(file_path,'w') as f:f.write(html_data)

添加静态化首页的手动脚本test_script.py文件

#!/usr/bin/env pythonimport sys
sys.path.insert(0, '../')
sys.path.insert(0, '../apps')import os
if not os.getenv('DJANGO_SETTINGS_MODULE'):os.environ['DJANGO_SETTINGS_MODULE'] = 'mall.settings'# 让django进行初始化设置
import django
django.setup()from contents.crons import generate_static_index_htmlif __name__ == '__main__':generate_static_index_html()

给脚本文件添加可执行权限： chmod +x  test_script.py

但是像网站通常都会常常需要更新像推荐商品等信息，我们不能每次在定点让人生成静态文件

此时可以利用定时任务

安装：pip install django-crontab

添加应用

INSTALLED_APPS = [...'django_crontab',  # 定时任务...
]

 设置任务的定时时间

在配置文件中设置定时执行的时间

每个定时任务分为三部分定义：

  • 任务时间

    基本格式 :* * * * *分 时 日 月 周      命令M: 分钟（0-59）。每分钟用*或者 */1表示H：小时（0-23）。（0表示0点）D：天（1-31）。m: 月（1-12）。d: 一星期内的天（0~6，0为星期天）。

在setting.py中添加

# 定时任务
CRONJOBS = [# 每5分钟执行一次生成主页静态文件('*/1 * * * *', 'contents.crons.generate_static_index_html', '>> /home/python/Desktop/meiduo/mall/logs/crontab.log')
]

执行脚本文件：./test_script.py

此时首页静态化页面创建成功

 在/home/python/Desktop/meiduo/mall/logs/crontab.log文件中可以看到

Wed Aug 29 22:17:01 2018:generate_static_index
Wed Aug 29 22:18:02 2018:generate_static_index

详情页面

1.详情页面需求时项目上线先静态化生成全部的页面

2.然后在后台管理系统每次更改数据的时候重新生成静态化页面 

在celery_tasks中新建html/tasks.py任务

import os
from celery_tasks.main import app
from utils.goods import get_categories
from django.template import loader
from django.conf import settings
from goods.models import Goods,SKU@app.task(name='generate_static_sku_detail_html')
def generate_static_sku_detail_html(sku_id):# 获取分类数据categories = get_categories()# 获取当前商品数据sku = SKU.objects.get(id=sku_id)sku.images = sku.skuimage_set.all()# 获取面包屑数据goods = sku.goodsgoods.channel = goods.category1.goodschannel_set.all()[0]# 获取商品规格项idssku_key = []sku_specs = sku.skuspecification_set.order_by('spec_id')for sku_spec in sku_specs:sku_key.append(sku_spec.option.id)# 构建商品规格# 获取所有商品,skus = goods.sku_set.all()# 构建不同规格参数（选项）的sku字典# spec_sku_map = {#     (规格1参数id, 规格2参数id, 规格3参数id, ...): sku_id,#     (规格1参数id, 规格2参数id, 规格3参数id, ...): sku_id,#     ...# }spec_sku_map = {}for s in skus:s_peces = sku.skuspecification_set.order_by('spec_id')# 用于记录 规格参数idkey = []for spec in s_peces:key.append(spec.option.id)# 添加数据spec_sku_map[tuple(key)] = s.id# 获取当前商品的规格信息# specs = [#    {#        'name': '屏幕尺寸',#        'options': [#            {'value': '13.3寸', 'sku_id': xxx},#            {'value': '15.4寸', 'sku_id': xxx},#        ]#    },#    {#        'name': '颜色',#        'options': [#            {'value': '银色', 'sku_id': xxx},#            {'value': '黑色', 'sku_id': xxx}#        ]#    },#    ...# ]specs = goods.goodsspecification_set.order_by('id')# 若当前sku的规格信息不完整,则不再继续if len(sku_key) < len(specs):return# 针对于商品数据进行遍历for index, spec in enumerate(specs):# 复制当前sku的规格键key = sku_key[:]# 该规格的选项options = spec.specificationoption_set.all()for option in options:# 在规格参数sku字典中查询符合当前规则的skukey[index] = option.idoption.sku_id = spec_sku_map.get(tuple(key))spec.options = options# 组织上下文context = {'categories': categories,'goods': goods,'specs': specs,'sku': sku}template = loader.get_template('detail.html')html_text = template.render(context)file_path = os.path.join(settings.GENERATED_STATIC_HTML_FILES_DIR, 'goods/' + str(sku_id) + '.html')with open(file_path, 'w') as f:f.write(html_text)

重新执行celery

celery -A celery_tasks.main worker -l info

在front文件夹中,创建一个 goods文件夹

1.需要创建test2_script.py脚本文件

import syssys.path.insert(0, '../')
sys.path.insert(0, '../mall/apps')import osif not os.getenv('DJANGO_SETTINGS_MODULE'):os.environ['DJANGO_SETTINGS_MODULE'] = 'mall.settings'import djangodjango.setup()from django.template import loader
from django.conf import settingsfrom utils.goods import get_categories
from goods.models import SKUdef generate_static_sku_detail_html(sku_id):"""生成静态商品详情页面"""# 商品分类菜单categories = get_categories()# 获取当前sku的信息sku = SKU.objects.get(id=sku_id)sku.images = sku.skuimage_set.all()# 面包屑导航信息中的频道goods = sku.goodsgoods.channel = goods.category1.goodschannel_set.all()[0]# 构建当前商品的规格键sku_specs = sku.skuspecification_set.order_by('spec_id')sku_key = []for spec in sku_specs:sku_key.append(spec.option.id)# 获取当前商品的所有SKUskus = goods.sku_set.all()# 构建不同规格参数（选项）的sku字典# spec_sku_map = {#     (规格1参数id, 规格2参数id, 规格3参数id, ...): sku_id,#     (规格1参数id, 规格2参数id, 规格3参数id, ...): sku_id,#     ...# }spec_sku_map = {}for s in skus:# 获取sku的规格参数s_specs = s.skuspecification_set.order_by('spec_id')# 用于形成规格参数-sku字典的键key = []for spec in s_specs:key.append(spec.option.id)# 向规格参数-sku字典添加记录spec_sku_map[tuple(key)] = s.id# 获取当前商品的规格信息specs = goods.goodsspecification_set.order_by('id')# 若当前sku的规格信息不完整，则不再继续if len(sku_key) < len(specs):returnfor index, spec in enumerate(specs):# 复制当前sku的规格键key = sku_key[:]# 该规格的选项options = spec.specificationoption_set.all()for option in options:# 在规格参数sku字典中查找符合当前规格的skukey[index] = option.idoption.sku_id = spec_sku_map.get(tuple(key))spec.options = options# 渲染模板，生成静态html文件context = {'categories': categories,'goods': goods,'specs': specs,'sku': sku}template = loader.get_template('detail.html')html_text = template.render(context)file_path = os.path.join(settings.GENERATED_STATIC_HTML_FILES_DIR, 'goods/' + str(sku_id) + '.html')with open(file_path, 'w') as f:f.write(html_text)if __name__ == '__main__':skus = SKU.objects.all()for sku in skus:print(sku.id)generate_static_sku_detail_html(sku.id)

给文件添加可执行权限: chmod +x test2_script.py

执行脚本文件：./test2_script.py

2.修改数据时调用异步任务需要重写save_model方法

例如：

from . import modelsclass SKUAdmin(admin.ModelAdmin):def save_model(self, request, obj, form, change):obj.save()from celery_tasks.html.tasks import generate_static_sku_detail_htmlgenerate_static_sku_detail_html.delay(obj.id)

全部添加成功后，在admin管理页面中修改数据后，就会调用异步任务重新生成静态化文件了


http://chatgpt.dhexx.cn/article/313t5RJO.shtml

相关文章

Thymeleaf动态页面静态化

Thymeleaf动态页面静态化

Thymeleaf 目标 Thymeleaf的介绍Thymeleaf的入门Thymeleaf的语法及标签搜索页面渲染商品详情页静态化功能实现 1.Thymeleaf介绍 1动态页面&#xff1a; 通过执行asp、php、jsp和.net等程序生成客户端网页代码的网页。通常可以通过网站后台管理系统对网站的内容进行更新管理…
阅读更多...
Java使用Freemarker页面静态化生成实现

Java使用Freemarker页面静态化生成实现

Java使用Freemarker页面静态化生成实现 页面静态化其实就是将原来的动态网页(例如通过ajax请求动态获取数据库中的数据并展示的网页)改为通过静态化技术生成的静态网页&#xff0c;这样用户在访问网页时&#xff0c;服务器直接给用户响应静态html页面&#xff0c;没有了动态查询…
阅读更多...
CMS-页面静态化技术

CMS-页面静态化技术

页面静态化技术 页面静态化技术是什么&#xff1f; 页面静态化主要运用在一些大型网站&#xff0c;有大量信息需要与数据库交互。比如大型电商网站京东&#xff0c;淘宝 &#xff0c;天猫等。电商网站最大的特点是什么&#xff1f;数据庞大&#xff0c;页面众多。那么我们都知…
阅读更多...
java页面静态化

java页面静态化

1.概念 页面静态化&#xff0c;其实就是将动态生成的jsp页面&#xff0c;变成静态的HTML页面&#xff0c;让用户直接访问。 2.优点 &#xff08;1&#xff09;加快页面打开浏览速度&#xff0c;静态页面无需连接数据库&#xff0c;打开速度较动态页面有明显提高。 &#xff…
阅读更多...
页面静态化流程

页面静态化流程

本文首先采用CMS管理页面。 首先我们知道模板数据模型输出&#xff0c;页面静态化需要准备数据模型和模板&#xff0c;先知道数据模型的结构才可以编写模板&#xff0c;因为在模板中要引用数据模型中的数据&#xff0c;那么下面我来系统讲解CMS页面数据模型获取、模板管理及静…
阅读更多...
django笔记--页面静态化

django笔记--页面静态化

什么是页面静态化&#xff1a; 1&#xff09;减少数据库查询次数 2&#xff09;提高页面响应效率 页面静态化的作用&#xff1a; 1&#xff09;将动态渲染生成的页面结果保存成html文件&#xff0c;放到静态文件服务器中。 2&#xff09;用户直接去静态服务器&#xff0c;访问…
阅读更多...
PHP实现页面静态化

PHP实现页面静态化

为什么要页面静态化&#xff1f; 1.动态文件执行过程:语法分析-编译-运行 2.静态文件&#xff0c;不需要编译&#xff0c;减少了服务器脚本运行的时间&#xff0c;降低了服务器的响应时间&#xff0c;直接运行&#xff0c;响应速度快&#xff1b;如果页面中一些内容不经常改动…
阅读更多...
【Java】页面静态化

【Java】页面静态化

1.页面静态化介绍 2.Freemarker介绍 3.Freemarker入门案例 3.1环境搭建 创建maven工程并导入Freemarker的maven坐标 <dependency><groupId>freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.23</version> &…
阅读更多...
网站优化---页面静态化技术

网站优化---页面静态化技术

一&#xff1a; 首先先区分一下动态页面和静态页面的区别 动态文件&#xff1a;PHP脚本、Java脚本等 动态文件的执行过程&#xff1a;词法、语法分析 -> 编译 -> 渲染输出 静态文件&#xff1a;HTML文件 从加载速度上可以看出&#xff0c;静态文件明显比动态文件速度…
阅读更多...
openresty 页面静态化及多级缓存

openresty 页面静态化及多级缓存

openresty 页面静态化及多级缓存 多级缓存&#xff1a; 数据缓存的好处不用介绍了吧&#xff01;&#xff0c; 所谓多级缓存&#xff0c;即在整个系统架构的不同系统层级进行数据缓存&#xff0c;以提升访问效率&#xff0c;这也是应用最广的方案之一。而 nginx 是可以缓存数据…
阅读更多...
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…
阅读更多...
推荐文章

Copyright @ 2022~2023