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

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

news 2025/8/20 21:41:54

       我们啰啰嗦嗦讲了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

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/8/6 12:37:48

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/8/12 18:09:54

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/8/18 12:29:00

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/8/11 9:56:17

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/7/27 23:10:57

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/8/9 2:59:35

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/8/19 16:14:29

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/8/6 4:20:27

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11