码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2017-11-08 13:15:54      阅读：164      评论：0      收藏：0      [点我收藏+]

标签：app   har   idt   user   logs   route   http   位置   art   

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

首页、登录页、注册页都按上述步骤改写。

from flask import Flask,render_template

app = Flask(__name__)

@app.route(‘/‘)
def shouye():
    return render_template(‘base.html‘) #跳转首页
@app.route(‘/denglu/‘)
def gg():
    return render_template(‘denglu.html‘) #跳转登录
@app.route(‘/zhuche/‘)
def login():
    return render_template(‘zhuce.html‘)#跳转注册

@app.route(‘/tupian/‘)
def hh():
    return render_template(‘22c.html‘) #跳转图片库
if __name__ == ‘__main__‘:
    app.run(debug=True)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
     <title>
        首页
        {% block denglutitle %}{% endblock %}
    {% block zhucetitle %}{% endblock %}
    {% block tupiantitle %}{% endblock %}
    </title>
    <link rel="stylesheet" type="text/css" href="../static/css/22c.css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="../static/js/mm.js"></script>
    <script src="../static/js/ww.js"></script>
    <script src="../static/js/daohang.js"></script>
{% block dengluhead %}{% endblock %}
{% block zhucehead %}{% endblock %}
{% block tupianhead %}{% endblock %}
</head>
<body id="mybody">

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">首页</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                   <li><a href="{{ url_for(‘gg‘) }}" onclick="">登陆</a></li>
                <li><a href="{{ url_for(‘login‘) }}" onclick="">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        设置 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">收藏</a></li>
                        <li><a href="#">分享</a></li>
                        <li><a href="#">搜索</a></li>
                        <li class="divider"></li>
                        <li><a href="#">点赞</a></li>
                    </ul>
                </li>
                <li><a href="#">||</a></li>
            </ul>
        </div>
        <div style="float: left">
            <img id="myonoff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" style="width:40px" >
        </div>
        <div>
            <ul class="nav navbar-nav">
               <li><a href="{{ url_for(‘hh‘) }}" onclick="">图片区</a></li>
            </ul>
        </div>
        <div>
            <input type="text" name="user" id="user" placeholder="请输入内容">
            <input type="button" value="搜索" class="btn btn-success" onclick="">
        </div>
    </div>
</nav>

<nav class="navbar navb
{% extends ‘base.html‘ %}

{% block denglutitle %}登陆{% endblock %}
{% block dengluhead %}
    <link href="../static/css/mm.css" rel="stylesheet" type="text/css">
    <script src="../static/js/mm.js"></script>

{% endblock %}
{% block denglubody %}
    <div class="box">
        <h2>Login</h2>

        <div class="input_box">
            <input type="text" id="uname" placeholder="Your Name">
        </div>
        <div class="input_box">
            <input type="password" id="upass" placeholder="password">
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">Enter</button>
        </div>

    </div>
{% endblock %}




{% extends ‘base.html‘ %}
{% block zhucetitle %}注册{% endblock %}
{% block zhucehead %}

    <link rel="stylesheet" type="text/css" href="../static/css/ww.css">
    <script src="../static/js/ww.js"></script>
{% endblock %}

<div id="container">
    <div id="header"><h2 align="center">Registration</h2></div>
    <div id="content">
        <form>
            <p align="center">
            <p align="center">
                <input type="text" name="user" id="user" placeholder="Username">
            </p>
            <p align="center">
            <p align="center">
                <input type="password" name="pass" id="pass" placeholder="Password">
            </p>
            <p align="center">
            <p align="center">
                <input type="password" name="again" id="again" placeholder="Input again">
            </p>
            <p align="ce




{% extends ‘base.html‘ %}

{% block tupiantitle %}图片{% endblock %}
{% block tupianhead %}
    <title>暗夜猎手原画</title>
    <link rel="stylesheet" href="../static/css/22c.css" ype="text/css">
{% endblock %}
{% block tupianbody %}
   <div>
        <div class="img">
            <a href="http://www.baidu.com/">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508502727361&di=10c6b8b7e89ba8b2f4aa64a4416aea8d&imgtype=0&src=http%3A%2F%2Flol.wanyx.com%2Fimg.wanyx.com%2Fpublic%2Fupload%2Fhero%2F1436233111.jpg" ></a>
            <div class="sa"><a href="http://www.baidu.com/">原始维恩</a></div>
        </div>

      <div class="img">
               <a href="http://www.baidu.com/">
               <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508480168515&di=4d42c1fad395143bf3bc06f113f8e15e&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201604%2F23035814tgyvdcay.jpg"></a>
      <div class="sa"> <a href="http://www.baidu.com/">苍穹之光</a></div>
      </div>




   </div>

{% endblock %}






 


ype="radio" name="r1" id="r1" value="stu">student
                <input type="radio" name="r2" id="r2" value="tea">teacher
            </p>
            <div id="error_box"><br></div>
            <p align="center">
                <input type="button" value="registration" onclick="fnRegistration()">
            </p>

        </form>
    </div>
    <div id="footer"><p align="right">版权FFR</p></div>
</div>
{% endblock %}




 


ar-inverse navbar-fixed-bottom" role="navigation">
    <ul class="nav navbar-nav">
        <li><img src="http://www.gzcc.cn/2016/images/footer1-logo.png"></li>
        <li style="color: bisque;">版权所有@FFR</li>
    </ul>
</nav>

<script>
    document.write(Date())
</script>

<img src="{{ url_for(‘static‘,filename=‘image/12g.jpg‘) }}" alt="wo" width="300">
{% block denglubody %}{% endblock %}
{% block zhucebody %}{% endblock %}
{% block tupianbody %}{% endblock %}
</body>
</html>




 
加载静态文件,父模板的继承和扩展
标签：app   har   idt   user   logs   route   http   位置   art   
原文地址：http://www.cnblogs.com/ffr0068/p/7803296.html

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！