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

 

 

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> {% block title %}{% endblock %}-首页</title>
    <link  type="text/css" rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
{% block head %}{% endblock %}
</head>

<body>

<img src="{{ url_for('static',filename='img/网易云.jpg') }}" alt="" width="40px">

<a href="http://music.163.com/">首页</a>
<a href="{{ url_for('login') }}">登录</a>
<a href="{{ url_for('regist') }}">注册</a>
<h2>欢迎登录网易云音乐</h2>

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

login.html

{% extends 'index.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 %}
    <div class="box">
    <h2>登录</h2>
    <br><br>

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

    <div class="input_box">
        密码：<input id="password" type="text" placeholder="请输入密码"><br>
    </div>
    <br>
    <div class="check">
        <input type="radio" name="role" value="stu">用户
        <input type="radio" name="role" value="tea">游客
        <br>
        <input type="checkbox"><span>自动登录</span>     <a href="">忘记密码</a>
    </div>
    <div id="error_box"><br></div>
    <br>
    <div>
        <button onclick="mulogin()">登录</button>
        <a href="regist.html"></a>
    </div>
</div>
{% endblock %}

regist.html

{% extends 'index.html' %}
{% block title %}注册{% endblock %}

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

{% block main %}
     <div class="box">
          <h2>注册</h2>
           <br>
          <div class="input_box">
              账号：<input  id="username" type="text" placeholder="请输入用户名">
          </div>
          <div class="input_box">
              密码：<input  id="password" type="text" placeholder="请输入密码">
          </div>
           <div class="input_box">
                验证：<input  id="password1" type="text" placeholder="请输入密码">
           </div>
           <br><br>
          <div id="error_box"><br></div>
          <div>
              <button onclick="muregist()">注册</button>
          </div>
      </div>
{% endblock %}

首页

登录-首页

注册-首页

 

posted on 2017-11-03 22:37  张木清  阅读(150)  评论(0)  编辑  收藏  举报

导航