[CS Foundation] Web - 6 - Flask Introduction

Transcript

1. Flask Introduction Frank Yang
2. Outline • Model-View-Controller (MVC) • Flask • Flask-SQLAlchemy • Flask-Migrate
3. 為什什麼需要框架？
4. <html lang="en"> <head> <meta charset="UTF-8"> <title>X-Village</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="div1"> ... </div> <script> $('#div1')... </script> </body> </html>
5. <html lang="en"> <head> <meta charset="UTF-8"> <title>X-Village</title> <script src=“https://code.jquery.com/jquery-3.3.1.min.js"></script> ... </head> <body> <div id="div1"> ... <div id="div2"> ... </div> </div> <script> $('#div1')... </script> <script> $('#div2')... </script> </body> </html>
6. <html lang="en"> <head> <meta charset="UTF-8"> <title>X-Village</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="div1"> ... <div id="div2"> ... <div id="div3">...</div> </div> </div> <script> $('#div1')... </script> <script> $('#div2')... </script> <script> $('#div3')... </script> </body> </html>
7. <html lang="en"> <head> <meta charset="UTF-8"> <title>X-Village</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="div1" style="color:red;"> ... <div id="div2" style="color:blue;"> ... <div id="div3" style="color:green;">...</div> </div> </div> <script> $('#div1')... </script> <script> $('#div2')... </script> <script> $('#div3')... </script> </body> </html>
8. 沒有框架的專案像⼀一團⽑毛球
9. 後端包含了了哪些部分？
10. Browser
11. Browser Server http://…/…
12. Browser Server Database http://…/… SQL
13. Browser Server Database http://…/… SQL Data
14. Browser Server Database http://…/… html, json, … SQL Data
15. Browser Server Database • 保持喚醒 http://…/… html, json, … SQL Data
16. Browser Server Database • 保持喚醒 • 接收 HTTP Request，判斷 URL http://…/… html, json, … SQL Data
17. Browser Server Database • 保持喚醒 • 接收 HTTP Request，判斷 URL • 邏輯操作 http://…/… html, json, … SQL Data
18. Browser Server Database • 保持喚醒 • 接收 HTTP Request，判斷 URL • 邏輯操作 • 操作 Database http://…/… html, json, … SQL Data
19. Browser Server Database • 保持喚醒 • 接收 HTTP Request，判斷 URL • 邏輯操作 • 操作 Database • 回傳 HTML, JSON, … http://…/… html, json, … SQL Data
20. def server(): while True: # 保持喚醒
21. def server(): while True: # 保持喚醒 # 接收 HTTP Request # ...
22. def server(): while True: # 保持喚醒 # 接收 HTTP Request # ... # 判斷 URL # if ...
23. def server(): while True: # 保持喚醒 # 接收 HTTP Request # ... # 判斷 URL # if ... # 操作 Database # SELECT ...
24. def server(): while True: # 保持喚醒 # 接收 HTTP Request # ... # 判斷 URL # if ... # 操作 Database # SELECT ... # 回傳 HTML, JSON, ... # return '<html>..</html>'
25. def server(): while True: # 保持喚醒 # 接收 HTTP Request # ... # 判斷 URL # if ... # 操作 Database # SELECT ... # 回傳 HTML, JSON, ... # return '<html>..</html>' if __name__ == '__main__': server()
26. 另⼀一團⽑毛球...
27. 沒有架構好的程式碼 會隨著需求變化，越來來越難管理理 所以我們需要⼀一個好的架構
28. ⼤大多數後端框架都依循 MVC
29. Browser
30. Browser Controller URL
31. Browser Controller Model URL
32. Browser Controller Model URL Database
33. Browser Controller Model URL Database View
34. MVC • Controller • 接收 HTTP Request，判斷 URL • 邏輯操作 • Model • 操作 Database • View • 回傳 HTML
35. 什什麼是 Flask？
36. Flask 是⼀一個以 Python 為基礎的後端框架
37. Install Flask pip install Flask
38. 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)
39. Exercise 1 讓網站在連結 http://127.0.0.1:5000/name
 顯⽰示 Hello <Your name>
40. 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"
41. Browser Controller URL View
42. Browser Controller URL Model Database View
43. Flask 如何操作 Database？
44. Install Flask-SQLAlchemy pip install Flask-SQLAlchemy
45. 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)
46. 如何透過 Python 物件操作 Database？
47. 如何透過 Python 物件操作 Database？ Object-Relational Mapping (ORM)
48. Object-Relational Mapping (ORM) 將 Database 欄欄位映射為 Python 物件
49. Object-Relational Mapping class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)
50. Object-Relational Mapping class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)
51. Object-Relational Mapping class Record(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(120), nullable=True)
52. 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
53. 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)
54. Create Database $ python
 >>> from app import db
 >>> db.create_all()
55. 如果想再新增欄欄位，可以再⽤用⼀一次 db.create_all() 嗎？
56. 如果想再新增欄欄位，可以再⽤用⼀一次 db.create_all() 嗎？ 不⾏行行！因為 Database 不會做任何更更動
57. 請使⽤用 Flask-Migration
58. Install Flask-Migrate pip install Flask-Migrate
59. 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)
60. Flask-Migrate: init $: flask db init . "## app.py $## migrations "## README "## alembic.ini "## env.py "## script.py.mako $## versions
61. Flask-Migrate: migrate $: flask db migrate . "## app.py "## migrations % "## README % "## alembic.ini % "## env.py % "## script.py.mako % $## versions % $## 130e52081025_.py $## test.db
62. Flask-Migrate: upgrade $: flask db upgrade
63. 可以開始新增欄欄位了了！
64. 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)
65. Flask-Migrate: 新增欄欄位 $: flask db migrate . "## app.py "## migrations % "## README % "## alembic.ini % "## env.py % "## script.py.mako % $## versions % $## 130e52081025_.py
 % $## afb3b6c950b7_.py $## test.db
66. Flask-Migrate: 新增欄欄位 $: flask db upgrade
67. Flask-Migrate: 新增欄欄位 ⼀一旦 flask db init 初始化設定好，之後 要更更新 Database 只需要： $: flask db migrate
 $: flask db upgrade