当前位置： 首页 > news >正文

FLASK博客系列5——模板之从天而降

news 2026/2/9 17:04:39

       我们啰啰嗦嗦讲了4篇，都是在调接口，啥时候能看到漂亮的页面呢？别急，今天我们就来实现。

       来我们先来实现一个简单的页面。不多说，上代码。

@app.route('/')
def index():user = {'username': 'clannadhh'}return '''<html><head><title>首页</title></head><body><h1>Hello, ''' + user['username'] + '''</h1></body></html>'''

        如无意外，你可以看到下图：

        

       但是，我接受唔到咯。辣么难看，又要写一堆HTML。如果我们需要返回一个含有大量动态内容的大型以及复杂的 HTML 页面的话，代码将会有多么复杂啊！如果你需要改变你的网站布局，在一个大的应用程序，该应用程序有几十个视图，每一个直接返回HTML？这显然​​ 是脑子瓦特了。

       这时候我们就要引入模板一说了。那什么是模板呢？我们把包含变量和运算逻辑的 HTML 或其他格式的文本叫做模板，执行这些变量替换和逻辑计算工作的过程被称为渲染。

       Jinjia2模板是Python web编程中主流的模板语言，从Django模板发展而来，但比Django的模板性能更好。由于Flask是基于Werkzeug和Jiajia2发展而来的，因此在安装Flask的时候会自动安装Jinjia2。

        Jiajia2语法

        Jinjia2 模板由内容、变量、表达式、标签和注释5个部分组成。

  • 普通内容：一般是没有特殊含义的内容，渲染模板时不对其进行解析。
  • 变量：在Jinjia2 中是可以定义变量的，当模板渲染时，变量就会被替换为其对应的值。
  • 表达式：可以针对变量做一些算术或者逻辑运算。
  • 标签：用于在渲染模板时进行逻辑控制。
  • 注释：就像平时的代码注释，模板渲染时不对其做解析。实际上渲染前会被删除掉。

            我们在template文件夹下创建一个 base.html，这个就是我们博客的首页基模板。为了让我们的博客看起来更加大气，我们用Bootstrap4来实现前端渲染。这里我们直接用CDN引入即可，至于样式什么的，你们照搬我的就可以。等有时间自己慢慢研究，我们此次的目标要放在Flask上。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="utf-8"><title>{% block title %}我的个人博客{% endblock %}</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script><link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
{# 我是一段注释 #}
{% include 'header.html' %}   {# 这里导入header.htm #}
{% block content %}  {# 表明要加入当前模板中的对应块的内容 #}<h1 >{# 这里传递了变量username #}你好啊！<sapn class="text-danger">{{ username }}</sapn> , 欢迎您~</h1>
{% endblock content%}</body>
</html>

            接着再新建一个header.html，这个渲染的是我们博客的导航栏，会显得好看很多。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark"><a class="navbar-brand" href="#" style="font-size: 1.5rem;">我的个人博客</a>
</nav>

         我们接着修改一下app.py。从flask中导入,用于渲染我们的模板：

form flask import render_template

            接着修改一下我们之前的hello  world。

@app.route('/')
def index():username = "clannadhh"return render_template("base.html", username=username)

            接着运行访问，如无意外，我们就可以看到雏形了。

        emmmm，看起来还不错的样子。到这里你们是不是发现，Jinjia2的语法也不难理解嘛。在模板里，我们通常要添加一些特殊格式定义的内容，下面是常见的三种：

  • {{ ... }} 用来标记变量。像我们上面就用了username。

  • {% ... %} 用来标记语句，比如 if 语句，for 语句等。

  • {# ... #} 用来写注释。

            我们再来伪造一些假数据。然后顺便美化一下。

        在template目录下新建一个article文件夹，接着新建一个list.html。这个才是我们真正的首页的模板，它继承于base.html。

          接着修改一下hello world。

@app.route('/')
def index():username = "clannadhh"articles =[{"title": "石正丽新研究:需持续监控蝙蝠", "detail": "石正丽新研究:需持续监控蝙蝠"},{"title": "建议增设火车青年票", "detail": "建议增设火车青年票"},{"title": "审议现场人大代表张伯礼哭了", "detail": "审议现场人大代表张伯礼哭了"},{"title": "31省区市首次确诊病例0新增", "detail": "31省区市首次确诊病例0新增"},{"title": "世界首个新冠疫苗人体临床数据", "detail": "世界首个新冠疫苗人体临床数据"},]return render_template("article/list.html",username=username,articles=articles)

            然后是修改list.html的内容。

{% extends "base.html" %}{% block content %}<div class="container"><div class="row mt-4"><div class="col-md-8 col-lg-8 col-sm-8">{% for article in articles %}<div class="card row mt-4"><div class="card-header"><div class="mt-0"><a style="font-weight: bold; color: black; font-size: 24px;"href="#">{{ article.title }}</a></div></div><div class="card-body mt-0"><p style="color: black; font-size: 16px;">{{ article.detail }}</p></div></div>{% endfor %}</div></div></div>
{% endblock content %}

            好了，我们跑起来看看效果。emmmm，整理效果不错。

            今天内容好像有点多。希望大家能够坚持下来，跟着我一步步把自己的博客做下来。

            觉得可以的话，点击下方的打赏按钮呗~

相关文章：

FLASK博客系列5——模板之从天而降

我们啰啰嗦嗦讲了4篇&#xff0c;都是在调接口&#xff0c;啥时候能看到漂亮的页面呢&#xff1f;别急&#xff0c;今天我们就来实现。 来我们先来实现一个简单的页面。不多说&#xff0c;上代码。 app.route(/) def index():user {username: clannadhh}return <html>&…...

编程日记 2023/11/28 12:14:27

6.一维数组——用冒泡法将10个整数由大到小排序

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为一维数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 用冒泡法将10个整数由大到小排序 二、题目分析 三、解题 程序运行代码 #include<stdio.h> int main() {int …...

编程日记 2023/11/28 12:12:24

Wireshark的捕获过滤器

Wireshark的过滤器&#xff0c;顾名思义&#xff0c;作用是对数据包进行过滤处理。具体过滤器包括捕获过滤器和显示过滤器。本文对捕获过滤器进行分析。 捕获过滤器&#xff1a;当进行数据包捕获时&#xff0c;只有那些满足给定的包含/排除表达式的数据包会被捕获。 捕获过滤器…...

编程日记 2023/11/28 12:11:23

安陆FPGA调试中遇到的问题总结

参考链接&#xff1a;安陆FPGA踩坑填坑记录&#xff08;梦里呓语回忆录&#xff09;_fpga开发是个大坑-CSDN博客 上海安陆FPGA设置重上电启动速度_安路 fpga 加载时间-CSDN博客...

编程日记 2023/11/28 12:10:21

Springboot2+WebSocket

一、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 二、添加配置 新增配置文件 config/WebSocketConfig.java import org.springframewo…...

编程日记 2023/11/28 12:09:20

希尔伯特和包络变换

一、希尔伯特变换 Hilbert Transform&#xff0c;数学定义&#xff1a;在数学与信号处理的领域中&#xff0c;一个实值函数的希尔伯特变换是将信号x(t)与h(t)1/(πt)做卷积&#xff0c;以得到其希尔伯特变换。因此&#xff0c;希尔伯特变换结果可以理解为输入是x(t)的线性时不…...

编程日记 2023/11/28 12:08:19

国产Ai大模型和chtgpt3.5的比较

下面是针对国产大模型&#xff0c;腾讯混元&#xff0c;百度文心一言&#xff0c;阿里通义千问和chatgpt的比较&#xff0c;最基础的对一篇文章的单词书进行统计&#xff0c;只有文心一言和chatgpt回答差不多&#xff0c;阿里和腾讯差太多了...

编程日记 2023/11/28 12:07:17

机器学习ROC曲线中的阈值thresholds

在ROC&#xff08;Receiver Operating Characteristic&#xff09;曲线中&#xff0c;阈值&#xff08;thresholds&#xff09;是一个用于分类模型的概率或分数的截断值。ROC曲线的绘制涉及使用不同的阈值来计算真正例率&#xff08;True Positive Rate&#xff0c;TPR&#xf…...

编程日记 2023/11/28 12:05:14

MySOL常见四种连接查询

1、内联接 &#xff08;典型的联接运算&#xff0c;使用像 或 <> 之类的比较运算符&#xff09;。包括相等联接和自然联接。 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行。例如&#xff0c;检索 students和courses表中学生标识号相同的所有行。 2、…...

编程日记 2023/11/28 12:04:10

数智融合 开启金融数据治理新时代

11月24日&#xff0c;由上海罗盘信息科技有限公司&#xff08;罗盘科技&#xff09;主办&#xff0c;北京酷克数据科技有限公司&#xff08;酷克数据&#xff09;支持协办的“博学近思 切问治理”数据治理分享会在上海成功举行。 本次会议深度聚焦金融行业数智化转型&#xff…...

编程日记 2023/11/28 12:03:10

数据结构——利用堆进行对数组的排序

今天文章的内容是关于我们如何利用堆的特性对我们的数组进行排序&#xff0c;还有就是我们的TopK的问题&#xff0c;这次我们放在的是文件种&#xff0c;我们放入一亿个数字&#xff0c;然后我们取出一亿个数字中最大的十个数&#xff0c;利用上章堆的问题进行解决。 首先就是我…...

编程日记 2023/11/28 12:02:09

Unity 场景切换

Unity场景切换可使用以下方法&#xff1a; 1、SceneManager.LoadScene()方法&#xff1a; using UnityEngine.SceneManagement;// 切换到Scene2场景 SceneManager.LoadScene("Scene2"); 2、使用SceneManager.LoadSceneAsync()方法异步加载场景&#xff0c;异步加载…...

编程日记 2023/11/28 12:00:06

【PTA题目】7-12 N个数求和 分数 20

7-12 N个数求和 分数 20 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 本题的要求很简单&#xff0c;就是求N个数字的和。麻烦的是&#xff0c;这些数字是以有理数分子/分母的形式给出的&#xff0c;你输出的和也必须是有理数的形式。 输入格式&#xff1a; 输入第一行…...

编程日记 2023/11/28 11:59:05

智能AIGC写作系统ChatGPT系统源码+Midjourney绘画+支持GPT-4-Turbo模型+支持GPT-4图片对话

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…...

编程日记 2023/11/28 11:58:03

List转string 逗号分隔

List转string 逗号分隔 1、将list转化为逗号分割的字符串 String str String.join(",", list); String str StringUtils.json(list.toArray(), ",");　　 2、将逗号分隔的字符串转换为List List<String> list Arrays.asList(str.split("…...

编程日记 2023/11/28 11:57:02

手机文件怎么传到电脑？简单方法分享！

将手机文件传输到电脑可以将其备份&#xff0c;以防数据丢失或意外情况发生。并且电脑具有更强大的处理能力&#xff0c;可以将文件进行编辑、修改、转换等操作&#xff0c;大大提高了工作效率。那么&#xff0c;手机文件怎么传到电脑&#xff1f;本文将为大家提供简单易懂的解…...

编程日记 2023/11/28 11:56:01

计算机基础知识59

MySQL的卸载流程 1、先停止MySQL服务&#xff1a;右键“此电脑”&#xff0c;选择“管理”&#xff0c;之后选择“服务和应用程序”--“服务”&#xff0c;在服务中找到“MySQL”&#xff0c;右键选择“停止”。 2、找到“控制面板”--“程序和功能”&#xff0c;找到MySQL&…...

编程日记 2023/11/28 11:55:00

RK3568基于openharmony3.2版本之MIPI屏幕调试

mipi调试过程 1、前言2、开发环境3、调试过程3.1、下载openharmony3.2源码3.2、设备树上增加mipi-dsi屏幕的节点3.3、 分析kernel显示不出来画面3.4、 mipi屏幕显示效果图1、前言 由于工作需要，RK3568需要支持openharmony3.2系统版本，需要重新移植下载源码并且适配自家公司的…...

编程日记 2023/11/28 11:53:59

pycharm安装PyQt5及其工具

PyCharm安装PyQt5及其工具&#xff08;Qt Designer、PyUIC、PyRcc&#xff09;详细教程_pycharm pyqt5-CSDN博客 上面是原文链接&#xff0c;根据原文链接&#xff0c;我重新记录一下。IDE&#xff1a;pycharm 2023.2.5 一共需要安装5个。 在PyCharm中如何完整优雅地安装配置…...

编程日记 2023/11/28 11:52:58

百度人工智能培训第一天笔记

参加了百度人工智能初步培训&#xff0c;主要是了解一下现在人工智能的基本情况&#xff0c;以便后续看可以参与一些啥&#xff1f; 下面就有关培训做一些记录&#xff0c;以便后续可以继续学习。 一、理论基础部分 二、实际操作部分 主要学习的百度人工智能平台如下&#xf…...

编程日记 2023/11/28 11:51:57

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/8 4:37:41

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/8 20:41:48

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29