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

  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. 首页、登录页、注册页都按上述步骤改写。 
    from flask import Flask,render_template

app = Flask(__name__)#初始化一个Flask对象，需要传递一个参数__name__

#@app.route('/')      #这是一个装饰器，在函数上面，其作用是做一个URL与视图函数的映射，
                      #http://127.0.0.1:5000/ 去执行hello world（）这个函数
#def hello_world():
    #return 'Hello World!'

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

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

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

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

if __name__=='__main__':#当前这个文件作为主程序运行，就会执行这段，作为模板
    app.run(debug=True)            #启动一个web服务器，来监听并接受用户的请求
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {%block title %}{% endblock %}
        我的页面</title>
    <link rel="stylesheet" type="text/css" href="../static/css/1101.css">
    <script src="../static/js/1101.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    {% block head %}
    {% endblock %}
</head>
<body class="beijing" id="myBody">

<nav class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="{{ url_for('shouye')}}">我的页面</a>
            <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
        </div><img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="{{ url_for('register')}}"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="{{ url_for('login')}}"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>


 </ul>
    </div>
</nav>

<!--<div class="container">
   <div class="jumbotron">
        <h1>欢迎登陆我的页面！</h1>
        <p>Enjoy your funny time~~~</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        分享更多</a>
      </p>
   </div>
</div>-->


<!--<div class="recommend">
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p1.ssl.cdn.btime.com/t01a12b45adb9a4e81a.jpg?size=640x360" alt=""> </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">户外</a></div>
    </div>
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p3.ssl.cdn.btime.com/t0140dd0ea069120507.jpg?size=497x291" alt=""> </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">运动</a></div>

    </div>
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p4.ssl.cdn.btime.com/t01a434ca66af243645.jpg?size=640x360" alt="" > </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">空间</a></div>

    </div>
</div>-->

<nav class="navbar navbar-default navbar-fixed-bottom " role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">MYROOM</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
             <li class="active"><a href="#">管理</a></li>
            <li><a href="#">相册</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="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
{% block main %}
{% endblock %}
</body>
</html>
    {% extends '1101.html' %}
{% block title %}
LOGIN
{% endblock %}

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

{% block main %}
<div class="box" >
    <h2 >LOGIN</h2>
        <div class="input_box">
            账户：<input id="uname" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            密码：<input id="uword" type="password" placeholder="请输入密码">
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">登录</button>
        </div>
    </div>
{% endblock %}
    {% extends '1101.html' %}
{% block title %}
REGISTER
{% endblock %}

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

{% block main %}
 <div class="box">
    <h2>REGISTER</h2>
        <div class="input_box">
            　账号：<input id="uname" type="text" placeholder="请输入账号"></div>
        <div class="input_box">
            　密码：<input id="upass" type="password" placeholder="请输入密码（区分大小写）"></div>
         <div class="input_box">
            　验证：<input id="upass1" type="password" placeholder="再输入密码（区分大小写）"></div>
        <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="fnLogin()" >register</button></div>
    </div>
</div>
{% endblock %}
    {% extends '1101.html' %}
{% block title %}
shouye
{% endblock %}

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

{% block main %}
<div class="recommend">
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p1.ssl.cdn.btime.com/t01a12b45adb9a4e81a.jpg?size=640x360" alt=""> </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">户外</a></div>
    </div>
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p3.ssl.cdn.btime.com/t0140dd0ea069120507.jpg?size=497x291" alt=""> </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">运动</a></div>

    </div>
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p4.ssl.cdn.btime.com/t01a434ca66af243645.jpg?size=640x360" alt="" > </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">空间</a></div>

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

     



 

 

posted @ 2017-11-05 00:31  袁颖琳  阅读(198)  评论(0)    收藏  举报