FlaskWeb开发-Part3-模板

清疚 2023-01-15 08:06 110阅读 0赞

## FlaskWeb开发-Part3-模板 ##

通过Part1和Part2，我们可以将“**浏览器路径名 - 处理函数 - 处理函数返回的html字符串**” 三者一一对应起来。即，可以设定访问路径，然后定义处理函数，处理函数返回html字符串即可。  
1.进一步抽象，将html文件放到特定文件夹 -> templates中，访问的时候直接返回对应的html文件

templates/user.html
    <h1>Hello,{
        {
         name }}!</h1>
    
    hello.py:
    @app.route('/user/<name>')
    def user(name):
        return render_template('user.html',name=name)

这样可以很好的组织html文件。  
2.使用Flask-Bootstrap提供基础的模板  
安装Flask-Bootstrap

pip install flask-bootstrap

先看运行文件：hello.py:

from flask import Flask, render_template
    from flask_bootstrap import Bootstrap
    
    app = Flask(__name__)
    
    bootstrap = Bootstrap(app)
    
    
    @app.errorhandler(404)
    def page_not_found(e):
        return render_template('404.html'), 404
    
    
    @app.errorhandler(500)
    def internal_server_error(e):
        return render_template('500.html'), 500
    
    
    @app.route('/')
    def index():
        return render_template('index.html')
    
    
    @app.route('/user/<name>')
    def user(name):
        return render_template('user.html', name=name)
        
    if __name__ == '__main__':
        app.run(debug=True)

首先建立base.html，主要是第一行  
\{% extends “bootstrap/base.html” %\} 引用bootstrap内容，之后的html文件可以在此基础上扩展

//base.html
    {% extends "bootstrap/base.html" %}
    
    {% block title %}Flasky{% endblock %}
    
    {% block navbar %}
    <div class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Flasky</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
    {% endblock %}
    
    {% block content %}
    <div class="container">
        {% block page_content %}{% endblock %}
    </div>
    {% endblock %}

在以上基础上建立404.html，引用base.html内容\{% extends “base.html” %\}

{% extends "base.html" %}
    
    {% block title %}Flasky - Page Not Found{% endblock %}
    
    {% block page_content %}
    <div class="page-header">
        <h1>Not Found</h1>
    </div>
    {% endblock %}