本章節，我們繼續完成監控頁面驗證的demo，實作實時從后臺重繪資料到UI端，筆者考慮采用B/S架構來構建這個簡單的監控頁面，下面將演示這個頁面是如何一步一步來演進，這也是希望告訴讀者，當我們面向一個新的需求時，如何通過技術領域的探索驗證技術路線是否滿足需求，在通過迭代來確保功能滿足需求的同時，如何通過不斷的小步迭代改進技術架構的程序，
目標1：實作一個網頁，通過點擊一個按鈕，然后從后臺抓取某幾個位號的值回傳到UI端更新網頁里div的文本內容，
2.1.安裝集成開發環境
本小節為了提高開發效率，文中演示程序中才用的集成開發環境（IDE），是Visual Studio Community 2019社區版本，可供學習的教育版本和個人開發者使用，同時也授權5人一下的小團隊進行商業開發，另外VS Community 2019有Mac版本，對于鐘愛使用Mac同學來說也是一個非常好的IDE選擇，
VS Community 2019下載網址：
https://visualstudio.microsoft.com/zh-hans/free-developer-offers/
筆者所用的開發環境：Windows 10作業系統筆記本電腦，進入安裝界面如下：
注意如上圖一定要選擇左邊ASP.NET Web 開發 和 Python 開發，同時，我們選擇python 2 32-bit 2.7 來確保滿足openOPC對python2環境的需求，如果環境不對就不能正常的訪問到OPC服務讀取tag位號值，
2.2.創建一個web project專案
安裝完畢后我們啟動VS Community 2019集成開發環境，來到啟動界面，如下圖：
選擇Create a new project選項創建一個Python web專案，這里選擇創建Flask Web Project，如下圖：
筆者選擇默認路徑，可自己選擇專案的存放位置，
2.3.添加一個專案運行的虛擬環境
專案運行的虛擬環境很重要，一定要選擇前面openOPC運行支持的python2環境否則后面就會很坑的，如下圖：
虛擬環境添加程序中IDE環境會自動安裝目標環境需要的相應的一些基本的python，比如Flask和其依賴的第三方組件，如下圖：
安裝虛擬環境完畢后我們就可以通過IDE環境運行這個專案了，點擊Debug下的F5運行我們剛剛創建的Flask Web專案，一個輕量級的網站就跑起來了，Flask 在輕量級上確實方便又好用的一個web開發利器，
2.4.新增一個自己的測驗頁面
我們新增一個頁面來模擬點擊按鈕重繪界面div文本效果，首先在專案的templates目錄下增加一個新的testPage.html的檔案，如下圖：
2.4.1.testPage.html代碼
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
<div>
tag value:
</div>
<div id="divTag">0.0 </div>
<button onclick="testClick()">test</button>
<script>
//按鈕系結事件，首先模擬把0.0值修改為2020
function testClick() {
$("#divTag").html('2020');
}
</script>
</body>
</html >
2.4.2.修改專案的views.py檔案代碼
# coding=utf8 #非常重要檔案了加了中文一定要加這個標記,否則運行程式會報錯
"""
Routes and views for the flask application.
"""
from datetime import datetime
from flask import render_template
from FlaskWebProject1 import app
#@app.route('/') 注釋這一行默認顯示我們新增的頁面
@app.route('/home')
def home():
"""Renders the home page."""
return render_template(
'index.html',
title='Home Page',
year=datetime.now().year,
)
@app.route('/contact')
def contact():
"""Renders the contact page."""
return render_template(
'contact.html',
title='Contact',
year=datetime.now().year,
message='Your contact page.'
)
@app.route('/about')
def about():
"""Renders the about page."""
return render_template(
'about.html',
title='About',
year=datetime.now().year,
message='Your application description page.'
)
@app.route('/') #把網站默認顯示頁面修改為我們新增的頁面便于除錯
@app.route('/testPage')
def testPage():
"""Renders the home page."""
return render_template(
'testPage.html',
title='Test Page',
)
2.4.3.按F5運行我們的網站專案
點擊“test”按鈕div 文字變成2020，模擬了點擊更新當前文字內容，
到目前為止，這個頁面簡單的體現了主動重繪資料的一個基本機制，那么接下來嘗試如何從后臺來獲取到資料，后臺獲取資料這里我們采用JQuery的異步請求 ajax() 技術來實作，因此我們發現頁面的head里加載了jquery-2.0.2.min.js檔案，本文采用百度的CDN就不用再自己的專案里增加這個js檔案了，
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script>
2.4.4.ajax異步呼叫
現在我們把testClick()函式代碼修改為如下：
function testClick() {
//模擬改變值
//$("#divTag").html('2020');
//模擬異步從后臺獲得值
$.ajax({url:"/getTagCurValue/",success:function(result){
$("#divTag").html(result);
}});
}
這次運行網站點擊“test”按鈕我們會在瀏覽器除錯工具頁的控制臺上看到錯誤，服務器沒有發現url資源，如下圖：
于是我們得在web服務里增加這個/getTagCurValue/，通過它從服務端回傳我們想讀取的tag位號的當前值，
2.4.5.views檔案里增加getTagCurValue url 函式
@app.route('/getTagCurValue')
def getTagCurValue():
"""Renders the home page."""
#先回傳一個靜態值測驗頁面的重繪效果
return "2021"
Flask筆者用起來可以說真是很爽，你看這么一段簡單的代碼我們就增加了一個后臺服務介面，F5 點擊“test”按鈕你會發現div文本重繪為“2021”了，是不是得呵呵了，
2.5.讀取opc服務的tag位號值
現在我們就差一步了getTagCurValue'真正讀取opc服務某一個tag位號的值，這樣就完成了從UI端到服務端主動獲取opc服務tag位號值，并更新UI界面的技術原型，views檔案函式getTagCurValue代碼修改如下：
@app.route('/getTagCurValue')
def getTagCurValue():
#先回傳一個靜態值測驗頁面的重繪效果
#return "2021"
import OpenOPC
opc = OpenOPC.client()
opc.connect('Matrikon.OPC.Simulation')
result= opc['Random.Int1']
opc.close()
return unicode( result)
這次我們F5執行測驗，點擊“test”按鈕UI界面資料不會重繪，服務端控制臺出現錯誤提示：
import OpenOPC
ImportError: No module named OpenOPC
這是因為我們添加的虛擬環境沒法有安裝這個openOPC組件，這里我們移除這個虛擬環境使用電腦安裝好的python27環境即可，如下圖：
移除虛擬環境后，我的系統會默認使用python3.6，需要把python2.7設定這個工程的默認執行環境，如下圖：
python環境切換成全域的python2.7后我們在F5運行測驗，每次點擊“test”按鈕UI都會重繪從服務端獲取到的tag Random.Int1 的當前值，
2.6.小結
本小節，通過設立一個小目標（1億元）我們完成了頁面UI通過主動重繪（通過按鈕Click事件） 采用ajax異步請求方式從后臺讀取靜態資料，到讀取OPC tag位號值的演程序序，結合上一篇的代碼我們就實作了UI端展現OPC tag 位號值的原型驗證程序，下一篇，我們會進步優化這個頁面，實作頁面的動態自動重繪，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/181823.html
標籤：Python
上一篇：《自拍教程37》段位進階注意事項