初心者向け : Flaskログイン機能をつけてQAサイトを作る 1 -ログイン機能+質問機能-

初心者向け : Flaskログイン機能をつけてQAサイトを作る 1 -ログイン機能+質問機能-

※記事自体が長いですがコピペは全く勉強にならないので絶対にやめてください。
最後にBitbucketのリポジトリのリンクを記載しているので、
そちらを参考にしてください。
Railsに比べてコードが長くなる+設定などが面倒臭いなどの理由で

コードの中にコメントしたりしています。
ブログ記事だけでなく両方見ながら進めてください。
時々説明が足りない部分もあるかと思いますが、その際は直接かコメントで質問を
Flaskを利用してQAサイトを作っていきます

このチュートリアルを通して

  • flask_login
  • qaサイトの基礎

などを学ぶことができます

複数回に分けて実装していきます

今回は回答者がログインして質問を作成することろまでやります

ユーザーについて
※質問者と回答者は同じユーザータイプで扱います。

  • 質問者 → 何か質問したい人
  • 回答者 → 回答できる人
  • 管理者 → システムを管理する人

 

Flaskプロジェクトの作成

FlaskはRailsと異なりルールがほとんどないので開発者や企業によってルールがかなり異なります
このチュートリアルでは以下のフォルダ構成で構築を行います

かなりざっくりとした説明ですが、初めから頭に叩き込むのではなく
開発しながら覚えましょう

  • app :Flaskプロジェクトの最上層
  • models:sqlalchemyを通してデータベースを作成するために作成するclass
  • services:modelを通してデータを登録したり取得したりするためのメソッド群
  • views:serviceを通してデータを取得したりしてそれをhtmlへ反映させるだけのところ
  • __init__.py:全てのファイルをここに取り込み、Flaskを起動させるファイル
  • create_db.py:modelを追加しデータベースを追加するときに使うファイル
  • run.py:Flaskサーバーを起動するときに使うファイル

 

それではプロジェクトを作ります

 

Flaskサーバーの設定

Flaskサーバーを起動させるために__init__.pyとrun.pyにこのような記述を加えます

__init__.py

run.py

これで最低限の設定は完了なので、ターミナルでこちらのコマンドを走らせて実行します

「http://localhost:5000/」にアクセス

 

このような画面が見えると思います

これでflaskサーバーの設定は完了です。

 

SQLAlchemyの追加と設定

flaskにはsqlalchemyというデータベースとflaskを繋いでくれる便利なライブラリがあるので
こちらを利用します。ちなみにほとんどの場合このsqlalchemyが利用されております

__init__.pyを修正

create_db.pyを修正

 

設定が完了したので次はモデルを作成していきます

Modelを追加

ログイン機能を実装していくのでUserに関するモデルを作ります
flask-loginというログイン機能を提供しているライブラリに関連するところも
入っています

modelはmodelsに追加しますが、ついでにmodelsの中に__init__.pyを作成します
ここでは詳細を話しませんが、きになる方は調べてみてください

user.py

 

次はこのデータベースを反映させていきます

まずはapp/__init__.pyでuserモデルをimportします
importしないとデータベースに反映されません

次はcreate_db.pyを利用してデータベースを作成します。

ターミナルで以下を実行

問題なく作成されればこのようにデータベースが生成されます

これでmodelとデータベースの設定は完了です

Flask-Loginを追加

次はログイン機能を構築していきます。

ここからは複数ファイルの作業になるので注意しながら開発してください

templates/index.html
templates/layout.html
templates/auth/signup.html
templates/auth/login.html
を作成

templates/index.html

 

templates/layout.html

 

templates/auth/signup.html

templates/auth/login.html

 

次はservicesを追加します

services/__init__.py
services/auth_service.py

services/__init__.pyは空のファイルを作成します

services/auth_service.pyはこのように作成します

 

次はviewsを追加していきます。
viewsはhtmlを表示したりservicesを経由してデータを登録したり取得します
あくまでも呼び出したりするだけで具体的な処理は与えることはありません

views/__init__.py
views/auth.py

views/auth.py

 

次はapp/__init__.pyにviewsを取り込みます。

 

ここまでの修正をhttp://localhost:5000で確認します
こんな感じでひとまずページが作成されています。

新規登録
ページが作成されたので、新規登録ができるか試してみます
必要な項目よ入力して、「Sign Up」をクリックすると、

indexにリダイレクトされflashメッセージが表示されました

ログイン

先ほど登録したユーザー情報を入力し「Login」ボタンをクリック

無事にログインできました

 

ログイン制限の追加

次はログインしているときのみindex.htmlにアクセスすることができるように
修正を加えていきます
ログイン制限は下記のコード追加することで実装できます

 

app/__init__.pyを下記のように修正します
index.htmlへはログインしていないとアクセスできない修正を加えました

 

templates/layout.htmlを下記のように修正
新規登録とログインはログインしていない時のみ表示されます

 

http://localhost:5000にアクセスするとこのような画面になっています

最後にログアウト機能を追加します

services/auth_service.py

 

views/auth.py

 

templates/layout.html

 

ログインした状態で画面を確認します
ログアウトが追加されていることが確認できました。
それでは「ログアウト」ボタンを押してみます

 

問題ないログインされ、ログインページへリダイレクトされました

 

これでログイン関連は完了です。

Question modelとAnswer modelの関係性について

今回作成するアプリは

  • 質問して
  • 質問に対しての回答をして
  • さらに回答に対して反応を示す

ことができるアプリを作るのでこのようなデータベース設計となります

Userは複数のQuestion(質問)を持つことができ、
Question(質問)は複数のAnswer(回答)を持つことができ
Answer(回答)は複数のReaction(反応)を持つことができます。

ここから先はQeustionモデルをベースに

  • model
  • service
  • template
  • view

を全て一気に作成して行きます
最後にBitbucketのリポジトリのリンクを記載しますので動かない場合は確認してください

ユーザーは先ほど作成したのでQuestionを作成していきます

Model

app/models/question.pyを作成

 

app/models/user.pyを修正

 

Service

app/services/question_service.py

データベースにデータを保存したり、取得してくるためのメソッドをまとめています

 

View

app/views/questions.py

http://localhost:5000/questions
http://localhost:5000/questions/add
などquestionに関わる特定のリンクにアクセスした際に発火するルーティングの設定です

 

Template

登録フォームや個別ページなどのhtmlを作成します

app/templates/questions/index.html
questionの一覧ページです
templatesの中にさらにquestionsというフォルダを作っているので注意してください

 

app/templates/questions/post.html
questionの登録ページです
templatesの中にさらにquestionsというフォルダを作っているので注意してください

app/templates/questions/show.html
questionの個別ページです
templatesの中にさらにquestionsというフォルダを作っているので注意してください

app/templates/questions/update.html
questionの編集ページです
templatesの中にさらにquestionsというフォルダを作っているので注意してください

app/templates/layout.html
questionsへリンクを飛ばせるように、ログインしているときにリンクを表示します

 

__init__.py

flaskアプリのペースファイルです
__init__.pyに作成したMoldeとviewを取り込んでflaskアプリから使えるようにします

 

データベースをターミナルからアップデート

追加したQuesetionを適用するためにこちらをターミナルで実行

それでは画面をみていきましょう

http://localhost:5000

Questionsが追加され表示されました

ちなみにリンクはこんな感じです

 

「Questions」をクリックすると、、
無事に表示されました
ただしデータは一つもいれていないので空のままです

ちなみにquestionsのリンクはこんな感じになっています

複数のurlを作成するときはこのリンクが非常に重要なので
綺麗に分けていきましょう
今回はanswerやreactionもこんな感じで分けていきます

 

それでは

  • 追加
  • 個別ページ
  • 編集
  • 削除

ができるかどうかを確認していきます

 

追加

「追加」ボタンを押してpost.indexページに飛びます

適当にTitleとBodyを入力して「追加する」ボタンをクリック

 

questinosの一覧へ遷移し先ほど追加したデータが表示されております
UIは汚いですがひとまず追加と一覧表示は問題なさそうです

個別ページ

一覧の「detail」ボタンをクリックします
こちらも問題なく表示されました

 

編集

「update」ボタンをクリックして内容を変更してみます
適当にわかりやすい編集を加えて「修正する」ボタンをクリック

編集後は一覧画面へ戻り
問題なく編集が完了しました

 

削除

「delete」ボタンをクリックします
こちらも問題なく削除されました

 

まとめ

今回はログイン機能とQuestionを作成しました
templateやservice、viewはAnswerやReactionでもコピペして使えるベースなので
完全に理解できていないという方はなんども復習して理解を深めましょう

Bitbucketのリンク:https://bitbucket.org/Masahiro_Okubo/qa-site/src/phase1/
ブランチは「phase1」で指定してください。

参考リンク

FlaskでhtmlからDELETEやPUTなどのhttpメソッドを扱う方法メモ

How do I get my HTML button to delete the right list item from a SQLite database?

flaskカテゴリの最新記事