flask踩坑集锦

最新推荐文章于 2024-07-11 23:43:49 发布

我爱学习学习爱我学习使我快乐

最新推荐文章于 2024-07-11 23:43:49 发布

阅读量375

点赞数

文章标签： flask python 后端

本文链接：https://blog.csdn.net/azyxa1/article/details/134205308

版权

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

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

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

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

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>myWeb</title>
        <link rel="stylesheet" type="text/css" href="../static/css/base.css">
        <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css">
    <script src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/daterangepicker.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.bundle.js"></script>
{% block head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav" id="myTab">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/page1">page1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/page2">page2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/page3">page3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
{% block content %}{% endblock %}
</body>
<script>
$(document).ready(function () {
    $("#myTab").find("li").each(function () {
      var a = $(this).find("a:first")[0];
      console.log(location.pathname)
      if ($(a).attr("href") === location.pathname) {
        $(a).addClass("active");
      } else {
        $(a).removeClass("active");
      }
    });
});
</script >
</html>

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

home.html

{% extends "base.html" %}

{% block content%}
<p>this is home page</p>
{% endblock %}

page1.html

{% extends "base.html" %}

{% block content%}
<p>this is page1</p>
{% endblock %}

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

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

我爱学习学习爱我学习使我快乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flask踩坑集锦

很久之前用过flask，那时候是跟着教程，教程怎么做我就怎么做，没有仔细考虑过。现在是全靠文档和搜索一步一步搭建，忘了很多东西，就碰了很多壁，浅浅记录一下子。
复制链接

扫一扫

flask踩坑集锦

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

“相关推荐”对你有帮助么？