0

    Flask前端实战:使用静态文件和模板继承实现多页面应用

    2023.05.08 | admin | 160次围观

    除了Jinja2模板引擎,Flask还提供了托管静态文件(如CSS、JavaScript、图像等)的功能,可以用于实现多个HTML页面的Web应用程序。下面是一个示例,演示如何使用静态文件和模板继承实现带导航菜单的多页面Web应用程序。

    首先,我们需要在Flask应用程序中添加静态文件和模板文件的目录,例如:

    app = Flask(__name__, static_folder='static', template_folder='templates')
    

    然后属于静态网页文件的是,我们可以在静态文件目录中添加CSS和JavaScript文件,例如在static/css目录中添加styles.css文件,其中包含了导航菜单的样式。然后,在模板文件目录中,我们可以创建一个基础模板(例如base.html),其中包含了公共的HTML结构和导航菜单代码。然后,在其他HTML页面中,我们可以继承基础模板,并添加自己的内容和样式。

    下面是一个示例,演示如何使用静态文件和模板继承实现多页面Web应用程序:

    
    from flask import Flask, render_template
    app = Flask(__name__, static_folder='static', template_folder='templates')
    @app.route('/')
    def index():
        return render_template('index.html', title='Home')
    @app.route('/about')
    def about():
        return render_template('about.html', title='About')
    if __name__ == '__main__':
        app.run(debug=True)
    

    在这个示例中,我们定义了两个视图函数,一个是index(),返回主页的内容;另一个是about(),返回关于页面的内容。同时,我们使用render_template()函数渲染不同的模板文件,其中包含了不同的页面内容和导航菜单结构。

    下面是base.html基础模板文件的示例代码:

    
    
    
      
        
        {% block title %} {% endblock %}
        
      
      
        
        {% block content %} {% endblock %}
      
    
    

    在这个基础模板文件中,我们使用Jinja2模板语言实现了模板继承和块语法。其中,{% block title %}和{% block content %}标记定义了子模板可以插入内容的位置。同时,我们加入了CSS文件的引用,并在导航菜单中添加了"Home"和"About"两个链接。

    最后,我们可以创建index.html和about.html两个子模板,分别继承base.html属于静态网页文件的是,并插入自己的内容和样式:

    {% extends 'base.html' %}
    {% block title %}{{ title }}{% endblock %}
    {% block content %}
      

    Welcome to {{ title }} page!

    {% endblock %}

    在这个子模板中,我们使用了{% extends 'base.html' %}指令继承了基础模板,并使用了{% block title %}和{% block content %}标记插入自己的标题和内容。注意,在{% block title %}中,我们传递了一个名为title的变量,这个变量是在视图函数中传递过来的。

    总结

    使用静态文件和模板继承,我们可以实现复杂的多页面Web应用程序,并且可以很方便地更新公共部分(如导航菜单、页脚等)。这种方式虽然不如使用现代化的前端框架或UI库炫酷,但是对于一些简单的Web应用程序而言,是一个快速、简单、可行的方案。

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论