• flask踩坑集锦

    很久之前用过flask，那时候是跟着教程，教程怎么做我就怎么做，没有仔细考虑过。

    现在是全靠文档和搜索一步一步搭建，忘了很多东西，就碰了很多壁，浅浅记录一下子。

    1.Jinja2的模板继承，是指抽出每个网页相同的部分，作为base，然后以base为底，在此基础上进行不同页面的展示。

    比如，我一个网页设置了导航栏和背景，其他页面都是以此为基础显示不同内容，但是我又不想都写在同一个网页上显得杂乱，故此分离开来，应该是这样使用：

    base.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1">
    6.     <title>myWebtitle>
    7.         <link rel="stylesheet" type="text/css" href="../static/css/base.css">
    8.         <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css">
    9.     <script src="../static/js/jquery.min.js">script>
    10.     <script type="text/javascript" src="../static/js/daterangepicker.js">script>
    11.     <script type="text/javascript" src="../static/js/bootstrap.bundle.js">script>
    12. {% block head %}{% endblock %}
    13. head>
    14. <body>
    15. <nav class="navbar navbar-expand-lg bg-body-tertiary">
    16.   <div class="container-fluid">
    17.     <a class="navbar-brand" href="#">Navbara>
    18.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    19.       <span class="navbar-toggler-icon">span>
    20.     button>
    21.     <div class="collapse navbar-collapse" id="navbarNav">
    22.       <ul class="navbar-nav" id="myTab">
    23.         <li class="nav-item">
    24.           <a class="nav-link active" aria-current="page" href="/">Homea>
    25.         li>
    26.         <li class="nav-item">
    27.           <a class="nav-link" href="/page1">page1a>
    28.         li>
    29.         <li class="nav-item">
    30.           <a class="nav-link" href="/page2">page2a>
    31.         li>
    32.         <li class="nav-item">
    33.           <a class="nav-link" href="/page3">page3a>
    34.         li>
    35.       ul>
    36.     div>
    37.   div>
    38. nav>
    39. {% block content %}{% endblock %}
    40. body>
    41. <script>
    42. $(document).ready(function () {
    43.     $("#myTab").find("li").each(function () {
    44.       var a = $(this).find("a:first")[0];
    45.       console.log(location.pathname)
    46.       if ($(a).attr("href") === location.pathname) {
    47.         $(a).addClass("active");
    48.       } else {
    49.         $(a).removeClass("active");
    50.       }
    51.     });
    52. });

    可以注意到在这里我设置了两个代码块的区域，分别是block head和block content，这两个地方就是用于其他页面进行继承的，如果要引入只在子页面会用到的js之类，可以在block head里面添加，而页面主体显示部分则是在block content里面，当然我看别人的还把title也用block包裹方便子页面改名，我的业务没有相关需求就没改。

     home.html

    1. {% extends "base.html" %}
    2.  
    3. {% block content%}
    4. <p>this is home pagep>
    5. {% endblock %}

     page1.html

    1. {% extends "base.html" %}
    2.  
    3. {% block content%}
    4. <p>this is page1p>
    5. {% endblock %}

    其他的以此类推，这样就不需要重新写一次导航栏也能把不同页面分在不同的HTML文件当中了。

    我之前踩的坑主要在于以为不同页面就要继承不同的代码块，在base定义了很多比如block home, block page1, block page2这种，然后再继承，后来发现显示出问题了，才醒悟过来既然显示的地方都一样就没必要新建那么多，都是替换同一块区域就行了，

  • 相关阅读:
    SpringBoot 3.3.1 + Minio 实现极速上传和预览模式
    vmware扩容CentOS磁盘的两种方案
    lua和C++调用学习笔记系列一
    Stata制作限制立方样条(RCS)（2）
    【敬伟ps教程】自由变换
    SQL Server 基础语法2(超详细!)
    DPDK 网络加速在 NFV 中的应用
    DoozyUI⭐️十六、Progressor Group：可视化帮手，进度条组自动求平均值
    链表(三)——链表中的经典算法
    【ISO14229_UDS刷写】-3-$36诊断服务TransferData理论部分
  • 原文地址：https://blog.csdn.net/azyxa1/article/details/134205308