検索

ホームページ >バックエンド開発 >Python チュートリアル >ブートストラップ フレームワーク (Python) を美しくするためのサンプル チュートリアル

ブートストラップ フレームワーク (Python) を美しくするためのサンプル チュートリアル

PHPz
PHPzオリジナル
2017-04-26 10:19:234196ブラウズ

前の章の内容を踏まえると、実際、ページレイヤーに関する限り、機能は簡単に実装できますが、まだ美しさが大きく欠けていることは明らかです。現在、優れたフロントエンドがいくつかあります。 AmazeUI、Tencent WeUI などの CSS フレームワークは、flask とよく統合されているブートストラップ フレームワークです

[関連ビデオの推奨: ブートストラップ チュートリアル]

インストール フレームワーク

ブートストラップのフレームワークを直接参照しますテンプレート内の CDN またはローカル パス さらに、flask のブートストラップ統合パッケージを直接適用することもできます。まず、統合パッケージをインストールする必要があります:

pip3.6 install flask-bootstrap

これは flask 拡張パッケージです。 flask のすべての拡張パッケージはデフォルトで flask.ext で始まり、bootstrap についても同様です。まず、デフォルト ファイルの先頭にあるパッケージをインポートします:

from flask.ext.bootstrap。 import Bootstrap

次に、ブートストラップを初期化してコードを変更します:

bootstrap=Bootstrap(app)

初期化後、Jinja2 の継承メソッドを使用して、これに含まれる Bootstrap の一連の基本テンプレートを使用できます。パッケージ。基本テンプレートは、ブートストラップ内の一連の要素を直接参照します。

jinja2 でのテンプレート継承の使用方法を覚えていますか? 使用する前に、まずベース テンプレートの構造を見てください: 

{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
 <head>
 {%- block head %}
 <title>{% block title %}{{title|default}}{% endblock title %}</title>

 {%- block metas %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {%- endblock metas %}

 {%- block styles %}
 <!-- Bootstrap -->
 <link href="{{bootstrap_find_resource(&#39;css/bootstrap.css&#39;, cdn=&#39;bootstrap&#39;)}}" rel="external nofollow" rel="stylesheet">
 {%- endblock styles %}
 {%- endblock head %}
 </head>
 <body{% block body_attribs %}{% endblock body_attribs %}>
 {% block body -%}
 {% block navbar %}
 {%- endblock navbar %}
 {% block content -%}
 {%- endblock content %}

 {% block scripts %}
 <script src="{{bootstrap_find_resource(&#39;jquery.js&#39;, cdn=&#39;jquery&#39;)}}"></script>
 <script src="{{bootstrap_find_resource(&#39;js/bootstrap.js&#39;, cdn=&#39;bootstrap&#39;)}}"></script>
 {%- endblock scripts %}
 {%- endblock body %}
 </body>
{%- endblock html %}
</html>
{% endblock doc -%}

ソース コードからわかるように、このベース テンプレートは 12 個のブロックを定義しています。ドキュメント全体 (doc)、html 属性 (html_attribs)、html 全体 (html)、ヘッド部分全体 (head)、タイトル部分 (title)、メタコード部分 (metas)、CSS スタイル (styles)、本文属性 ( body_attribs)、ボディ パーツ (body)、ナビゲーション (navbar)、
ページ コンテンツ (content)、js (スクリプト)

とタイトル、メタ、css、js にはすべてデフォルトのコンテンツがあるため、{{super( )}} 使用するときは

この基本テンプレートの構造に従って、login.html のコードを次のように変更します: 

{% extends "bootstrap/base.html"%}
{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->
{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
 导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<p class="container">
 <p class="container">
 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
 </p>
</p>
{% endblock %}

プログラムを実行すると、現在の表示結果は次のようになります:

生成された HTML コードは次のとおりです: :

<!DOCTYPE html>
<html>
 <head>
 <title>牛博客 </title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
 <nav class="navbar navbar-inverse"><!-- 导航部分 -->
 导航
 </nav>
 <!--具体内容-->
 <p class="container">
 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
 </p>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

これらの CDN のアドレスに注意してください。場合によっては、これらのアドレスが壁によってブロックされている場合があります。

変更する方法は、Python インストール ディレクトリで Libsite-packagesflask_bootstrap フォルダーを見つけることです。フォルダーの下に __init__.py ファイルがあります。これを開くと、次のコードが表示されます。ちなみに、I Bootcdn はよく使われる CDN サーバーです

以下は、test と 123 を入力した後のテストです。

前のテストログイン成功ページがまだ残っています。これは明らかに間違っています。通常、 、BBS またはブログは、便宜上、ユーザー名またはパスワードが間違っている場合、すべて同時にホームページにジャンプします。ログイン ページにプロンプ​​トが表示されます。default.py コードを次のように変更します。 

from flask import session #导入session对象

@app.route("/login",methods=["POST"])
def loginPost():
 username=request.form.get("username","")
 password=request.form.get("password","")
 if username=="test" and password=="123" :
 session["user"]=username
 return render_template("/index.html",name=username,site_name=&#39;myblog&#39;)
 else:
 return "登录失败"

ログインに成功した後のソース コードは次のとおりです。 

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>myblog</title>
</head>
<body>
<h1>这个站点的名字为 myblog </h1>
</body>
</html>

ちなみに、ブートストラップのベース テンプレートは参照されていません。 Index.html のコードを変更し、

{% extends "base.html" % }

の最初の行を
{% extends "bootstrap/base.html" %}に変更します

更新to: 

<!DOCTYPE html>
<html>
 <head>
 <title>blog</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 <h1>这个站点的名字为 myblog </h1>
 </body>
</html>

ブートストラップ フレームワークが正常に参照されていることがわかりますが、この時点ではナビゲーション パーツがすべて欠落しています。もちろん、カスタム ベース テンプレートを直接変更して、他のテンプレートを使用することはできません。基本テンプレートを次のように変更します: 
{%extends "bootstrap/base.html "%}
{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->

{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
 导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<p class="container">
</p>
{% endblock %}

次に、ホームページのコードを変更します: 

{% extends "base.html" %}

{% block content %}
 <h1>这个站点的名字为 {{site_name}} </h1>
{% endblock %}

ログイン ページのコードを次のように変更します: 

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
</p>
{% endblock %}

以下でログインします。 成功ページの表示結果は次のとおりです:

ページのスタイルはログイン ページと一致していますが、現在、ユーザー名とパスワードが間違っている場合 (つまり、入力が test と 123 でない場合)、以前と同様にログイン エラーが返されるだけでなく、ユーザーは文字列以外の文字列を使用できません。ユーザーのステータスを反映するメソッドが必要です。この点に関して、flask には flash 関数が用意されています。 

from flask import flash

@app.route("/login",methods=["POST"])
def loginPost():
 username=request.form.get("username","")
 password=request.form.get("password","")
 if username=="test" and password=="123" :
 session["user"]=username
 return render_template("/index.html",name=username,site_name=&#39;myblog&#39;)
 else:
 flash("您输入的用户名或密码错误")
 return render_template("/login.html") #返回的仍为登录页

login.html テンプレートを変更します。 

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
 {% for message in get_flashed_messages() %}
 <p class="alert alert-warning">
 <button type="button" class="close" data-dismiss="alter">&times</button>
 {{message}}
 </p>
 {% endfor %}
 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
</p>
{% endblock %}

OK test と入力します。以下の 1234 を実行すると、表示された結果は次のようになります。

ステータスは完璧に表示されています。

美化を続けます

ログインページとコントローラーの基本機能は完成しましたが、このページに限っては、画面全体を占めるログインボックスはなく、一般的に言えば、中央部分です。このブロックはフラスコには関係なく、ブートストラップのグリッド システムが登場する番です。

栅格系统简单说就是将一个container或container-fluid中分为12个列，每个列都可以合并或偏移，与html中的table类似，并且支持响应式，通过xs，sm，md，lg来进行不同屏幕尺寸的区分。下面用栅格系统对登录页进行一下修改：

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
 <p class="row"></p>
 <p class="row">
 <#-- col-md-4表示合并4列，col-md-offset-4表示偏移4列 sm意思相同 --#>
 <p class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
 <p class="page-header">
 <h1>欢迎您登陆</h1>
 </p>
 {% for message in get_flashed_messages() %}
 <p class="alert alert-warning">
 <button type="button" class="close" data-dismiss="alter">&times</button>
 {{message}}
 </p>
 {% endfor %}

 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
 </p>
 </p>
</p>
{% endblock %}

显示结果如下：

毕竟不是专业美工，没有经过设计，但至少比刚刚美观多了，但登录的用户名和密码写成固定值肯定是不行的，数据库是必不可少的，将在下一章让flask和mysql进行互联。

以上がブートストラップ フレームワーク (Python) を美しくするためのサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：テンプレートエンジンとフォームプラグイン（Python）の詳しい使用例を教えます。次の記事：テンプレートエンジンとフォームプラグイン（Python）の詳しい使用例を教えます。

関連記事

続きを見る