9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Python+Flask+MySQL on WindowsではじめるWebアプリ開発 #Step2

Last updated at Posted at 2018-09-30

はじめに

  • 初心者が簡単なWebアプリを開発していきます。
  • 手順をStep-by-Step方式で記載していきます。
    • 前回(Step1)では、環境構築からHelloWorldまで実施しました。

開発環境

  • Windows10 Home
  • Python3.7.0 (pip 18.0)
  • Flask 1.0.2
  • Jinja2 2.10

前回の復習として

  • 仮想環境**(step2)**を作成
  • 仮想環境の有効化
  • pipのアップグレード
  • flaskのインストール
  • アプリの作成

Hello Flask

hello.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def main():
    return 'Hello World.'

if __name__ == '__main__':
    app.run(debug=True)

Step2 - テンプレートを利用する

テンプレート用のフォルダを作成する

(step2) C:\pystudy\lesson-flask>mkdir step2\templates

アプリを修正する

  • render_templateをインポートする
  • main関数を修正
  • テンプレートへデータ受け渡し
  • テンプレートファイルの指定
hello.py
from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route('/')
def main():
    props = {'title': 'Step-by-Step Flask', 'msg': 'Hello World.'}
    html = render_template('hello.html', props=props)
    return html

if __name__ == '__main__':
    app.run(debug=True)

テンプレートファイルを作成する

templates\hello.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{{props.title}}</title>
    </head>
    <body>
        <div id="contents">
            <p>{{props.msg}}</p>
        </div>
    </body>
</html>

実行

  • 環境変数の設定
  • サーバ起動

flask-fig2.png

今回のまとめ

  • テンプレートを利用するとヘッダーやフッターなどを使いまわせたりして便利です。
  • コンテンツを動的に作成出来るようになります。

Step3で実施すること

  • ルーティングを使ってみます。
9
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?