FlaskをPycharmでhtmlとcssを使用してみた。

6816 ワード
Pycharm Flask Web 開発環境 Python Python テキストリンク

みなさん、こんにちは。中川(@naka33321)です。最近、Flaskを始めました。日本でのweb開発では、pythonよりもrubyの方が主流で人気もあると思いますが、海外ではpythonもweb開発で結構使われているようです。pythonはまだ日本では浸透していないのでpython自体は海外のサービスで学習しました。pythonのweb開発では、Flaskが使われたりしているのですが、日本での情報が少ないために情報収集に少してこずったのですが、pythonも海外のサービスで学習したのでFlaskも海外のサービスで学習しようとい無事に少しずつできるようになっています。

開発環境はPycharmを


私は、基本pythonの開発環境はpycharmでしています。英語で書かれているし機能たくさんあるので、英語が全くできない人には厳しいかもしれません。英語が得意という人にはぜひおすすめです。
pycharmの導入方法は下のリンクがわかりやすいです。
Pycharmの導入方法

flaskのライブラリもインストールする必要があります。その導入方法も下のリンクから参考にしていけばいいと思います。
PyCharmでライブラリをインストール

下の動画は英語ですが環境開発は動画の方が理解しやすいと思うので一応貼り付けておきます。
(https://youtu.be/jaNjzjojqUQ)

pythonコード

python.py
from flask import Flask,render_template

app = Flask(__name__)

@app.route("/")
@app.route("/<user>")
def index(user=None):
    return render_template("user.html", user=user)

@app.route('/profile/<name>')
def profile(name):
    return render_template("python.html",name=name)

@app.route("/shopping")
def shopping():
    food = ["Cheese","Tuna","Beaf"]
    return render_template("shopping.html",food=food)

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

CSS


<h4>HTMLコード</h4>
```shopping.html
<!doctype html>
<ul>
    {% for item in food %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>
user.html
<!doctype html>
<ul>
    <!doctype html>

{% if user %}
    <h1>Hello {{ user }}</h1>
{% else %}
    <h1>Plaese log in </h1>
{% endif %}
</ul>
python.html
<!doctype html>
<title>welcome to </title>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='new.css') }}">
<h1>Hey there {{ name }}</h1>

CSS

h1 {
  color: deepskyblue
}

webサーバーを立ち上げた後の画像




参考にした動画

今回参考にしたものは英語ですがyoutubeの動画です。
ぜひFlaskに興味のある方は以下のリンクを参考にしてみてください
(https://www.youtube.com/watch?v=t24ZOk06wa8)
(https://www.youtube.com/watch?v=AOboS0RESt4)