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>     
          <a href="{{ url_for('register') }}">注册a>     
          {% endblock %}
  
  	section>
  div>
  
  <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="登录" class="btn btn-primary" id="js-btn-login"/>
          <a href="#">忘记密码?a>
          
      div>
  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)
  
  

注：

如果觉得笔记有些问题，麻烦在百忙之中在评论中指正，或提出建议！另外，如果觉得这份笔记对你有所帮助，麻烦动动发财的小手手点一波赞！