整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
期文章我們分享了flask的基礎(chǔ)知識(shí)以及如何安裝flask，當(dāng)你安裝完成flask后，我們就可以打造自己的web服務(wù)器了。
首先我們打印最簡(jiǎn)單的hello world,并在瀏覽器中顯示
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
return 'hello flask'
if __name__=='__main__':
app.run()導(dǎo)入Flask模塊
新建一個(gè)app，繼承Flask,app是一個(gè)Flask應(yīng)用程序的接口，瀏覽器訪問網(wǎng)頁是從路由入口進(jìn)行訪問
Flask 建立路由使用@app.route('/')的方式（）里面的便是網(wǎng)頁的路由地址（“/”）默認(rèn)是IP地址的最初地址，路由下的函數(shù)便是完整的網(wǎng)頁代碼
我們實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的web服務(wù)器，返回一個(gè)字符串
利用app.run()函數(shù)來啟動(dòng)flask web服務(wù)器
ok,運(yùn)行以上代碼
* Serving Flask app "flaskweb" (lazy loading)
* Environment: production
WARNING: Do not use the development server in a production environment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)代碼運(yùn)行后，flask會(huì)提示如上信息，前幾條的意思我們后幾期的文章一一分享，關(guān)鍵是看最后一行信息，我們運(yùn)行在本機(jī)上，flask的默認(rèn)端口是5000，在瀏覽器中輸入以上地址http://127.0.0.1:5000便可以看到我們?cè)O(shè)計(jì)的最簡(jiǎn)單的網(wǎng)頁了
flask web服務(wù)器
以上我們便成功運(yùn)行了一個(gè)flask web 服務(wù)器
當(dāng)然我們很少在瀏覽器中輸入端口號(hào)，如何只輸入http://127.0.0.1便可以看到網(wǎng)頁呢？
其實(shí)，http默認(rèn)監(jiān)聽系統(tǒng)的80端口，若我們修改一下flask的默認(rèn)端口為80端口，是否就可以了？
let's try !!!
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
return 'hello flask'
if __name__=='__main__':
app.run(port=80)在app.run(port=80)中輸入port=80 來修改flask的默認(rèn)端口，成功運(yùn)行一下
flask web服務(wù)器
可以看到，直接輸入http://127.0.0.1就可以看到我們的網(wǎng)頁了,其實(shí)你在瀏覽上輸入http://127.0.0.1：80地址，瀏覽器也會(huì)自動(dòng)除掉80端口
from flask import Flask
app=Flask(__name__)
@app.route('/index')
def index():
return 'hello flask'
if __name__=='__main__':
app.run(port=80)瀏覽器的路由可以幫忙我們?cè)谝粋€(gè)網(wǎng)站地址下面建立不同的網(wǎng)頁
如上我們?cè)?'/index')輸入瀏覽器路由為/index，顧名思義，當(dāng)我們輸入http://127.0.0.1/index時(shí)，便可以訪問網(wǎng)頁
let's try again
flask web 服務(wù)器
flask是一個(gè)web服務(wù)器框架，當(dāng)然你完全可以在路由函數(shù)下建立自己的網(wǎng)站，不過前端的小伙伴們可是不愿意在這里搭建自己的網(wǎng)頁，畢竟人家有自己的html5+CSS+JS 全家桶，那么flask是如何打造網(wǎng)頁的呢
from flask import Flask, render_template
app=Flask(__name__)
@app.route('/index')
def index():
return 'hello flask'
@app.route('/url')
def first_url():
return render_template('hello.html')flask中的render_template便可以返回一個(gè)完整的網(wǎng)頁，看到這里前端的小伙伴們可以放心了，又可以跟自己的html5+CSS+JS 全家桶打交到了，不過我們需要在flask運(yùn)行目錄下建立一個(gè)templates文件夾
所有的html的網(wǎng)頁都必須放置在這個(gè)文件夾里，以便flask能夠索引。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world，hello flask
</body>
</html>我們?cè)诰W(wǎng)頁里面輸入簡(jiǎn)單的代碼，然后運(yùn)行一下啊
try again and again
網(wǎng)頁
flask成功運(yùn)行！！！
看到這里，想必小伙伴們也入門了flask，前端方面的知識(shí)，小編不在這里 一一介紹，畢竟這也不是 小編的強(qiáng)項(xiàng)，我們還依然是人工智能方向的研究所，我們主要使用flask來提供web服務(wù)，來達(dá)到我們需要的功能
最后推薦一下人工智能研究所出品的目標(biāo)追蹤的專欄，喜歡人工智能，目標(biāo)檢測(cè)與目標(biāo)追蹤方向的小伙伴們可以一起探討學(xué)習(xí)
flask系統(tǒng)性的知識(shí)，小伙伴們可以買本自己喜歡的書籍來學(xué)習(xí)，小編的文章當(dāng)然也會(huì)介紹一下簡(jiǎn)單的應(yīng)用
還記得我們文章中留下的問題嗎，下期我們一一來解讀一下，并講述一下如何使用域名，而不是 IP地址來訪問網(wǎng)頁
介：通過Mind+創(chuàng)建一個(gè)Python程序，使用Flask擴(kuò)展庫(kù)構(gòu)建Web服務(wù)，手機(jī)、電腦通過瀏覽器遠(yuǎn)程查看USB攝像頭視頻畫面。通過實(shí)驗(yàn)，初步了解Flask擴(kuò)展庫(kù)的概念和使用方法。
此前通過OpenCV庫(kù)在行空板上查看USB攝像頭視頻的實(shí)驗(yàn)，我們了解了Mind+進(jìn)行Python編程的兩種模式，了解了Python第三方庫(kù)的概念。現(xiàn)在我們將通過Flask庫(kù)搭建一個(gè)可以遠(yuǎn)程查看行空板攝像頭畫面的Web服務(wù)，實(shí)現(xiàn)自制遠(yuǎn)程監(jiān)控。
硬件：
本文實(shí)驗(yàn)所用的臺(tái)式電腦為Windows7操作系統(tǒng)，行空板為V0.3.5版本，數(shù)據(jù)線為Type-C接口。
軟件：
Flask是一個(gè)輕量級(jí)的Python Web框架，它提供了構(gòu)建Web應(yīng)用程序所需的基本工具和庫(kù)，設(shè)計(jì)簡(jiǎn)單且易于擴(kuò)展，它具有以下特點(diǎn)：
輕量級(jí)框架: Flask設(shè)計(jì)簡(jiǎn)單且易于理解，適用于快速開發(fā)小型到中型的Web應(yīng)用程序。
基于Werkzeug和Jinja2: Werkzeug處理底層的HTTP請(qǐng)求和響應(yīng)，Jinja2用于生成HTML頁面。
路由: 使用裝飾器(@app.route)將URL映射到相應(yīng)的處理函數(shù)，使得處理HTTP請(qǐng)求變得直觀和簡(jiǎn)單。
模板引擎: 使用Jinja2模板引擎渲染動(dòng)態(tài)內(nèi)容，允許在HTML中嵌入Python代碼，同時(shí)支持模板繼承和變量替換。
請(qǐng)求和響應(yīng)處理: 提供了簡(jiǎn)潔的API來訪問請(qǐng)求數(shù)據(jù)（如表單數(shù)據(jù)）、設(shè)置響應(yīng)內(nèi)容和狀態(tài)碼，以及處理文件上傳等功能。
擴(kuò)展性: Flask支持大量的擴(kuò)展，例如處理表單、身份驗(yàn)證、數(shù)據(jù)庫(kù)集成等，使得開發(fā)者可以根據(jù)需求選擇性地添加功能。
以下是Flask的基本使用步驟，黃色背景文字為示例代碼：
4.1安裝Flask：
首先，你需要在你的Python環(huán)境中安裝Flask。可以使用pip命令來進(jìn)行安裝：
pip install Flask
4.2創(chuàng)建Flask應(yīng)用實(shí)例：
在你的Python腳本中，導(dǎo)入Flask類并創(chuàng)建一個(gè)實(shí)例：
from flask import Flask
app = Flask(__name__)
4.3定義路由和視圖函數(shù)：
路由定義了URL到Python函數(shù)的映射。使用@app.route()裝飾器來定義路由，并在其后編寫處理請(qǐng)求的視圖函數(shù)。
@app.route('/')
def hello_world():
return 'Hello, World!'
4.4運(yùn)行Flask應(yīng)用：
在程序的最后，調(diào)用app.run()方法來啟動(dòng)Flask的開發(fā)服務(wù)器。默認(rèn)情況下，服務(wù)器會(huì)監(jiān)聽本地的5000端口。設(shè)置 debug=True 可以開啟調(diào)試模式，便于查看和解決問題。
if __name__ == '__main__':
app.run(debug=True)
4.5使用模板（可選）：
Flask支持Jinja2模板引擎，你可以創(chuàng)建HTML模板文件，F(xiàn)lask通過渲染模板來生成動(dòng)態(tài)內(nèi)容。
4.6訪問應(yīng)用：
在瀏覽器中訪問 localhost:5000 （默認(rèn)端口），即可看到 “Hello, World!” 的頁面輸出。
這些步驟展示了一個(gè)非常基礎(chǔ)的 Flask 應(yīng)用的創(chuàng)建和運(yùn)行過程。隨著應(yīng)用復(fù)雜度的增加，你可以添加更多的路由、視圖函數(shù)，使用模板引擎渲染動(dòng)態(tài)內(nèi)容，并集成各種 Flask 擴(kuò)展來增強(qiáng)功能。Flask 的靈活性和簡(jiǎn)單性使得它成為開發(fā) Web 應(yīng)用和 API 的理想選擇。
將USB 攝像頭接入行空板，再將行空板數(shù)據(jù)線連接到電腦主機(jī)，然后打開Mind+軟件，選擇Python模式。
5.1在Python模式新建項(xiàng)目，選擇“模塊”模式。
5.2在官方擴(kuò)展庫(kù)添加“行空板”。
5.3在用戶擴(kuò)展庫(kù)添加Flask庫(kù)。
如果用戶庫(kù)沒有顯示“Flask”庫(kù)，可以在搜索欄輸入“ext”進(jìn)行搜索添加。
5.4完成添加后，點(diǎn)擊“連接遠(yuǎn)程終端”連接行空板。
5.5按下列順序添加Flask模塊到Python主程序
此處為方便演示，程序每次運(yùn)行都會(huì)自動(dòng)生成一次html網(wǎng)頁文件，在實(shí)際應(yīng)用中，網(wǎng)頁應(yīng)該單獨(dú)編輯，F(xiàn)lask僅需要向網(wǎng)頁模板中添加數(shù)據(jù)就行。另外，在網(wǎng)頁路由標(biāo)簽中，此處為空，意思是訪問根目錄，也就是類似“http://localhost:5000/”的網(wǎng)址。如果此處添加標(biāo)簽，那么訪問網(wǎng)頁的時(shí)候就需要在上述網(wǎng)址后面增加標(biāo)簽名稱。如本例中自動(dòng)生成代碼中可以看到攝像頭頁面的標(biāo)簽為“/video_feed”，所以直接訪問攝像頭畫面的網(wǎng)址為：http://localhost:5000/video_feed。
5.6點(diǎn)擊“運(yùn)行”按鈕將程序上傳到行空板
注意查看“終端信息輸出區(qū)”的上傳和運(yùn)行情況。Flask服務(wù)啟動(dòng)后，連接同一網(wǎng)絡(luò)的電腦和手機(jī)等終端設(shè)備即可通過瀏覽器訪問這個(gè)Flask服務(wù)。如果把該服務(wù)映射到外網(wǎng)固定IP，那么理論上，連接互聯(lián)網(wǎng)的設(shè)備都可以訪問該服務(wù)，實(shí)現(xiàn)遠(yuǎn)程監(jiān)控。
上面是電腦訪問http://10.1.2.3:8000/的演示效果，這里的網(wǎng)址還可以是分配給行空板的其他網(wǎng)址，每個(gè)人局域網(wǎng)情況不一樣，包括網(wǎng)段設(shè)置，防火墻設(shè)置都有區(qū)別。所以如果除了10.1.2.3，其他地址訪問不了的話，需要檢查一下你的整個(gè)網(wǎng)絡(luò)的設(shè)置問題。下圖是查看行空板IP地址的方法：
為了方便演示，手機(jī)無線訪問的方式也是通過手機(jī)直連行空板熱點(diǎn)，然后訪問192.168.123.1:8000來進(jìn)行查看。
實(shí)際動(dòng)手嘗試的朋友可能會(huì)發(fā)現(xiàn)，視頻畫面是倒的，需要翻轉(zhuǎn)攝像頭才能顯示正的畫面。還有就是網(wǎng)頁的內(nèi)容不夠豐富和靈活，還有Flask服務(wù)器啟動(dòng)的參數(shù)不能靈活設(shè)置。等等這些問題都屬于模塊化編程特有的局限性，因?yàn)槟K已經(jīng)被封裝，底層的代碼難以直接修改，所以功能不夠靈活。下面會(huì)演示用代碼模式實(shí)現(xiàn)同樣的功能，雖然需要一定的Python和Flask庫(kù)的學(xué)習(xí)成本，但是對(duì)于想實(shí)現(xiàn)復(fù)雜功能和靈活編程的開發(fā)者來說，這是很有必要的。
6.1在Python模式新建項(xiàng)目，選擇“代碼”模式。
6.2打開“文件系統(tǒng)”，在“項(xiàng)目中的文件”新建一個(gè)templates文件夾（用于存放html網(wǎng)頁模板），文件夾中新建一個(gè)index.html文件。然后在根目錄下新建一個(gè)app.py文件。
6.3通過“庫(kù)管理”PIP模式安裝Flask庫(kù)。
同時(shí)檢查OpenCV庫(kù)有沒有安裝，如果未安裝，須同時(shí)安裝OpenCV庫(kù)。
6.4雙擊打開index.html文件輸入代碼
<!DOCTYPE html> <!-- 聲明文檔類型為HTML5 -->
<html lang="en"> <!-- 設(shè)置頁面語言為英文 -->
<head> <!-- 頁面頭部信息 -->
<meta charset="UTF-8"> <!-- 設(shè)置頁面字符編碼為UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 設(shè)置頁面視口寬度為設(shè)備寬度，初始縮放比例為1 -->
<title>攝像頭視頻流</title> <!-- 設(shè)置頁面標(biāo)題為“攝像頭視頻流” -->
</head>
<body> <!-- 頁面主體內(nèi)容 -->
<h1>攝像頭視頻流</h1> <!-- 顯示標(biāo)題“攝像頭視頻流” -->
<img src="{{ url_for('video_feed') }}" alt="攝像頭視頻流"> <!-- 顯示攝像頭視頻流圖片，src屬性值為通過url_for函數(shù)生成的視頻流URL，alt屬性值為“攝像頭視頻流” -->
</body>
</html>6.5雙擊打開app.py文件輸入代碼
import cv2 # 導(dǎo)入OpenCV庫(kù)
from flask import Flask, render_template, Response # 導(dǎo)入Flask庫(kù)的相關(guān)模塊
app = Flask(__name__) # 創(chuàng)建一個(gè)Flask應(yīng)用實(shí)例
cap = cv2.VideoCapture(0) # 創(chuàng)建一個(gè)攝像頭對(duì)象，0表示默認(rèn)攝像頭
if not cap.isOpened(): # 檢查攝像頭是否成功打開
print("攝像頭未成功打開，請(qǐng)檢查攝像頭連接情況")
def gen_frames(): # 定義一個(gè)生成幀的函數(shù)
while cap.isOpened(): # 當(dāng)攝像頭打開時(shí)
success, frame = cap.read() # 讀取攝像頭的一幀畫面
if not success: # 如果讀取失敗
print('攝像頭畫面讀取失敗') # 打印錯(cuò)誤信息
break # 跳出循環(huán)
else: # 如果讀取成功
ret, buffer = cv2.imencode('.jpg', frame) # 將畫面編碼為JPEG格式
frame = buffer.tobytes() # 將編碼后的畫面轉(zhuǎn)換為字節(jié)流
yield (b'--frame\r\n' # 生成multipart/x-mixed-replace數(shù)據(jù)流的分隔符
b'Content-Type: image/jpeg\r\n\r\n' # 設(shè)置內(nèi)容類型為JPEG圖片
+ frame + b'\r\n') # 添加幀數(shù)據(jù)
@app.route('/') # 定義根路由
def index():
return render_template('index.html') # 渲染并返回index.html模板
@app.route('/video_feed') # 定義視頻流路由
def video_feed():
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame') # 返回視頻流數(shù)據(jù)
if __name__ == '__main__': # 當(dāng)腳本作為主程序運(yùn)行時(shí)
app.run(host='0.0.0.0', port=8000) # 啟動(dòng)Flask應(yīng)用，監(jiān)聽所有網(wǎng)絡(luò)接口，端口為80006.6連接行空板并運(yùn)行程序
效果和圖形化模式完全一致，并且不存在視頻畫面倒置，網(wǎng)頁重復(fù)生成，F(xiàn)lask服務(wù)器運(yùn)行參數(shù)不能靈活設(shè)置的問題。
通過一個(gè)簡(jiǎn)單的實(shí)例，我們展示了如何快速搭建一個(gè)Web服務(wù)器，響應(yīng)客戶端請(qǐng)求，并動(dòng)態(tài)生成內(nèi)容。對(duì)于希望進(jìn)入Web開發(fā)領(lǐng)域或是尋求輕量級(jí)解決方案的開發(fā)者來說，F(xiàn)lask無疑是一個(gè)值得深入探索的框架。
期文章我們分享了flask的基礎(chǔ)知識(shí)以及如何安裝flask，當(dāng)你安裝完成flask后，我們就可以打造自己的web服務(wù)器了。
首先我們打印最簡(jiǎn)單的hello world,并在瀏覽器中顯示
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
return 'hello flask'
if __name__=='__main__':
app.run()導(dǎo)入Flask模塊
新建一個(gè)app，繼承Flask,app是一個(gè)Flask應(yīng)用程序的接口，瀏覽器訪問網(wǎng)頁是從路由入口進(jìn)行訪問
Flask 建立路由使用@app.route('/')的方式（）里面的便是網(wǎng)頁的路由地址（“/”）默認(rèn)是IP地址的最初地址，路由下的函數(shù)便是完整的網(wǎng)頁代碼
我們實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的web服務(wù)器，返回一個(gè)字符串
利用app.run()函數(shù)來啟動(dòng)flask web服務(wù)器
ok,運(yùn)行以上代碼
* Serving Flask app "flaskweb" (lazy loading)
* Environment: production
WARNING: Do not use the development server in a production environment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)代碼運(yùn)行后，flask會(huì)提示如上信息，前幾條的意思我們后幾期的文章一一分享，關(guān)鍵是看最后一行信息，我們運(yùn)行在本機(jī)上，flask的默認(rèn)端口是5000，在瀏覽器中輸入以上地址http://127.0.0.1:5000便可以看到我們?cè)O(shè)計(jì)的最簡(jiǎn)單的網(wǎng)頁了
flask web服務(wù)器
以上我們便成功運(yùn)行了一個(gè)flask web 服務(wù)器
當(dāng)然我們很少在瀏覽器中輸入端口號(hào)，如何只輸入http://127.0.0.1便可以看到網(wǎng)頁呢？
其實(shí)，http默認(rèn)監(jiān)聽系統(tǒng)的80端口，若我們修改一下flask的默認(rèn)端口為80端口，是否就可以了？
let's try !!!
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
return 'hello flask'
if __name__=='__main__':
app.run(port=80)在app.run(port=80)中輸入port=80 來修改flask的默認(rèn)端口，成功運(yùn)行一下
flask web服務(wù)器
可以看到，直接輸入http://127.0.0.1就可以看到我們的網(wǎng)頁了,其實(shí)你在瀏覽上輸入http://127.0.0.1：80地址，瀏覽器也會(huì)自動(dòng)除掉80端口
from flask import Flask
app=Flask(__name__)
@app.route('/index')
def index():
return 'hello flask'
if __name__=='__main__':
app.run(port=80)瀏覽器的路由可以幫忙我們?cè)谝粋€(gè)網(wǎng)站地址下面建立不同的網(wǎng)頁
如上我們?cè)?'/index')輸入瀏覽器路由為/index，顧名思義，當(dāng)我們輸入http://127.0.0.1/index時(shí)，便可以訪問網(wǎng)頁
let's try again
flask web 服務(wù)器
flask是一個(gè)web服務(wù)器框架，當(dāng)然你完全可以在路由函數(shù)下建立自己的網(wǎng)站，不過前端的小伙伴們可是不愿意在這里搭建自己的網(wǎng)頁，畢竟人家有自己的html5+CSS+JS 全家桶，那么flask是如何打造網(wǎng)頁的呢
from flask import Flask, render_template
app=Flask(__name__)
@app.route('/index')
def index():
return 'hello flask'
@app.route('/url')
def first_url():
return render_template('hello.html')flask中的render_template便可以返回一個(gè)完整的網(wǎng)頁，看到這里前端的小伙伴們可以放心了，又可以跟自己的html5+CSS+JS 全家桶打交到了，不過我們需要在flask運(yùn)行目錄下建立一個(gè)templates文件夾
所有的html的網(wǎng)頁都必須放置在這個(gè)文件夾里，以便flask能夠索引。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world，hello flask
</body>
</html>我們?cè)诰W(wǎng)頁里面輸入簡(jiǎn)單的代碼，然后運(yùn)行一下啊
try again and again
網(wǎng)頁
flask成功運(yùn)行！！！
看到這里，想必小伙伴們也入門了flask，前端方面的知識(shí)，小編不在這里 一一介紹，畢竟這也不是 小編的強(qiáng)項(xiàng)，我們還依然是人工智能方向的研究所，我們主要使用flask來提供web服務(wù)，來達(dá)到我們需要的功能
最后推薦一下人工智能研究所出品的目標(biāo)追蹤的專欄，喜歡人工智能，目標(biāo)檢測(cè)與目標(biāo)追蹤方向的小伙伴們可以一起探討學(xué)習(xí)
flask系統(tǒng)性的知識(shí)，小伙伴們可以買本自己喜歡的書籍來學(xué)習(xí)，小編的文章當(dāng)然也會(huì)介紹一下簡(jiǎn)單的應(yīng)用
還記得我們文章中留下的問題嗎，下期我們一一來解讀一下，并講述一下如何使用域名，而不是 IP地址來訪問網(wǎng)頁
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
