Flask中render_template的使用和模板的继承

本文详细介绍了MVC(模型-视图-控制器)架构的概念及其在Python Web开发中的应用。通过具体的示例,展示了如何使用Flask框架实现MVC模式,并解释了如何通过模板渲染将数据传递到前端。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里写图片描述

这就是传说中的MVC:Model-View-Controller,中文名“模型-视图-控制器”。
Python处理URL的函数就是C:Controller,Controller负责业务逻辑,比如检查用户名是否存在,取出用户信息等等;
包含变量{{ name }}的模板就是V:View,View负责显示逻辑,通过简单地替换一些变量,View最终输出的就是用户看到的HTML。
MVC中的Model在哪?Model是用来传给View的,这样View在替换变量的时候,就可以从Model中取出相应的数据。
模板:
模板的位置放在templates文件夹下面,一般是html文件,我们把index.html改动成如下样式

<html>
  <head>
    <title>{{title}} - microblog</title>
  </head>
  <body>
      <h1>Hello, {{user.nickname}}!</h1>
  </body>
</html>

其中: {{}}表示这是一个变量,可以根据用户在模块端给予的参数的不同,进行调整

下面的程序就是调用了 render_template模板

from flask importrender_template
from app import app
@app.route('/')
@app.route('/index')
def index():
    user = {'nickname': 'Miguel'} # fake user
    return render_template("index.html",
        title = 'Home',
        user = user) #这里模块里的第一个user指的是html里面的变量user,而第二个user指的是函数index里面的变量user

说白了,其实render_template的功能是先引入index.html,同时根据后面传入的参数,对html进行修改渲染。
然后,render_template模板其实也是接受控制语句的,修改后的index.html如下:

<html>
  <head>
    {% if title %}                                    #{% %}这样代表控制语句,意思是如果有传入title变量,则显示title-microblog
    <title>{{title}} - microblog</title>      
    {% else %}
    <title>Welcome to microblog</title>                            #如果没有传入参数,则显示welcome to microblog
    {% endif %}                                                      #这里大不同!!HTML里面的逻辑语句,需要用{% endif %} 来结束逻辑语句
  </head>
  <body>
      <h1>Hello, {{user.nickname}}!</h1> 
  </body>
</html>

我们再来看一个循环语句的修改版的views.py和index.html

def index():
    user = {'nickname': 'Miguel'} # fake user
    posts = [# fake array of posts
        {
            'author': { 'nickname': 'John' },
            'body': 'Beautiful day in Portland!'
        },
        {
            'author': { 'nickname': 'Susan' },
            'body': 'The Avengers movie was so cool!'
        }
    ]
    return render_template("index.html",
        title = 'Home',
        user = user,
        posts = posts)

我们再来看一个循环语句的修改版的views.py和index.html

def index():
    user = {'nickname': 'Miguel'} # fake user
    posts = [# fake array of posts
        {
            'author': { 'nickname': 'John' },
            'body': 'Beautiful day in Portland!'
        },
        {
            'author': { 'nickname': 'Susan' },
            'body': 'The Avengers movie was so cool!'
        }
    ]
    return render_template("index.html",
        title = 'Home',
        user = user,
        posts = posts)

注意,这里的访问都是用点来继承的,比如post.author.nickname

最后,如果说在以后的开发中,模板变得非常多,但是每个模板中,都有固定项目是不能变的,那如何操作呢….
比如一个页面顶端有按钮,在其他页面中也有,那不可能每个页面中都写吧
于是,我们就把一样的部分,都放在了base.html这个基本模板中,通过{% block content %}这个接口,来和base.html来做链接

<html>
  <head>
    {% if title %}
    <title>{{title}} - microblog</title>
    {% else %}
    <title>microblog</title>
    {% endif %}
  </head>
  <body>
    <div>Microblog: <a href="/index">Home</a></div>
    <hr>
    {% block content %}{% endblock %}
  </body>
</html>
{% extends "base.html" %}                                       #通过这句话,来进行继承挂钩,和主体base.html进行链接
{% block content %}
<h1>Hi, {{user.nickname}}!</h1>
{% for post in posts %}
<div><p>{{post.author.nickname}} says: <b>{{post.body}}</b></p></div>
{% endfor %}
{% endblock %}
编写Web应用程序通常涉及前端后端两部分。首先,我们创建一个简单的登录页(login.html)主页(homepage.html),并使用模板语言如HTML、CSSJavaScript以及一些轻量级框架(如Bootstrap)来实现样式交互。 **login.html** ```html <!DOCTYPE html> <html lang="zh"> <head> <title>登录</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-5"> <form id="loginForm" action="/api/login" method="POST"> <input type="text" name="username" placeholder="用户名" required> <input type="password" name="password" placeholder="密码" required> <button type="submit" class="btn btn-primary">登录</button> </form> <div id="messageFlash" style="display:none;"></div> </div> <script> // JavaScript for handling login and message flashing </script> </body> </html> ``` **homepage.html** ```html <!DOCTYPE html> <html lang="zh"> <head> <title>主页</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <img src="static/homepage-image.jpg" alt="主页图片"> </head> <body> <nav class="navbar navbar-light bg-light"> <a href="#" class="navbar-brand">欢迎已登录用户</a> </nav> <!-- ...其他内容... --> </body> </html> ``` 在服务器端(例如Python Flask或Django),你可以使用模板引擎如Jinja2处理动态内容: **server.py (Flask示例)** ```python from flask import Flask, render_template, request, redirect app = Flask(__name__) app.jinja_env.globals.update({ 'show_message': show_message }) @app.route('/') def homepage(): return render_template('homepage.html', image_url='static/homepage-image.jpg') @app.route('/login', methods=['POST']) def login(): username = request.form.get('username') password = request.form.get('password') if check_credentials(username, password): # 假设check_credentials是一个验证函数 session['logged_in'] = True return redirect('/') else: return show_message('登录失败', 'danger') # 使用自定义函数显示消息 def show_message(message, severity='info'): flash = { 'message': message, 'severity': severity, 'is_hidden': True # 初始隐藏 } return {'flash': flash} if __name__ == '__main__': app.run() ``` 在这个例子中,`show_message`是一个辅助函数,用于渲染包含消息闪现的模板。通过`render_template`返回一个响应,并将`message_flash`传递给模板,以便在前端显示。 至于使用模板继承,如果你使用的是像Django这样的框架,可以这样组织文件结构: **base.html** ```html <!-- base template with common elements like nav bar --> ``` **macros.html** ```html {% macro show_message(message, severity='info') %} {% set is_hidden = not get_flashed_messages(with_categories=true)[0].category == severity %} <div id="messageFlash" {% if is_hidden %}style="display:none;"{% endif %}> {{ get_flashed_messages()[0] }} </div> {% endmacro %} ``` **login.html (extends base.html)` ```html {% extends "base.html" %} {% block content %} ... {% include "macros.html" %} ... {% endblock %} ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值