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

  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 %}

导航栏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jelly-fish汇</title>
 <link rel="stylesheet" type="text/css" href="../static/css/baidu.css">
<style>

</style>
</head>
<body>

<ul>
    <li><img src="http://www.jelly-fish.co.kr/img/main/logo01.png" width="80px" height="40px"></li>
  <li><a class="active" href="">首页</a></li>
  <li><a href="">活动汇</a></li>
  <li><a href="">下载APP</a></li>
  <li class="research">
      <input class="research" type="text" class="right" placeholder="请输入要搜索的内容"></li>
    <li class="b">  <button type="submit" >搜索</button>
  </li>

  <li class="login"><a href="{{ url_for('new login') }}">登录</a></li>
  <li class="regist"><a href="{{ url_for('new regist') }}" style="color: hotpink">注册</a></li>
</ul>


</body>
</html>

登录：

{% extends '.html'%}
  {% block aa %}

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../static/js/login.js">

</script>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>

</head>
<body>
<div class="lg-container">
    <h1>登录</h1>
    <form action="" id="lg-form" name="lg-form" method="post">

        <div>
        用户名：    <label for="username">Username:</label>
                <input id="uname" type="text" name="用户名" placeholder="请输入用户名"><br>
        </div>

        <div>
        密码：<label for="password">Password:</label>
              <input class="password" id="upass" type="password" name="密码" placeholder="请输入密码" >
        </div>

        <input type="checkbox" type="checkbox" name="vehicle" value="true"><span>记住密码</span>
        <a class="right" href="">登录遇到问题?</a>

        <div id="error_box"></div>
        <button type="submit" id="login" onclick="fnlogin()">登录</button>


    </form>
    <div id="message"></div>
</div>
</body>
</html>
 {% endblock %}

注册：

{% extends 'daohang.html'%}
  {% block aa %}

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../static/js/login.js">

</script>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>

</head>
<body>
<div class="lg-container">
    <h1>注册</h1>
    <form action="" id="lg-form" name="lg-form" method="post">

        <div>
            <label for="username">Username:</label>
                <input type="text" name="user_name" autocomplete="off" placeholder="登录用户名，不少于6个字符"><br>
        </div>

        <div>
        <label for="phonenumber">number:</label>
              <input type="text" name="phone_number" autocomplete="off" placeholder="手机号码" >
        </div>

        <div>
        <label for="password">Password:</label>
              <input type="text" name="password" autocomplete="off" placeholder="设置密码" >
        </div>

        <div id="error_box"></div>
        <button type="submit" id="login" onclick="fnlogin()">注册</button>


    </form>
    <div id="message"></div>
</div>
</body>
</html>
{% endblock %}

 

posted @ 2017-11-05 22:02  047连薇娜  阅读(144)  评论(0)  编辑  收藏  举报