11.3 python-web · pythonlesson

在上節課里，我們在coding.net里使用hexo搭建了自己的播客。播客是典型的靜態網站，網站里每個頁面的內容都是一成不變的。這節課，我們一起學習一下怎么使用python搭建動態網站。 ## 動態網站核心技術所謂動態網站，是指網頁里的數據每天甚至每時每刻會發生變化的。比如我們看的QQ空間、微博等等。所以，相比于我們上節課學習的內容，我們會增加一個新的傳輸后臺數據的服務。因此，動態網站核心上有這樣幾部分組成： 1. web頁面：這個就是我們上節課學習的網頁開發核心技術。 2. 數據服務：網頁上動態的數據接口，這個是我們這節課學習的flask 3. 數據存儲：動態數據存儲位置，一般會存儲在數據庫中，放了方便學習，我們這里直接把數據存儲在文件中。 ![](https://danidee10.github.io/images/flask-5-overview.png) ## flask 在講什么是flask之前，我先來看一個小demo： ``` from flask import * app = Flask(__name__) @app.route('/') def hello_world(): return 'hello world' if __name__ == '__main__': app.run() ``` 這就是我們使用寫一個動態網站的核心代碼，代碼運行后，我們訪問：` http://127.0.0.1:5000/ ` 頁面就可以打開自己開發的網站了。 ![](https://s1.ax1x.com/2018/09/23/iuctMV.png) ## flask核心模塊介紹有了對flask的直觀印象后，我們來詳細學習一下什么是flask。 1. flask是什么 flask官方對自己的介紹如下： > Flask是一個使用Python編寫的輕量級Web應用框架。基于Werkzeug WSGI工具箱和Jinja2 模板引擎。簡單來說，flask就是一個針對網頁的服務端框架，內置一個渲染html的引擎。通過flask，我們可以把：響應http的url請求、加工服務端數據和返回html內容整合在一起的一個web服務框架。 2. 安裝flask 有了pip，安裝flask非常簡單，我們只需要`pip install Flask`命令即可完成flask的安裝。 3. flask核心方法從上面的demo代碼中，我們可以看出，flask核心有這樣幾部分組成： 1）引入flask `from flask import *` 2）定義flask對象 `app = Flask(__name__)` 3）編寫響應url路徑的函數 ``` @app.route('/') def hello_world(): return 'hello world' ``` 注意看，這個代碼，相比于我們正常編寫的函數，多了一個`@app.route('/')` 注解，這個注解的意思就是這個函數應該響應我們url請求的哪個路徑。 4）運行flask程序`app.run()` ## 任務清單項目實例下面，我們通過網頁版任務清單項目。來完整體驗一下flask的完整開發流程。 1. 新建flask項目，注意看，pycharm已經很智能的把todo.py幫我們創建好了，里面已經有了flask的核心代碼。 2. 任務清單類todo 項目的核心邏輯是任務清單的維護，我們新增todo類，看代碼： ``` #!/usr/bin/python # -*- coding: UTF-8 -*- class Todo: def __init__(self): self.taskList = [] self.__fileLocation__ = "./todo.txt" self.__loadTask__() def addTodo(self, thing): self.taskList.append(thing) self.__saveTodo__() return True def removeTodo(self, thing): if not thing in self.taskList: return False else: self.taskList.remove(thing) self.__saveTodo__() return True def searchTodo(self, thing): for todo in self.taskList: if thing in todo: return todo return None def getAllToto(self): return self.taskList def __loadTask__(self): file = open(self.__fileLocation__, 'r') # 換行符 self.taskList = [] for task in file.readlines(): self.taskList.append(task.replace('\n', '')) def __saveTodo__(self): file = open(self.__fileLocation__, 'w') file.write('\n'.join(self.taskList)) file.close() ``` todo類完成了對任務清單的查詢、新增、刪除、修改等操作。 3. 寫任務列表頁面我們在templates目錄里新增index.html文件。在里面增加展示任務列表的代碼： ``` <!doctype html> <html> <head> <meta charset="UTF-8"> <title>任務清單</title> </head> <body> <p> 任務任務<a href="/delete?todo=">刪除</a> </p> <p> 任務任務<a href="/delete?todo=">刪除</a> </p> <form action="/insert" method="post"> <input type="text" name="todo"> <button type="submit">新增</button> </form> </body> </html> ``` 4. 替換成動態數據第三部做的網頁是靜態的，我們需要從服端獲取數據，因此現在todo.py 里新增獲取數據的方法： ``` from Todo import * todo = Todo() @app.route('/') def list(): return render_template('index.html', todoList=todo.getAllToto()) ``` 這個函數在獲取數據后，會將數據渲染到index.html頁面中并返回瀏覽器。html里的代碼對應改動如下： ``` {% for todo in todoList %} <p> {{ todo }} <a href="/delete?todo={{todo}}">刪除</a> </p> {% endfor %} ``` 注意看 `{%}`的語法。這個就是html加載python返回數據的Jinja2模板代碼了。 5. 新增任務新增任務首先需要在網頁里增加一個form表單： ``` <form action="/insert" method="post"> <input type="text" name="todo"> <button type="submit">新增</button> </form> ``` 對應的python處理如下： ``` @app.route('/insert', methods=['POST']) def insert(): task = request.form['todo'] todo.addTodo(task) return render_template('index.html', todoList=todo.getAllToto()) ``` 注意這點代碼： 1）我們在注解里指定了需要響應的是post請求。 2）在inset的方法體內，我們使用`request.form['todo']` 語法來獲取網頁提交的數據。 6. 刪除任務刪除任務和新增數據類似，我們來看python代碼： ``` @app.route('/delete') def delete(): task = request.args.get('todo', '') todo.removeTodo(task) return render_template('index.html', todoList=todo.getAllToto()) ``` 到現在為止，我們的網頁版任務清單就開發完成了。 ![](https://s1.ax1x.com/2018/09/23/iucrGR.png) ## 淘寶是怎么開發的？那像淘寶一樣復雜的網站是怎么開發的呢？只要我們掌握了web開發的核心知識，淘寶網站也是像這樣的邏輯一個功能一個功能開發完成的。就像升級打怪，我們只要一級一級的提高自己，就能開發出像淘寶、微博一樣復雜的網站。 ![](https://s1.ax1x.com/2018/09/20/inCsxI.jpg) **阿達老師-孩子身邊的編程專家** *完整課程請關注阿達老師，主頁里有完整的課程目錄和觀看地址*