[CS Foundation] Web - 6 - Flask Introduction

Slide 1

Slide 1 text

Flask Introduction Frank Yang

Slide 2

Slide 2 text

Outline • Model-View-Controller (MVC) • Flask • Flask-SQLAlchemy • Flask-Migrate

Slide 3

Slide 3 text

為什什麼需要框架？

Slide 4

Slide 4 text

X-Village

...

$('#div1')...

Slide 5

Slide 5 text

X-Village ...

...

$('#div1')... $('#div2')...

Slide 6

Slide 6 text

X-Village

...

$('#div1')... $('#div2')... $('#div3')...

Slide 7

Slide 7 text

X-Village

...

$('#div1')... $('#div2')... $('#div3')...

Slide 8

Slide 8 text

沒有框架的專案像⼀一團⽑毛球

Slide 9

Slide 9 text

後端包含了了哪些部分？

Slide 10

Slide 10 text

Browser

Slide 11

Slide 11 text

Browser Server http://…/…

Slide 12

Slide 12 text

Browser Server Database http://…/… SQL

Slide 13

Slide 13 text

Browser Server Database http://…/… SQL Data

Slide 14

Slide 14 text

Browser Server Database http://…/… html, json, … SQL Data

Slide 15

Slide 15 text

Browser Server Database • 保持喚醒 http://…/… html, json, … SQL Data

Slide 16

Slide 16 text

Browser Server Database • 保持喚醒 • 接收 HTTP Request，判斷 URL http://…/… html, json, … SQL Data

Slide 17

Slide 17 text

Browser Server Database • 保持喚醒 • 接收 HTTP Request，判斷 URL • 邏輯操作 http://…/… html, json, … SQL Data

Slide 18

Slide 18 text

Browser Server Database • 保持喚醒 • 接收 HTTP Request，判斷 URL • 邏輯操作 • 操作 Database http://…/… html, json, … SQL Data

Slide 19

Slide 19 text

Browser Server Database • 保持喚醒 • 接收 HTTP Request，判斷 URL • 邏輯操作 • 操作 Database • 回傳 HTML, JSON, … http://…/… html, json, … SQL Data

Slide 20

Slide 20 text

def server(): while True: # 保持喚醒

Slide 21

Slide 21 text

def server(): while True: # 保持喚醒 # 接收 HTTP Request # ...

Slide 22

Slide 22 text

def server(): while True: # 保持喚醒 # 接收 HTTP Request # ... # 判斷 URL # if ...

Slide 23

Slide 23 text

def server(): while True: # 保持喚醒 # 接收 HTTP Request # ... # 判斷 URL # if ... # 操作 Database # SELECT ...

Slide 24

Slide 24 text

def server(): while True: # 保持喚醒 # 接收 HTTP Request # ... # 判斷 URL # if ... # 操作 Database # SELECT ... # 回傳 HTML, JSON, ... # return '..'

Slide 25

Slide 25 text

def server(): while True: # 保持喚醒 # 接收 HTTP Request # ... # 判斷 URL # if ... # 操作 Database # SELECT ... # 回傳 HTML, JSON, ... # return '..' if __name__ == '__main__': server()

Slide 26

Slide 26 text

另⼀一團⽑毛球...

Slide 27

Slide 27 text

沒有架構好的程式碼會隨著需求變化，越來來越難管理理所以我們需要⼀一個好的架構

Slide 28

Slide 28 text

⼤大多數後端框架都依循 MVC

Slide 29

Slide 29 text

Browser

Slide 30

Slide 30 text

Browser Controller URL

Slide 31

Slide 31 text

Browser Controller Model URL

Slide 32

Slide 32 text

Browser Controller Model URL Database

Slide 33

Slide 33 text

Browser Controller Model URL Database View

Slide 34

Slide 34 text

MVC • Controller • 接收 HTTP Request，判斷 URL • 邏輯操作 • Model • 操作 Database • View • 回傳 HTML

Slide 35

Slide 35 text

什什麼是 Flask？

Slide 36

Slide 36 text

Flask 是⼀一個以 Python 為基礎的後端框架

Slide 37

Slide 37 text

Install Flask pip install Flask

Slide 38

Slide 38 text

Flask Hello World # app.py from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "Hello World!" $: flask run  * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Slide 39

Slide 39 text

Exercise 1 讓網站在連結 http://127.0.0.1:5000/name  顯⽰示 Hello

Slide 40

Slide 40 text

Exercise 1 # app.py from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "Hello World!" @app.route("/name") def name(): return "Hello Frank"

Slide 41

Slide 41 text

Browser Controller URL View

Slide 42

Slide 42 text

Browser Controller URL Model Database View

Slide 43

Slide 43 text

Flask 如何操作 Database？

Slide 44

Slide 44 text

Install Flask-SQLAlchemy pip install Flask-SQLAlchemy

Slide 45

Slide 45 text

Connect Database # app.py from flask import Flask from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db' db = SQLAlchemy(app)

Slide 46

Slide 46 text

如何透過 Python 物件操作 Database？

Slide 47

Slide 47 text

如何透過 Python 物件操作 Database？ Object-Relational Mapping (ORM)

Slide 48

Slide 48 text

Object-Relational Mapping (ORM) 將 Database 欄欄位映射為 Python 物件

Slide 49

Slide 49 text

Object-Relational Mapping class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)

Slide 50

Slide 50 text

Object-Relational Mapping class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)

Slide 51

Slide 51 text

Object-Relational Mapping class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)

Slide 52

Slide 52 text

Object-Relational Mapping class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)    record = Record(id=1, name='test')  record.id # 1 record.name # 'test' 透過物件操作 Database

Slide 53

Slide 53 text

Flask-SQLAlchemy # app.py from flask import Flask from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db' db = SQLAlchemy(app) class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)

Slide 54

Slide 54 text

Create Database $ python  >>> from app import db  >>> db.create_all()

Slide 55

Slide 55 text

如果想再新增欄欄位，可以再⽤用⼀一次 db.create_all() 嗎？

Slide 56

Slide 56 text

如果想再新增欄欄位，可以再⽤用⼀一次 db.create_all() 嗎？不⾏行行！因為 Database 不會做任何更更動

Slide 57

Slide 57 text

請使⽤用 Flask-Migration

Slide 58

Slide 58 text

Install Flask-Migrate pip install Flask-Migrate

Slide 59

Slide 59 text

Flask-Migrate # app.py from flask import Flask from flask_sqlalchemy import SQLAlchemy from flask_migrate import Migrate app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db' db = SQLAlchemy(app) migrate = Migrate(app, db) class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)

Slide 60

Slide 60 text

Flask-Migrate: init $: flask db init . "## app.py $## migrations "## README "## alembic.ini "## env.py "## script.py.mako $## versions

Slide 61

Slide 61 text

Flask-Migrate: migrate $: flask db migrate . "## app.py "## migrations % "## README % "## alembic.ini % "## env.py % "## script.py.mako % $## versions % $## 130e52081025_.py $## test.db

Slide 62

Slide 62 text

Flask-Migrate: upgrade $: flask db upgrade

Slide 63

Slide 63 text

可以開始新增欄欄位了了！

Slide 64

Slide 64 text

Flask-Migrate: 新增欄欄位 # app.py from flask import Flask from flask_sqlalchemy import SQLAlchemy from flask_migrate import Migrate app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db' db = SQLAlchemy(app) migrate = Migrate(app, db) class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True) cost = db.Column(db.Integer, nullable=True)

Slide 65

Slide 65 text

Flask-Migrate: 新增欄欄位 $: flask db migrate . "## app.py "## migrations % "## README % "## alembic.ini % "## env.py % "## script.py.mako % $## versions % $## 130e52081025_.py  % $## afb3b6c950b7_.py $## test.db

Slide 66

Slide 66 text

Flask-Migrate: 新增欄欄位 $: flask db upgrade

Slide 67

Slide 67 text

Flask-Migrate: 新增欄欄位⼀一旦 flask db init 初始化設定好，之後要更更新 Database 只需要： $: flask db migrate  $: flask db upgrade