加载静态文件,父模板的继承和扩展

  1. 用url_for加载静态文件
    1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
  2. 继承和扩展
    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 %}
  3. 首页、登录页、注册页都按上述步骤改写。                                                                                                  父模板：
  4. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{% block title%}{% endblock %}base</title>
<link rel="stylesheet" href="{{ url_for('static',filename='css/base.css')}}">
    <script src="{{ url_for('static',filename='js/base.js') }}"></script>
<base target="_blank" />
{% block head %}
{% endblock %}
</head>
<body>
<div><h1>武林</h1></div>
<nav>

    <a href="http://127.0.0.1:5000/" style="color: red">首页</a>
    <a href="" style="color: red">下载</a>
    <input type="text"name="search">
    <button type="submit" >搜索</button>
    <a href="http://127.0.0.1:5000/login" style="color: red">登录</a>
    <a href="{{ url_for('regist')}}" style="color: red">注册</a>
</nav>
{% block main %}{% endblock %}

</body>
</html>

    首页

    {% extends'base.html' %}
{% block title %}
    首页
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/hh.css')}}" type="text/css">
{% endblock %}
{% block main %}
<body>
<div class="all">
    <div class="img">
        <a href="">
            <img src="http://img2.touxiang.cn/file/20160601/78050c8c02997f95d03bc5c8041b5131.jpg"></a>
        <div class="wenzi1"><a  href="">一念无明</a></div>
    </div>
    <div class="img">
        <a href="">
            <img src="http://img2.touxiang.cn/file/20160601/9144c9b9c9bc63150d9aa5aac727b392.jpg"></a>
        <div class="wenzi2"><a href="">美人为馅</a></div>
    </div>
    <div class="img">
        <a href="">
            <img src="http://img2.touxiang.cn/file/20160504/b1e6d1af8b96f4506d4a8acc9a1182f7.jpg"></a>
        <div class="wenzi3"><a href="">公子如玉</a></div>
    </div>
    <div class="img">
        <a href="">
            <img src="http://img2.touxiang.cn/file/20160601/99473e3887d3e8c6e8a9015e134c3307.jpg"></a>
        <div class="wenzi4"><a href="">刀剑无眼</a></div>
    </div>
</div>

</body>
{% endblock %}
</html>

    登录页

    {% extends'base.html' %}
{% block title %}
    登录
{% endblock %}
{% block head %}
    <link href="../static/css/hh.css" rel="stylesheet" type="text/css">
    <script src="../static/js/hl.js"></script>
{% endblock %}
{% block main %}
<body>
  <div><h1>武林|登录</h1></div>

    <div class="box">

        <div class="input_box">
             姓名：<input type="text" id="uname" placeholder="敢问阁下大名">
        </div>
        <br>
        <div class="input_box">
             密码：<input type="password" id="upass" placeholder="请输入通关密码">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">登录</button>

        </div>
        <br>
    </div>

</div>
{% endblock %}
</body>
</html>

    注册页

    {% extends'base.html' %}
{% block title %}
    注册
{% endblock %}
    {% block head %}
    <link href="../static/css/hh.css" rel="stylesheet" type="text/css">
    <script src="../static/js/hl.js"></script>
{% endblock %}
{% block main %}
<body>
  <div><h1>武林|注册</h1></div>

    <div class="box">

        <div class="input_box">
              请输入账号：<input id="name" type="text"placeholder="请输入用户名"><br>

        </div>
        <br>
        <div class="input_box">
          请输入密码：<input id="password" type="password"placeholder="请输入密码"><br><br>
          请确认密码：<input id="password2" type="password"placeholder="请再次输入密码"><br>
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">注册</button>

        </div>
        <br>
    </div>

</div>
</body>
{% endblock %}
</html>

     首页

    登录

    注册

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/00js/p/7803560.html