zoukankan      html  css  js  c++  java

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

    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__)


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


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


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


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


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


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

    base.html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block tite %}{% endblock %}
        搜索百科</title>
    <script src="../static/JS/李易峰.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/css/liyifeng.css">
    <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    {% block head %}
    {% endblock %}
</head>
<body id="myBody" bgcolor="#e9967a">
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="https://www.4493.com/star/section?fenlei=1&quyu=1&sex=1">演员列表</a>
        </div>
        <div>
            <form>
                <ul class="nav navbar-nav navbar-left">
                    <li class="dropdown">
                        <a href="{{ url_for('base') }}"
                           class="dropdown-toggle" data-toggle="dropdown">
                            首页
                        </a>
                    </li>
                </ul>
            </form>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <a href="{{ url_for('login') }}">
                    <button type="button" class="btn btn-default">登录</button>
                </a>
                <a href="{{ url_for('regist') }}">
                    <button type="button" class="btn btn-default">注册</button>
                </a>
                <form class="navbar-form navbar-left" role="search">
                    <a href="https://baike.baidu.com/help" class="dropdown-toggle">
                        <button type="button" class="btn btn-default">帮助</button>
                    </a>
                </form>
                <form class="navbar-form navbar-right" role="search">
                    <a href="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin">
                        <button type="button" class="btn btn-default">送花</button>
                    </a>
                </form>
            </form>
        </div>
    </div>
</nav>
{% block main %}
{% endblock %}
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="10px">
<img src="{{ url_for('static',filename='image/image.jpeg') }}" alt="" width="30px">

<a href="https://baike.so.com/create/edit/?eid=4909310&sid=5127865">
    <img src="https://p1.ssl.qhmsg.com/t01d08b6f07a9225737.png" style=" 200px"></a>
<div class="label">
    <form method="get">
        <label>中国内地男明星人气人气排行榜:</label>
        <select name="" onchange="javascript:if (this.options[this.selectedIndex].value != '')
     window.open(this.options[this.selectedIndex].value);this.options[0].selected;">
            <a href="https://baike.baidu.com/item/%E8%83%A1%E6%AD%8C/312718">
                <option value="0">李易峰</option>
            </a>
            <a href="https://baike.baidu.com/item/%E6%9D%A8%E6%B4%8B/11573">
                <option value="1">杨洋</option>
            </a>
            <a href="https://baike.baidu.com/item/%E8%83%A1%E6%AD%8C/312718">
                <option value="1">胡歌</option>
            </a>
        </select>
    </form>
</div>
<h4 class="textblue">代表作品：</h4>
<div class="recommend">
    <div class="img">
        <h5><a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"></a></h5>
        <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=ccb6b48247166d222c7a1dc6274a6292/48540923dd54564e0b15d770b7de9c82d1584f02.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%8F%A4%E5%89%91%E5%A5%87%E8%B0%AD/5016869">古剑奇谭</a>
        </div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin">
            <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=1c3a441f8a025aafc73f76999a84c001/b21bb051f8198618fb53ed5b42ed2e738ad4e6dd.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E9%BA%BB%E9%9B%80/17612774">麻雀</a></div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin">
            <img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=06534c58b0fd5266b3263446ca71fc4e/8326cffc1e178a823e993f13f003738da877e8d8.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E6%A0%80%E5%AD%90%E8%8A%B1%E5%BC%80/15839944">栀子花开</a>
        </div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin">
            <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=e95988cb652762d09433acedc185639f/bf096b63f6246b604c86859cedf81a4c500fa249.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E8%80%81%E7%82%AE%E5%84%BF/15891954">老炮儿</a></div>
    </div>
    <br>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="http://music.baidu.com/artist/1370">音乐作品</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="http://music.baidu.com/?fr=baikePC">热门歌曲</a></li>
                <li><a href="https://baike.baidu.com/item/%E6%98%93%E5%B3%B0%E6%83%85%E4%B9%A6/15815910">专辑</a></li>
                <li class="active"><a
                        href="http://bd.kuwo.cn/mingxing/%E6%9D%8E%E6%98%93%E5%B3%B0.htm?from=baidu">单曲</a></li>
                </li>
            </ul>
        </div>
    </div>
</nav>
<footer>
    <div class="foot">
        <div><a href="#"> 点我呀</a> · <a href="#"> 加入我们</a> · <a href="#"> 歌曲或歌名 </a> · <a href="#">帮助中心</a> · <a
                href="#">合作伙伴</a></div>
        <div>中国大陆男演员</div>
    </div>
</footer>
</body>
</html>

    登录：

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

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

{% block main %}
    <div class="box">
        <h1>登录</h1>
        <div class="input_box">
            帐号：<input id="name" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            密码：<input id="pass" type="password" placeholder="请输入密码">
        </div>
        <div id="error_box"><br>
        </div>
        <div class="input_box">
            <button onclick="fnLogin()">login</button>
            <a class="link-forget cl-link-blue" href="get_password.html">忘记密码</a><br>
            <a href="regist.html"><input type="button" class="btn btn-info" name="regist" value="新用户注册"></a>
        </div>
    </div>
{% endblock %}

    注册：

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

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

{% block main %}
    <div class="box">
        <h1>注册</h1>
        <div class="input_box">
            注册帐号：<input id="zcuname" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            注册密码：<input id="zcupassword1" type="password" placeholder="请输入密码">
        </div>
        <div class="input_box">
            再次输入:<input id="zcupassword2" type="password" placeholder="请再次输入密码">
        </div>
        <div id="zcerror_box"><br></div>
        <div class="input_box">
            <button onclick="fnEnroll()">立即注册</button>
            <a href="login.html">已注册</a>
        </div>
    </div>
{% endblock %}

    结果：
  • 相关阅读:
    软阴影的实现(转帖)
    卡巴斯基：警惕IE拦截器恶意推广导航网站 狼人:
    安全问题拷问着电子支付第三方未来 狼人:
    微软警告：泄露的Office 2010预览版或含病毒 狼人:
    《越狱》完结 米帅迷应小心纹身网站挂马 狼人:
    赛门铁克和McAfee：目标锁定iPhone！ 狼人:
    McAfee将与EMC合作推出在线PC备份服务 狼人:
    恶意软件分析师：面临社交网络威胁的用户已10亿 狼人:
    Mac OS X现漏洞 苹果称是Java导致恶意攻击 狼人:
    暴风影音声明：DNS服务器才是故障源头 狼人:
  • 原文地址：https://www.cnblogs.com/laidaili/p/7781063.html
Copyright © 2011-2022 走看看