Flask高级视图_蓝图模板,静态文件,url_for的实战
一.介绍
-
蓝图模板
-
静态文件
-
url_for在蓝图中的使用:
二.实例
图片资源:
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> <a href="{{ url_for('register') }}">注册</a> {% 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"> </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)