页面静态化

页面静态化

网站的首页频繁被访问，为了提升访问速度，除了我们之前已经学过的使用缓存技术外，还可以使用页面静态化技术。

页面静态化即将动态渲染生成的页面结果保存成html文件，放到静态文件服务器中。用户访问的时候访问的直接是处理好之后的html静态文件。

对于页面中属于每个用户展示不同数据内容的部分，可以在用户请求完静态化之后的页面后，在页面中向后端发送请求，获取属于用户的特殊的数据。

页面静态化主要逻辑如下:

from django.conf import settings
from django.template import loader
import os
import time


def generate_static_index_html():
    """
    生成静态的主页html文件
    """
    print('%s: generate_static_index_html' % time.ctime())
   
	# 这里进行数据的查询，此处代码省略
    
    ······
    
    # 渲染模板，把查询到的数据添加进字典
    context = {
        'categories': categories,
        'contents': contents
    }
    template = loader.get_template('index.html')
    html_text = template.render(context)
    file_path = os.path.join(settings.GENERATED_STATIC_HTML_FILES_DIR, 'index.html')
    with open(file_path, 'w', encoding='utf-8') as f:
        f.write(html_text)

在配置文件中添加保存静态文件的目录

# 生成的静态html文件保存目录
GENERATED_STATIC_HTML_FILES_DIR = os.path.join(os.path.dirname(os.path.dirname(BASE_DIR)), 'front_end_pc')

在项目中新建templates模板目录，配置模板目录

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

注意

如果在页面中既会用到Django的模板语法，也会用到前端Vue的模板语法，可以通过在前端中修改Vue的模板变量语法来避免冲突

var vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    ...
})

通过delimiters声明，将Vue的模板变量变为了[[、]]