前に書く
このプロジェクトの完全なディレクトリは
もし何か間違っていたり、もっと良い解決策があれば教えてください。
本題に入ります
まず、PycharmでFlaskプロジェクトを作成し、Flaskを選択し、フォーラムの名前を選択します：
他のIDEを使用している場合は、新しいフォルダを作成して仮想環境を作成し、pipでflaskをインストールすることもできます。
作成したら、Pycharm が自動的に生成する app.py のコードを削除して、ルートディレクトリに app というフォルダを作成し、app の中に main フォルダを作成して、Flask を使うためのブループリントを準備します。
その後、Pycharmで生成したstaticフォルダとtemplateフォルダをappフォルダにも移動し、再度appフォルダに__init__.pyを作成し、以下のコードを入力します：
from flask import Flask # Flaskをインポートする
def create_app():
app = Flask(__name__) # アプリのインスタンスを作成する
return app # アプリに戻る
create_appでは、appという名前でflaskインスタンスが作成され、関数全体がappを返すように作られています。ルートディレクトリのapp.pyでは、関数全体が呼び出されてappが作成されます：
from app import create_app # インポートする_app
app = create_app() # アプリを作る
if __name__ == '__main__':
app.run() # アプリケーションを実行する
app.pyを実行して127.0.0.1:5000にアクセスすると、ページが404例外を投げることがわかります。これは、まだページが作成されていないためです。さて、ブループリントを作成するために、メインフォルダに __init__.py を作成します：
from flask import Blueprint # Flaskでブループリントをインポートする
main = Blueprint('main', __name__) # mainというブループリントを作る
from . import views # ビューをインポートする
しかしそれだけでは不十分で、appフォルダの__init__.pyにブループリントを登録する必要があります：
def create_app():
app = Flask(__name__) # アプリのインスタンスを作成する
from .main import main as main_bp # ブループリントをインポートする
app.register_blueprint(main_bp) # Blueprint to Appにサインアップする
return app # アプリに戻る
IDEでviewsが見つからないと表示されるかもしれませんが、メインフォルダにviews.pyを作成してください：
from . import main # ブループリントをインポートする
@main.route('/') # ルートを定義する
def index():
return '<h1>Welcome to AttributeError!</h1>' # ページの本文に戻る
もう一度プログラムを実行すると、「Welcome to AttributeError！」が表示されるはずですが、これはとても醜いものです。まともなフォーラムを開発したいのであれば、ページは見栄えが良くなければなりません。そこで、と統合する Flask 拡張機能 Bootstrap-Flask を見つけました。コマンドラインで pip install bootstrap-flask と入力してインストールします。
インストール後、すべての拡張機能をインスタンス化するために、appフォルダにextensions.pyというファイルを作成します：
from flask_bootstrap import Bootstrap # Bootstrap-Flaskをインポートする
bootstrap = Bootstrap() # エクステンションをインスタンス化する
しかし bootstrap-flask は初期化されていません。では、__init__.pyで初期化してください：
from flask import Flask # Flaskをインポートする
from .extensions import * # インスタンス化されたエクステンションをインポートする
def create_app():
app = Flask(__name__) # アプリのインスタンスを作成する
bootstrap.init_app(app) # 拡張機能を初期化する
from .main import main as main_bp # ブループリントをインポートする
app.register_blueprint(main_bp) # Blueprint to Appにサインアップする
return app # アプリに戻る
さて、それはページに導入する必要がありますが、ちょうど今、テンプレートの文字列型の直帰はあまりにも大規模なサイトには適していない、今メインフォルダを作成するテンプレートフォルダに、メインフォルダの後にindex.htmlを追加します：
{% from 'bootstrap/nav.html' import render_nav_item %} {# Bootstrap-Flaskの組み込み関数をインポートする#}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AttributeError</title>
{{ bootstrap.load_css() }} {# bootstrap-flask組み込みCSSの紹介#}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">AttributeError</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{{ render_nav_item('main.index', ' ') }} {# Bootstrap-Flask組み込み関数を使ってナビゲーションリンクをレンダリングする#}
</ul>
</div>
</nav>
<br>
<div class="container">
<h1>AttributeError</h1>
<hr>
<p>Welcome to AttributeError!</p>
</div>
</body>
{{ bootstrap.load_js() }} {# bootstrap-flaskの組み込みJavaScriptを紹介する#}
</html>
では、ビュー機能にテンプレートを導入してみましょう：
from flask import render_template # レンダー・テンプレート関数をインポートする
from . import main # ブループリントをインポートする
@main.route('/') # ルートを定義する
def index():
return render_template('main/index.html') # レンダリングされたページの本文に戻る
もう一度プログラムを実行すると、インターフェイスがより見やすくなります：
しかし、アプリケーションのコードを変更すると、実行時に変更が反映されず、アプリケーションを再実行する必要があります。そこで、Flask のデバッグモードをオンにしましょう：
from app import create_app # インポートする_app
app = create_app() # アプリを作る
if __name__ == '__main__':
app.run(debug=True) # アプリを実行し、デバッグモードをオンにする
プログラムを再実行すると、アプリがリアルタイムで更新されます。
現在のアプリケーションでは、データベースはまだ作成されていませんので、フォーラムの最も重要な機能はまだ開発できませんが、後で作成されます。おそらく、テンプレートが非常に複雑になっていることにお気づきでしょうが、各テンプレートで一度打ち出すのは面倒なので、この問題を解決するためにベーステンプレートを作成します。まず、templatesフォルダにベーステンプレートであるbase.htmlを作成し、以下のコードを入力します：
{% from 'bootstrap/nav.html' import render_nav_item %} {# Bootstrap-Flaskの組み込み関数をインポートする#}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} {# タイトルブロック#}</title>
{{ bootstrap.load_css() }} {# bootstrap-flask組み込みCSSの紹介#}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">AttributeError</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{{ render_nav_item('main.index', ' ') }} {# Bootstrap-Flask組み込み関数を使ってナビゲーションリンクをレンダリングする#}
</ul>
</div>
</nav>
<br>
{% block content %}{% endblock %} {# コンテンツ・ブロック#}
</body>
{% block scripts %} {# JSコードブロック#}
{{ bootstrap.load_js() }} {# bootstrap-flaskの組み込みJavaScriptを紹介する#}
{% endblock %}
</html>
これで、ベーステンプレートを使ってindex.htmlを簡素化することが可能になりました：
{% extends 'base.html' %} {# はベースからの継承を示す.html #}
{% block title %}AttributeError{% endblock %} {# タイトルを定義する#}
{% block content %} {# コンテンツを定義する#}
<div class="container">
<h1>AttributeError</h1>
<hr>
<p>Welcome to AttributeError!</p>
</div>
{% endblock %}
私はこのツールを使ってテーマのコピーを黄色にカスタマイズしました。カスタムCSSを使用するには、base.htmlを変更する必要があります：
{% from 'bootstrap/nav.html' import render_nav_item %} {# Bootstrap-Flaskの組み込み関数をインポートする#}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} {# タイトルブロック#}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='Bootstrap/bootstrap.css') }}"> {# カスタムBootstrap CSSを紹介する#}
</head>
<!--...-->
{% block scripts %} {# JSコードブロック#}
{{ bootstrap.load_js() }} {# bootstrap-flaskの組み込みJavaScriptを紹介する#}
{% endblock %}
</html>
今、ページを更新すると、変更された内容が表示されないかもしれませんが、Bootstrapの原色を使用せずに変更しました。後で開発で使う予定です。
さて、今日はここまで。GitHubにアップしたコードはこちらです。
git clone https://.//.it
その先
git checkout f63784c
究極
pip install -r requirements.txt
GitHub リポジトリ:
カスタムBootstrap CSSも、/app/static/Bootstrapにあるリポジトリに置きました。
