Flask高级视图_蓝图模板,静态文件,url_for的实战

Flask高级视图_蓝图模板,静态文件,url_for的实战

一.介绍

  • 蓝图模板
    • 寻找规则
      • 如果项目中的templates文件夹中有相应的模版文件,就直接使 用了。
      • 如果项目中的templates文件夹中没有相应的模版文件,那么就 到在定义蓝图的时候指定的路径中寻找。
      • 并且蓝图中指定的路径可以为相对路径,相对的是当前这个蓝图文件所在的目录
    • 总结
      • 常规:蓝图文件在查找模版文件时,会以templates为根目录进行 查找
    • 注意
      • 只有确定templates目录下没有对应的 html文件名的时候, 才会去蓝图文件指定的目录下查找,指定才会生效!
      • 若templates目录下,有一个与蓝图文件指定的目录下同名 的一个 html文件时,优先走templates目录下的东西
  • 静态文件
    • 蓝图对象创建时不会默认注册静态目录的路由。需要我们在创建时 指定 static_folder 参数。
    • 总结
      • 查找方式1:查找静态文件时,正常情况下,会以 static为根目录进行查找
      • 查找方式2:查找静态文件时,非正常情况下,需要用 url_for(‘蓝图的名字.static’),然后会去蓝图对象在创建时指定的 静态文件夹目录下 去查找静态文件
  • url_for在蓝图中的使用:
    • 如果使用蓝图,那么以后想要反转蓝图中的视图函数为url,就应该 在使用url_for的时候指定这个蓝图名字。
    • app类中、模版中、同一个蓝图类中都是如此。否则就找不到这个 endpoint
    • 总结
      • url_for(‘蓝图名.static’,filename=‘相对路径/静态文件’)
      • 蓝图名.static会去找蓝图创建时,指定的装静态文件资源的静态文件夹,还会映射static_url_path(一个静态文件夹名称,如果在创建蓝图时设置了,这个静态文件夹名称将会取代static_folder所设置的静态文件夹名称,让static_folder所设置的静态文件夹名称失效,反正就是让static_folder退休!)

二.实例

图片资源:

在这里插入图片描述
在这里插入图片描述

css资源:
  • style.css
    @charset "utf-8";
    /* Reset CSS */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    body {
    	background: #DCDDDF ;
    	color: #000;
    	font: 14px Arial;
    	margin: 0 auto;
    	padding: 0;
    	position: relative;
    }
    h1{ font-size:28px;}
    h2{ font-size:26px;}
    h3{ font-size:18px;}
    h4{ font-size:16px;}
    h5{ font-size:14px;}
    h6{ font-size:12px;}
    h1,h2,h3,h4,h5,h6{ color:#563D64;}
    small{ font-size:10px;}
    b, strong{ font-weight:bold;}
    a{ text-decoration: none; }
    a:hover{ text-decoration: underline; }
    .clearfix:after,form:after {
    	content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }
    .container { margin:75px auto 0 auto; position: relative; width: 900px; }
    #content {
    	background: #f9f9f9;
    	background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
    	background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
    	background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
    	background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
    	background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
    	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 ); */
    	-webkit-box-shadow: 0 1px 0 #fff inset;
    	-moz-box-shadow: 0 1px 0 #fff inset;
    	-ms-box-shadow: 0 1px 0 #fff inset;
    	-o-box-shadow: 0 1px 0 #fff inset;
    	box-shadow: 0 1px 0 #fff inset;
    	border: 1px solid #c4c6ca;
    	margin: 0 auto;
    	padding: 25px 0 0;
    	position: relative;
    	text-align: center;
    	text-shadow: 0 1px 0 #fff;
    	width: 400px;
    }
    #content h1 {
    	color: #7E7E7E;
    	font: bold 25px Helvetica, Arial, sans-serif;
    	letter-spacing: -0.05em;
    	line-height: 20px;
    	margin: 10px 0 30px;
    }
    #content h1:before,
    #content h1:after {
    	content: "";
    	height: 1px;
    	position: absolute;
    	top: 10px;
    	width: 27%;
    }
    #content h1:after {
    	background: rgb(126,126,126);
    	background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
    	background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    	background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    	background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    	background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        right: 0;
    }
    #content h1:before {
    	background: rgb(126,126,126);
    	background: -moz-linear-gradient(right,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
    	background: -webkit-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    	background: -o-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    	background: -ms-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    	background: linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        left: 0;
    }
    #content:after,
    #content:before {
    	background: #f9f9f9;
    	background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
    	background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
    	background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
    	background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
    	background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
    	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 ); */
    	border: 1px solid #c4c6ca;
    	content: "";
    	display: block;
    	height: 100%;
    	left: -1px;
    	position: absolute;
    	width: 100%;
    }
    #content:after {
    	-webkit-transform: rotate(2deg);
    	-moz-transform: rotate(2deg);
    	-ms-transform: rotate(2deg);
    	-o-transform: rotate(2deg);
    	transform: rotate(2deg);
    	top: 0;
    	z-index: -1;
    }
    #content:before {
    	-webkit-transform: rotate(-3deg);
    	-moz-transform: rotate(-3deg);
    	-ms-transform: rotate(-3deg);
    	-o-transform: rotate(-3deg);
    	transform: rotate(-3deg);
    	top: 0;
    	z-index: -2;
    }
    #content form { margin: 0 20px; position: relative }
    #content form input[type="text"],
    #content form input[type="password"] {
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	-ms-border-radius: 3px;
    	-o-border-radius: 3px;
    	border-radius: 3px;
    	-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    	-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    	-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    	-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    	box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    	-webkit-transition: all 0.5s ease;
    	-moz-transition: all 0.5s ease;
    	-ms-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    	transition: all 0.5s ease;
    	background: #eae7e7 url(../images/8bcLQqF.png) no-repeat;
    	border: 1px solid #c8c8c8;
    	color: #777;
    	font: 13px Helvetica, Arial, sans-serif;
    	margin: 0 0 10px;
    	padding: 15px 10px 15px 40px;
    	width: 80%;
    }
    #content form input[type="text"]:focus,
    #content form input[type="password"]:focus {
    	-webkit-box-shadow: 0 0 2px #ed1c24 inset;
    	-moz-box-shadow: 0 0 2px #ed1c24 inset;
    	-ms-box-shadow: 0 0 2px #ed1c24 inset;
    	-o-box-shadow: 0 0 2px #ed1c24 inset;
    	box-shadow: 0 0 2px #ed1c24 inset;
    	background-color: #fff;
    	border: 1px solid #ed1c24;
    	outline: none;
    }
    #username { background-position: 10px 10px !important }
    #password { background-position: 10px -53px !important }
    #content form input[type="submit"] {
    	background: rgb(254,231,154);
    	background: -moz-linear-gradient(top,  rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
    	background: -webkit-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
    	background: -o-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
    	background: -ms-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
    	background: linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
    	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 ); */
    	-webkit-border-radius: 30px;
    	-moz-border-radius: 30px;
    	-ms-border-radius: 30px;
    	-o-border-radius: 30px;
    	border-radius: 30px;
    	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    	-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    	-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    	box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    	border: 1px solid #D69E31;
    	color: #85592e;
    	cursor: pointer;
    	float: left;
    	font: bold 15px Helvetica, Arial, sans-serif;
    	height: 35px;
    	margin: 20px 0 35px 15px;
    	position: relative;
    	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    	width: 120px;
    }
    #content form input[type="submit"]:hover {
    	background: rgb(254,193,81);
    	background: -moz-linear-gradient(top,  rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
    	background: -webkit-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
    	background: -o-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
    	background: -ms-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
    	background: linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
    /* 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 ); */
    }
    #content form div a {
    	color: #004a80;
        float: right;
        font-size: 12px;
        margin: 30px 15px 0 0;
        text-decoration: underline;
    }
    .button {
    	background: rgb(247,249,250);
    	background: -moz-linear-gradient(top,  rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
    	background: -webkit-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
    	background: -o-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
    	background: -ms-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
    	background: linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
    	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 ); */
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
    	-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
    	-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
    	box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
    	-webkit-border-radius: 0 0 5px 5px;
    	-moz-border-radius: 0 0 5px 5px;
    	-o-border-radius: 0 0 5px 5px;
    	-ms-border-radius: 0 0 5px 5px;
    	border-radius: 0 0 5px 5px;
    	border-top: 1px solid #CFD5D9;
    	padding: 15px 0;
    }
    .button a {
    	background: url(../images/8bcLQqF.png) 0 -112px no-repeat;
    	color: #7E7E7E;
    	font-size: 17px;
    	padding: 2px 0 2px 40px;
    	text-decoration: none;
    	-webkit-transition: all 0.3s ease;
    	-moz-transition: all 0.3s ease;
    	-ms-transition: all 0.3s ease;
    	-o-transition: all 0.3s ease;
    	transition: all 0.3s ease;
    }
    .button a:hover {
    	background-position: 0 -135px;
    	color: #00aeef;
    }
    
  • body.css
    @-webkit-keyframes animate-cloud {
      from {
        background-position: 600px 100%;
      }
      to {
        background-position: 0 100%;
      }
    }
    @-moz-keyframes animate-cloud {
      from {
        background-position: 600px 100%;
      }
      to {
        background-position: 0 100%;
      }
    }
    @-ms-keyframes animate-cloud {
      from {
        background-position: 600px 100%;
      }
      to {
        background-position: 0 100%;
      }
    }
    @-o-keyframes animate-cloud {
      from {
        background-position: 600px 100%;
      }
      to {
        background-position: 0 100%;
      }
    }
    
    html{
    	height: 100%;
    }
    body{
       background:url(../images/cloud.jpg) 0 bottom repeat-x  #049ec4;
      -webkit-animation: animate-cloud 20s linear infinite;
      -moz-animation: animate-cloud 20s linear infinite;
      -ms-animation: animate-cloud 20s linear infinite;
      -o-animation: animate-cloud 20s linear infinite;
      animation: animate-cloud 20s linear infinite;
      width: 100%;
      height: auto;
    }
    
html源码:
  • 主页
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{% block title %} 主页 {% endblock %}</title>
    
    
    <link rel="stylesheet" type="text/css" href="{{url_for('user.static',filename='css/style.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{url_for('user.static',filename='css/body.css')}}"/> 
    </head>
    <body>
    <div class="container">
    	<section id="content">
            {% block content %}
            <a href="{{ url_for('login') }}">登入</a>&nbsp; &nbsp; &nbsp;
            <a href="{{ url_for('register') }}">注册</a>&nbsp; &nbsp; &nbsp;
            {% endblock %}
    
    	</section><!-- content -->
    </div>
    <!-- container -->
    <br><br>
    <hr>
    <h3 style="color: aqua;text-align: center;">{{ msg }}</h3>
    </body>
    </html>
    
  • 登入页面
    {% extends '主页.html' %}
    
    {% block title %}
        登录页面
    {% endblock %}
    
    {% block content %}
    <form action="" method="post">
        <h1>会员登录</h1>
        <div>
            <input type="text" placeholder="邮箱" required="" id="username" name="uname"/>
        </div>
        <div>
            <input type="password" placeholder="密码" required="" id="password" name="pwd"/>
        </div>
         <div class="">
            <span class="help-block u-errormessage" id="js-server-helpinfo">&nbsp;</span>			</div> 
        <div>
            <!-- <input type="submit" value="Log in" /> -->
            <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login"/>
            <a href="#">忘记密码?</a>
            <!-- <a href="#">Register</a> -->
        </div>
    </form><!-- form -->
    {% endblock %}
    <hr>
    <h3 style="color: aqua;text-align: center;">{{ msg }}</h3>
    
  • 登录成功页面
    {% extends '主页.html' %}
    
    {% block title %}
        登录成功页面
    {% endblock %}
    
    {% block content %}
        <h3 style="color: aquamarine;text-align: center;">欢迎{{ username }}回家啦~</h3>
        <p style="color: blueviolet; text-align: center;">后续内容还会补充!</p>
    {% endblock %}
    
    
python源码:
  • main.py
    #coding=utf-8
    
    from flask import Flask
    
    app = Flask(__name__)
    
    
    from view import user_bp,item_bp
    
    
    app.register_blueprint(user_bp,url_prefix='/user')
    app.register_blueprint(item_bp,url_prefix='/item')
    
    if __name__ == '__main__':
        app.run(debug=True)
    
  • init.py
    from flask import Blueprint,render_template
    
    # 用户模块
    user_bp = Blueprint('user',__name__,template_folder='htmls',static_folder='static')
    
    from view import user
    
    #产品模块
    item_bp = Blueprint('item',__name__)
    
    from view import item
    
  • user.py
    from view import user_bp
    from flask import render_template,request
    
    info = 'NewBurLaSKing的博客又又又更新啦~'
    
    @user_bp.route('/login/',methods=['GET','POST'])
    def login():
        if request.method == 'GET':
            return render_template('登入页面.html',msg=info)
        elif request.method == 'POST':
            uname = request.form.get('uname')
            pwd = request.form.get('pwd')
            if uname == 'NewBurLaSKing' and pwd == '666':
                return render_template('登录成功页面.html',msg=info)
            else:
                return render_template('登入页面.html',msg=info)
    
    @user_bp.route('/register/')
    def register():
        return render_template('注册页面.html',msg=info)
    
    
注:
如果觉得笔记有些问题,麻烦在百忙之中在评论中指正,或提出建议!另外,如果觉得这份笔记对你有所帮助,麻烦动动发财的小手手点一波赞!
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值