第二十天：python tornado ---實例: 全端連線實戰 I

前提概要

day19 帶大家熟悉基本的前台與後台溝通調試。

本文概要

正文開始

1. 前端測試頁:

程式碼放在github ， day20/websocket_TestPage.html

上圖是黑修斯撰寫的簡單測試頁，怎麼撰寫，留到後面教大家，這邊先大家熟悉一下使用。

2. 前端測試頁功能介紹

按鈕：websocket連線
按下 websocket連線 出現上圖，代表沒有開啟python tornado server，先開啟day19檔案中的day19_ex2.py檔案，即可。

開啟server後，再按下 websocket連線，就會連線成功，並出現如上兩圖的通知。

按鈕：websocket連線：程式碼說明：

1. 一開始連線成立，會發送"hello,這是黑修斯在day19寫的測試頁"
2. 收到的資料會透過console.log印出在chrome的console中。
3. 收到的資料會透過彈跳視窗的方式出現。
   

按鈕：訊息發送

1. 任意輸入訊息，範例輸入 "hello!!大家好，這是IT邦2019鐵人賽文章"
2. 按下 按鈕：訊息發送。
   

網頁會跳出如下圖視窗：

console視窗也會出現如下圖訊息：

這些回應就同 按鈕：websocket連線：程式碼說明 的一樣，只是多出了 你輸入的是，是透過後台(day19_ex2.py)加入的，如下圖程式碼：

按鈕：訊息發送:程式碼解說
非常容易，只是單純的發送

按鈕：找圖片 show
依序下圖輸入，並按下按鈕(一開始預設是 img1.jpg):

如果資料夾中沒有該圖檔，會出現如下顯示：

如果成功，會出現讀者設定的圖片，這篇我設定的是今天的首圖：

按鈕：找圖片 show:程式碼解說

1. 將圖片連接來源(src):設定連接到我們提供的url。
2. 將原本圖片隱藏屬性設為0(false)，圖片就顯示了，如果沒有圖片，會有一個小圖框show出來。
   

按鈕：圖片隱藏
按下 按鈕：圖片隱藏，就會將圖片隱藏了：

按鈕：圖片隱藏:程式碼解說
同 按鈕：找圖片 show:程式碼解說，只是將將原本圖片隱藏屬性設為1(true)，圖片就隱藏了。

按鈕：更多websocket介紹...
按下 按鈕：更多websocket介紹...：

會直接連接到day19文章中閱讀補充的 Websocket簡介 網頁。

按鈕：更多websocket介紹... :程式碼解說
按鈕：更多websocket介紹... 沒有多定義功能函式，只是單純的在button屬性中加入超連結屬性。

3. 功能與按鈕的關係：程式碼概說

上圖只有標示出後三個按鈕的關係。

而目前測試頁的按鈕與功能關係，如下表

4. 無法顯示網頁樣式的問題

因為黑修斯寫的測試頁，使用了網路連結，如下圖所示：

點擊連結，下載檔案到資料夾中，設定相對路徑即可。我們在day5有講過，這邊簡單說明，請看下列程式碼：

<link rel="stylesheet" href="你的資料夾路徑/w3.css">

小結

明天會接續今天的內容，繼續說明全端連線實戰，如何與mongoDB連線。