代码改变世界

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

2017-11-07 22:15  055李小锐  阅读(185)  评论(0)  编辑  收藏  举报
  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. 首页、登录页、注册页都按上述步骤改写。

ddtt.py

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def base():
    return render_template('base.html')

@app.route('/index/')
def index():
    return render_template('index.html')

@app.route('/login/')
def login():
    return render_template('login.html')

@app.route('/zhuce/')
def zhuce():
    return render_template('zhuce.html')

if __name__ == '__main__':
    app.run(debug=True)

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>i{% block titlr %}{% endblock %}MIS07</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/base.css') }}">
    <script src="{{url_for('static',filename='js/base.js') }}" type="text/javascript"></script>


    {% block head %}

    {% endblock %}

</head>
<body id="myBody">

<div class="clearfloat">
     <nav >
         <img  src="{{ url_for('static',filename='images/liangzi.jpg') }}" alt="lz" width="20px">
         <a href="{{url_for('index')}}">首页</a>
         <input type="text" name="search" >
         <button type="submit">搜索</button>
         <a href="{{url_for('login')}}">登录</a>
         <a href="{{url_for('zhuce')}}">注册</a>
         <a href="" >哇哇哇</a>
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";>
     </nav><hr>

</div>





</div>
        <div id="footer" style="background-color: lightskyblue;clear: both;text-align: center;"></div>

　

{% block main %}

{% endblock %}

</body>
<footer>
 <div class="footer_box">
      Copyright@ 2015-2019 个人版权，版权所有　　作者：dadadrrr　　
 </div>
 </footer>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title></title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/index.css')}}">
    <script src="{{url_for('static',filename='js/index.js') }}" type="text/javascript"></script>


</head>

<body id="myBody">

<div class="clearfloat">
     <nav >

         <a href="{{ url_for('index')}}">首页</a>
         <a href="">下载</a>
         <a href="https://y.qq.com/?from=newtab">音乐</a>
         <a href="http://www.1905.com/">电影</a>
         <input type="text" name="search">
         <button type="submit">搜索</button>
         <a href="http://127.0.0.1:5000/login">登录</a>
         <a href="{{ url_for('zhuce') }}">注册</a>
         <a href="" >加入我们</a>
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";>
     </nav><hr>

</div>

<br><br><br><br><br><br>
<div class="desc" >
        <hr>
        <div class="img" >
            <a href="http://www.gzcc.cn/">
                <img src="http://img1.imgtn.bdimg.com/it/u=1137883556,1724295533&fm=200&gp=0.jpg" width="20px">
            </a>
            <div><a href="http://www.gzcc.cn/">asdsadd</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img5.imgtn.bdimg.com/it/u=3778875510,3433017087&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">dasdadsdddd</a></div>
        </div>

        <div class="img" class="clearfloat" class="img-hover">
            <a href="http://www.gzcc.cn/">
                <img src="http://img0.imgtn.bdimg.com/it/u=2035935358,1694862404&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">双十一</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img0.imgtn.bdimg.com/it/u=1822961415,409605297&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">aasdas</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img4.imgtn.bdimg.com/it/u=4201211113,1653247897&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">dasdads</a></div>
        </div>
                <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img5.imgtn.bdimg.com/it/u=1203035184,1555274189&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">dasdsadsad</a></div>
        </div>


</div>
        <div id="footer" style="background-color: lightskyblue;clear: both;text-align: center;"></div>

　





</body>
<footer>
 <div class="footer_box">
      Copyright@ 2015-2019 个人版权，版权所有　　作者：dadadrrr　　
 </div>
 </footer>
</html>

login.html

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

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/base.css') }}">
    <script src="{{url_for('static',filename='js/login.js') }}" type="text/javascript"></script>
{% endblock %}
{% block main %}
    <div class="box">
        <h1>Login</h1>
        <form method="post">

            <input class="loginInput" type="text" id="uname" placeholder="Uname" required="required">
            <input class="loginInput" type="password" id="upass" placeholder="password" required="required">
            <div id="error_box"><br></div>
            <div class="input_box">
                <button onclick="myLogin()" type="submit" class="btn btn-primary btn-block btn-large">登录</button>
                <br>
                <button onclick=window.alert("是否取消登录！") type="submit" class="btn btn-primary btn-block btn-large"> cancel
                </button>
            </div>
        </form>
    </div>


{% endblock %}

zhuce.html

{% 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/zhuce.js') }}" type="text/javascript"></script>
{% endblock %}
{% block main %}
<div class="box" >
    <h1>用户注册</h1>
    <form method="post">

        <input class="loginInput" type="text"  id="uname" placeholder="Uname" required="required">
        <input class="loginInput" type="text"  id="email" placeholder="Email" required="required">
        <input class="loginInput" type="text"  id="phone" placeholder="Phone number" required="required">
        <input class="loginInput" type="password"  id="upass" placeholder="Password" required="required">
        <input class="loginInput" type="password"  id="cpassword" placeholder="Confirm password" required="required">
        <div id="error_box"><br></div>
        <div class="input_box">
        <button onclick="myLogin()" type="submit" class="btn btn-primary btn-block btn-large">立即注册</button><br>
        <button onclick=window.alert("是否取消注册？") type="submit" class="btn btn-primary btn-block btn-large">cancel</button>
        </div>
    </form>
</div>


{% endblock %}