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

  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. 首页、登录页、注册页都按上述步骤改写。 
    导航
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}base</title>
    <link rel="stylesheet" href="../static/css/0082.css" type="text/css">
    <script src="../static/js/0082.js"></script>
 {% block head %}{% endblock %}
</head>
<body id="myBody">
{% block main %}{% endblock %}
<nav>
    <div class="layui-col-md4">
        <div class="layui-row" style="padding-top:10px;">
            <img id="myOnOff" onclick="myswitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"
                 style="padding-left: 10px;">
            <a href="{{ url_for('base')}}">首页</a>
            <a href="{{ url_for('login')}}">登录</a>
            <a href="{{ url_for('signin')}}">注册</a>

        </div>
    </div>
    <br>
    <form method="get" action="#">
        <div class="layui-row">
            <div class="layui-col-md3" style="padding-left: 50px;">
                <input type="text" name="title" required lay-verify="required"
                       placeholder="search"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md3" style="padding-left: 50px;">
                <button type="submit" class="layui-btn layui-btn-primary">搜索</button>
            </div>
        </div>
    </form>
    </nav>
<div class="area">

</div>


<<div>
    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">校园风光</a></div>
    </div >
        <div class="img">
        <a href=http://www.gzcc.cn/quanjingxiaoyuan/tour.html">
            <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a></div>
    </div>
<div class="img">
        <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频校园</a></div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a></div>
    </div>
</div>

</div>

<br>
<br>
<footer>
    <div class="footer_box">
        　　
    </div>
</footer>
</body>
</html>

  4. 注册
{% extends'0082.html' %}
<head>

    <meta charset="UTF-8">
    <title>注册</title>
    {% block head %}
    <link href="{{url_for('static',filename='css/zhuce.css')}}" rel="stylesheet" type="text/css" >
    <script src="{{ url_for('static',filename='js/zhuce.js') }}"></script>
     {% endblock %}
</head>

<body>{% block main %}
<div><h1>用户注册</h1></div>
  <div class="aa"><script>document.write("loading....")</script>
    </div>
<div class="flex-container">

    <div class="box">
<h2>欢迎加入</h2>
        <div class="input_box">
            请输入账号　<input id="uname" type="text"laceholder="请输入账号">   </div><br>
        <div class="input_box">
            请输入密码　<input id="upass" type="password" placeholder="请输入密码"></div><br>
         <div class="input_box">
            再输入密码　<input id="upass1" type="password" placeholder="再次输入密码"></div><br>
        <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="fnLogin()" >register</button></div>
    </div>
</div>
</body>{% endblock %}
</html>

  5. 登录
{% extends'0082.html' %}
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    {% block head %}
    <link  href="{{url_for('static',filename='css/zhuce.css')}}" rel="stylesheet" type="text/css">
    <script src="{{url_for('static',filename='js/denglu.js')  }}"></script>
    {% endblock %}
</head>

<body>
{% block main %}
  <div><h1>用户登录</h1></div>
  <div class="aa"><script>document.write("loading....")</script>
    </div>

<div class="flex-container">

    <div class="box">
        <div class="input_box">
            登录　<input id="uname" type="text" placeholder="输入用户名">
        </div>
        <br>
        <div class="input_box">
            密码　<input id="upass" type="password" placeholder="输入密码">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">load</button>
        </div>
    </div>

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

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