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

  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 %}
        广州商学院</title>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/base.css') }}">
    <script src ="{{ url_for('static',filename='js/base.js') }}"></script>
{% block head %}
{% endblock %}
</head>
<body id="myBody">

<nav>

    <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"　height="20" width="20px">
    <a href="{{ url_for('shouye') }}">首页</a>

    <input type="text" name="search">
    <button type="submit">搜索</button>

    <a class="right" href="{{ url_for('login') }}">登录</a>
    <a href="{{ url_for('zhuce') }}">注册</a>

</nav>

{% block main %}
{% endblock %}

    <p class="text1">版权所有：广州商学院        地址：广州市黄埔区九龙大道206号
    </p>

</body>
</html>

 首页：

{% extends'base.html' %}
    {% block title %}
    首页
    {% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/shouye.css') }}">
{% endblock %}
{% block main %}
<body>

<div>
    <p><span style="font-size: 40px;color: blue;font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace";>欢迎来到广州商学院！</p>
</div>



<div class="tu">
        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://static.runoob.com/images/demo/demo4.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn">校园风光</a></div>
        </div>
        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://static.runoob.com/images/demo/demo3.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn">校友风采</a></div>
        </div>
        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://static.runoob.com/images/demo/demo2.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn">学校文化</a></div>
        </div>
        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://static.runoob.com/images/demo/demo1.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn">学生风采</a></div>
        </div>
    </div>

</body>

{% endblock %}

登录页：

{% extends'base.html' %}
    {% block title %}
    登录
    {% endblock %}
{% block head %}

    <link rel="stylesheet"type="text/css"href="{{ url_for('static',filename='css/login.css') }}">
    <script src="{{ url_for('static',filename='js/login.js') }}"></script>
{% endblock %}
{% block main %}

<body>

<div class="aa" >
    <div class="login" ><h2>登录</h2></div>
    <div class="aa1" >
        账号：<input id="name" type="text"placeholder="请输入用户名"><br>
        密码：<input id="password" type="password"placeholder="请输入密码"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="aa2" >
         <button onclick="myLogin()">登录</button>
         <button type="button" onclick=window.alert("是否取消登录！")>取消</button>


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

注册页：

{% extends'base.html' %}
    {% block title %}
    注册
    {% endblock %}
{% block head %}
    <link rel="stylesheet"type="text/css"href="../static/css/zhuce.css">
    <script src="../static/js/zhuce.js"></script>

{% endblock %}
{% block main %}
<body>

<div class="aa" >
    <div class="zhuce" ><h2>新用户注册</h2></div>
    <div class="aa1" >
          请输入账号：<input id="name" type="text"placeholder="请输入用户名"><br>
          请输入密码：<input id="password" type="password"placeholder="请输入密码"><br>
          请确认密码：<input id="password2" type="password2"placeholder="请再次输入密码"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="aa2" >
         <button onclick="myLogin()">注册</button>

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

 

posted on 2017-11-08 16:49  097吴嘉玲  阅读(153)  评论(0)    收藏  举报

导航