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

用url_for加载静态文件
1. <script src="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script>
2. flask 从static文件夹开始寻找
3. 可用于加载css, js, image文件
继承和扩展
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 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="width: 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 %}

结果：

时间： 2024-10-06 09:48:55

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

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

用url_for加载静态文件 <script src="{{ url_for('static',filename='js/login.js') }}"></script> flask 从static文件夹开始寻找可用于加载css, js, image文件继承和扩展把一些公共的代码放在父模板中,避免每个模板写同样的内容.base.html 子模板继承父模板 {% extends 'base.html' %} 父模板提前定义好子模板可以实现一些自己需求的位置及

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

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

Django加载静态文件

方法一: 1.在app目录中创建static 目录,并在该目录下创建存储css,img,js的子目录． 2.在相应的目录下创建相对应的静态文件. static/css/mystyle.css, static/img/timg.jpg,(保存图片) static/js/myjs.js 3.在模板文件中加载静态文件例: mystyle.css: body{ background:blue;} myjs.js: alert('hello') static_test.html: {% load sta

在python3中如何加载静态文件详版步骤

在一个网页中,不仅仅只有一个`html`骨架,还需要`css`样式文件,`js`执行文件以及一些图片等.因此在`DTL`中加载静态文件是一个必须要解决的问题.在`DTL`中,使用`static`标签来加载静态文件.要使用`static`标签,首先需要`{% load static %}`.加载静态文件的步骤如下: 首先确保`django.contrib.staticfiles`已经添加到`settings.INSTALLED_APPS`中. 确保在`settings.py`中设置了`STATIC

041：模版中加载静态文件详解

加载静态文件: 在一个网页中,不仅仅只有一个 html 骨架,还需要 css 样式文件, js 执行文件以及一些图片等.因此在 DTL 中加载静态文件是一个必须要解决的问题.在 DTL 中,使用 static 标签来加载静态文件.要使用 static 标签,首先需要 {% load static %} .加载静态文件的步骤如下: 1. 首先确保 django.contrib.staticfiles 已经添加到 sttings.INSTALLED_APPS 中. 2. 确保在 settings.p

django开发环境setting.py里面设置debug=false时却成功加载静态文件？

django开发环境setting.py里面设置debug=false时却成功加载静态文件?按理来说应该是加载失败的. 启动服务器,运行正常,但是静态文件如css,js,图片是无法加载的. 问题: 解答:问题在于使用的是谷歌浏览器,默认使用了缓存.导致每次访问同一个url时,都返回的是缓存里面的东西. 通过谷歌浏览器里面的开发者工具network下面的选项能禁用缓存.禁用缓存之后,则在django开发环境里面,运行 python manage.py runserver,如将DEBUG的值设为Tr

jinjia2 flask加载静态文件

一.加载静态文件静态文件:css 文件.js文件.图片文件加载静态文件使用的是“url_for”函数语法:{{ url_for( "static", filename="xxxxx" ) }} 路径查找,要以当前项目的static目录作为根目录. 二.实例: 原文地址:https://www.cnblogs.com/yingxiongguixing/p/11987485.html

eclipse中启动spring-mvc项目时无法加载静态文件的问题分析

问题表现: eclipse里使用spring-mvc框架开发web项目,项目正常启动后能访问jsp页面,但jsp页面的网页效果没有生效,并提示jsp文件里提示js找不到,404错误. (1)初步判断: 在浏览器里debug时,jsp页面提示js文件找不到,提示404错误.由于项目名是littlec-exchange-center,访问时url里是exchangecenter,初步判断是路径有错. 尝试解决:在tomcat的conf路径下查看server.xml配置如下: 可以看到,虽然tomca