Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

樹莓派(Raspberry Pi)基本上就是一臺超級便宜的 Linux 電腦,一般就兩三百快,大小跟信用卡差不多。(還不知道樹莓派的粉絲,請google或者百度~)優達學城為你帶來分享。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
圖片來源:wiki

樹莓派能做的事情不少,基本上一臺普通的 Linux 電腦能做的事情,它也能完成。比如用它連接U盤、鼠標、鍵盤等外設,上上網,寫寫代碼,編輯一下文檔,諸如此類。今天這篇教程玩的可能會比較“高級”一丁點,我們將手把手帶你用樹莓派打造一個你自己的 Python 開發服務器。

第0步:明確目標

在開始之前,理解我們嘗試搭建的目標是很重要的。今天我們的目標是教你用樹莓派搭建一個 Python 開發服務器,更具體地說,就是用 Flask 加 Python 在你的局域網裡從零打造一個網站!

第1步:前置準備

為了跟上教程的節奏,我們假定你已經做好了以下這些準備:

1、你已經有一臺樹莓派,裝好了 Raspbian 系統,如果你還沒準備好,這裡有一個安裝指南。(回覆關鍵詞“樹莓派”,獲取安裝指南)

2、樹莓派已經連上了你家裡的WiFi(或有限網絡),你知道樹莓派的 IP 地址。

如果你已經準備好了前兩點,那你就不需要給樹莓派接一個顯示屏了。否則,你可能需要一個顯示器以便進行一些設置。

我們將會用到 VS Code 編輯器,還需要 Remote VSCode 插件,以便遠程編輯樹莓派上的文件。我強烈推薦你使用這個編輯器和插件,這樣會讓修改編輯服務器上的文件方便不少,算是個優勢吧。

第2步:找到樹莓派的 IP 地址

首先,給樹莓派接上電,確保它能正常啟動並連上你的 Wifi/遊戲網絡(可能需要互聯網連接)。

接下來,我們要獲得樹莓派的 IP 地址,以便通過 SSH 連接上去。你可以訪問你家裡的路由器(或網關)的設置頁面(比如類似 http://192.168.0.1 這樣的地址,不同的網絡設備不一樣),通過連接上路由的設備地址來判斷樹莓派的 IP 地址。

當然你也可以直接給樹莓派接上一個顯示器,在 Raspbian 的圖形界面上就能看到當前的 IP 地址。

通常情況下,你會找到一個類似 192.168.0.12 這樣的地址。但還是那句話,對不同的人,不同的網絡環境,這個地址肯定是不會一樣的。請務必確認你找到的 IP 地址是指向你的樹莓派的。

接下來的教程中,我們將會用 192.168.0.12 作為範例 IP 地址。

第3步:連接樹莓派

在你的電腦上,打開 VS Code 內置的命令行窗口。假設樹莓派的 IP 地址是 192.168.0.12 ,請鍵入如下命令:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

以上命令將在你的電腦和樹莓派之間建立一個雙向的 SSH 通道。如果你是第一次通過 SSH 連上樹莓派,請使用默認密碼 raspberry。連接成功之後,你會收到一個更改默認密碼的提示。強烈建議你自己設置一個安全的密碼。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
成功連接上樹莓派之後,命令行窗口會出現類似這樣的信息。

第4步:建立一個工作文件夾

你現在應該已經在樹莓派的 home 文件夾中了。讓我們先創建一個工作文件夾,之後網站的所有內容都會在這裡面。用下面這個命令新建一個文件夾:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

使用 ls 命令檢查一下,你可以看到一個名為 MyFlaskWebsite 的文件夾已經生成了。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
創建並檢查你的工作文件夾

第5步:安裝 Flask

我們將用 Flask 來搭建一個簡單的網站。Flask 是一個基於 Python 的簡易網頁框架。它使用 Jinja(一個基於 Python 的模版引擎)作為模板引擎,可用性高,功能強大。使用下面這個命令,在樹莓派上安裝 Flask:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
安裝 Flask

第6步:來點簡單的代碼

安裝完 Flask 之後,我們可以開始創建文件,寫點簡單的代碼啦。首先,進入你最近創建的文件夾(參見第4步):

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

我們需要用到的所有文件都將放在這個文件夾中。現在,用下面這個命令新建你的第一個代碼文件(app.py)吧:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

再用 "ls" 命令檢查一下,你應該能看到文件夾裡多了一個文件:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

進入文件夾,並創建一個新文件

現在,按下 F1 鍵,選擇“Remote: Start Server”。這將使你可以用電腦遠程編輯樹莓派上的文件。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
啟動遠程服務器

下一步,用這個命令編輯你新建的 app.py 文件:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

第一次載入可能需要幾秒鐘時間,但這個空文件很快就會在上面的窗口中顯示了。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
開始遠程編輯這個文件

參照下圖的代碼,編寫你的 app.py 文件。在下面這個例子中,我們指定了一個路徑,它指向網站首頁 '/',並讓它顯示一行文字:“This is my flask website and it is so cool.(這是我的 Flask 網站,是不是很酷啊)”。請注意,host='0.0.0.0' 參數將讓整個局域網中的所有設備都能訪問這個網站。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
創造一個簡單的網頁

現在,保存文件,並用下面的代碼在樹莓派上運行你的網站服務:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

運行效果如下:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
運行網站服務軟件

看到上面的輸出之後,你就可以用局域網內的任意設備,打開瀏覽器,訪問樹莓派的 IP(我們這個例子中是 192.168.0.12 )加上上面的端口號(5000),來訪問剛才這個服務程序建立的網頁。完整地址應該是 http://192.168.0.12:5000/

如果一切正常,你應該能在網頁上看到上面代碼中的那行字:“This is my flask website and it is so cool.”

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
在瀏覽器中查看網頁內容

這表示你的開發服務器已經激活,並且運行著你剛建立的網站。

第7步:增加更多的路徑

目前這個代碼只有一個路徑,也就是網站的首頁。按照下面的代碼,你可以增加一個新的路徑。你可以在開發服務器上動態調整代碼,它會自動捕獲代碼變更,當你刷新瀏覽器的時候,它會自動運行一個更新過的版本。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
增加一個 meow 的路徑

為了檢查新添加的路徑是否正常工作,你可以訪問http://192.168.0.12:5000/meow ,如果一切正常,網頁上將會顯示一個大大的 MEOW(喵)。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
檢查新增的路徑是否正常工作

第8步:整理項目結構

當然,你可以繼續增加更多的路徑,這看起來很酷。但把所有代碼都放在同一個 app.py 文件裡並不是什麼好主意。一個好的網站應該有良好的結構。

通常,我們會用一個文件夾存儲 HTML 模板,一個文件夾放 CSS 文件,另一個文件夾放 JS 文件。讓我們試著把這些文件夾添加進去,把對應的代碼放到相應的文件夾裡,讓整個項目結構清晰。你可以用下面這些代碼來新建所需的文件夾:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

同樣,你可以用 ls 命令檢驗一下文件夾是否被正確創建了。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
增加結構,可以讓項目更有條理

現在,我們可以給首頁添加一個 HTML 模板文件啦。用下面的代碼,進入對應的文件夾,並且新建一個 index.html ,再用 rmate 命令來編輯:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

接下來,在 index.html 裡寫一些首頁所需的基本 HTML 代碼:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
首頁中將要顯示的 HTML 代碼

在 app.py 中進行修改,讓首頁使用 index.html 文件作為模板。下面的代碼將會讓服務器從默認的模板文件夾中讀取 index.html 文件:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
使用新的 index.html 文件,並用 app.py 進行渲染

現在回到上一層目錄,再次運行網站服務。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

在瀏覽器裡重新訪問首頁,你就能看到 index.html 的內容啦。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

接下來,我們通過在 static 文件夾裡添加 main.css 文件,給網站加上 CSS 樣式。和之前一樣,用 cd 命令進入對應文件夾,用 touch 命令創建新文件,再用rmate 命令來編輯。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
創建並編輯 CSS 樣式文件

給 h4 標籤加一些樣式。注意目前 index.html 裡只有一個 h4 標籤,我們添加的這個樣式應該就會這個標籤的樣式產生影響。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
一些 CSS 代碼

和上面一樣,再用這個命令重新運行一下網站服務:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

刷新瀏覽器看看,這段文字的顏色是不是也改變了?

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

第9步:利用好 Jinja 引擎

Jinja 是一個基於 Python 的模板引擎,它能為網頁增加許多非常有用的特性。雖然我們今天的課程主要不是介紹 Jinja 的,但我們還是通過幾個簡單的例子來展示一下 Jinia 的威力吧。

首先,我們在 app.py 裡創建一個包含了幾種水果的列表,並把這個列表當作參數傳給 index.html 。接下來,我們可以讓 index.html 在網頁上顯示這個列表。

對 app.py 和 index.html 做如下改動:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
將 my_list 變量作為參數傳給 index.html

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器
在網頁上顯示 my_list 的內容

刷新一下頁面,你應該能見到這個水果列表出現在了屏幕上。

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

怎麼樣,是不是很簡單便捷?

第10步:進階準備

現在,你已經有了一臺全功能的 Python 開發服務器,它的未來擁有無限的可能,唯一的限制只是你的創意(和編程技術)。下面有一些有用的進階做法,在進一步深入之前,你可以試著在自己的項目裡應用一下:

1、目前你的樹莓派只能在本地局域網中訪問,為了讓它變一個真正的服務器,你還需要讓互聯網上的設備能訪問到這臺樹莓派。因此,你需要一種叫做端口轉發的技術。基本上,你得有一個固定的 IP 地址,和一個域名,並把它們指向你樹莓派上的網站端口。

2、大部分應用都需要一個數據庫服務,以滿足基本的增刪查改(CRUD,Create、Read、Update 和 Delete 的縮寫)操作。Python 支持即開即用的 SQlite 。

3、你能在電商網站上找到一些很酷的樹莓派新手入門套裝。這基本上包含了所有你入門所需的所有設備,節省了大筆自己搜索購買的時間和精力。

4、因為你沒有給樹莓派外接顯示器,請務必記得在關掉樹莓派之前,先在命令行裡執行關機操作。這樣能保證樹莓派和存儲卡的安全:

Python學習 優達學城,教你用樹莓派打造 Python 開發服務器

恭喜你!你已經學會了基本的樹莓派服務器搭建,編寫了第一個 Flask 網站,還渲染了 Jinja 模板!祝你未來的編程之路更加有趣!

來自硅谷的終身學習平臺——優達學城(cn.udacity.com),專注於技能提升和求職法則,讓你在家能追隨 Google、Facebook、IBM 等行業大佬,從零開始掌握數據分析、機器學習、深度學習、人工智能、無人駕駛等前沿技術,激發未來無限可能!


分享到:


相關文章: