Python Flask "hello world"和 主頁(一)

說明

flask 這個套件之前有學習過一次，這次著重想要多了解資料庫的部分，剛好有搜尋到相關的文章和影片，就進行實作了。

參考 : https://medium.com/@yanweiliu/python%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88-flask%E4%BD%BF%E7%94%A8%E7%AD%86%E8%A8%98-%E5%9B%9B-todolist%E7%B6%B2%E9%A0%81app-css-sql-template-4977a6067832

參考實作影片 : https://youtu.be/Z1RJmh_OqeA

操作流程

先來 Hello world

=>開啟一個新的.py => 命名為 app.py

from flask import  Flask

app = Flask(__name__)

@app.route('/')
def index():
    return  "hello world!!"

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

這裡需要特別安裝的套件就是 flask ，我是用 pycharm 製作的，所以安裝套件也很容易。

另外在網頁上顯示的時候可以用網址127.0.0.1:5000 (這裡的 port :5000 可以設定)，另外也可以用 localhost。

DEMO

建立 index.html 和 base.html

• 建立資料夾和檔案

  1.static 資料夾

  2.template 資料夾

  3.template/base.html 檔案

  4.template/index.html 檔案

app.py 程式碼

from flask import  Flask,render_template

app= Flask(__name__)

@app.route('/') #路由
def index():
    return render_template('index.html') #導向index

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

base.html 程式碼

<!--DOCTYPE html-->


    <meta charset="UTF-8">

    <title>Title</title>
    {% block head %}{% endblock %}


{% block body %}{% endblock %}

中間有遇到 {% %} ，這個屬於後端程式，他會透過編譯器，編譯好後，送到前端的只有 html 的部分。

index.html 程式碼

{% extends 'base.html' %}

{% block head %}
<h1>Template</h1>
{% endblock %}

{% block body %}
{% endblock %}

DEMO

大致上主頁的基礎建立完成了，接下來就在更詳細的往下做吧。