11.5

最新推荐文章于 2025-09-10 17:59:49 发布

转载最新推荐文章于 2025-09-10 17:59:49 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenyanxi123/p/7788770.html

文章标签：

#python

本文介绍如何使用Flask框架进行模板继承，并展示如何加载静态文件如CSS、JS和图片等资源。通过示例代码，展示了父模板(base.html)的定义方式，以及子模板如何继承并覆盖父模板中的特定部分。

用url_for加载静态文件
1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
2. flask 从static文件夹开始寻找
3. 可用于加载css, js, image文件
继承和扩展
1. 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
2. 子模板继承父模板
  1. {% extends 'base.html’ %}
3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
  1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
  2. {% block head %}{% endblock %}
  3. {% block main %}{% endblock %}
4. 子模板中写代码实现自己的需求。block
  1. {% block title %}登录{% endblock %}

首页、登录页、注册页都按上述步骤改写。

首页：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}
    {% endblock %}    网易考拉</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/shouye.css') }}">
    {%  block head %}
    {% endblock %}
</head>
<nav style="background-color: blanchedalmond">
    <img src="{{ url_for('static',filename='img/daohang.jpg') }}" width="600px">
    <input type="text" placeholder="输入你想找的宝贝">
    <input type="button" value="搜索">
    <a>购物车</a>

    <a href="https://www.kaola.com/activity/flashSaleIndex/show.html?navindex=2&zn=top">今日限时购</a>
    <a href="https://www.kaola.com/activity/newArrival.html?navindex=3&zn=top">每日上新</a>
    <a href="{{ url_for('tt') }}">登陆</a>
    <a href="{{ url_for('zhuce') }}">注册</a>

</nav>
<body class="li">
<h1 align="center"><a href="https://www.kaola.com/?zn=top"target="_blank">网易考拉</a></h1>
<br>
<br>
<div>
  <select class="ziti">
      <option>收藏</option>
      <option>点赞</option>
      <option>评论</option>
  </select>



</div>



    {%  block main %}
    {% endblock %}

</body>
</html>

登录页：
{% extends 'shouye.html' %}
{% block title %}
    登录
{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/dl.css') }}">
    <script src="{{ url_for('static',filename='js/denglu.js') }}"></script>
{% endblock %}


{%  block main %}
    <div class="box">
    <div id="tittle"><h2 align="center">登录</h2></div>
    <div class="input_box">
        账户： <input id="uname" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
        密码： <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="input_box">
        <button onclick="foLogin()">登录</button>
    </div>

    <button type="button" onclick="foLogin()"><a href="zhuce.html">注册</a></button>

</div>
    {% endblock %}

注册页：
{% extends 'shouye.html' %}
{% block title %}
    注册
{% endblock %}
{%  block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/dl.css') }}">
    <script src="{{ url_for('static',filename='js/yx.js') }}"></script>
{% endblock %}
{% block main %}
<div class="box">
    <div id="tittle"><h2 align="center">新用户注册</h2></div>
    <div class="input_box">
        用户名： <input id="uname" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
        密码： <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div class="input_box ">
        密码：<input id="upass1" type="password" placeholder="请再次输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="input_box">
        <button onclick="foLogin()">注册</button>
    </div>
</div>
 {% endblock %}
</body>
</html>