用tornado做網站(2) · 零基礎學python（第二版）

既然擺好了一個網站的架勢，下面就可以向里面填內容。 ## [](https://github.com/qiwsir/StarterLearningPython/blob/master/304.md#連接數據庫)連接數據庫要做的網站，有數據庫支持，雖然這不是必須的，但是如果做一個功能強悍的網站，數據庫就是必須的了。接下來的網站，我暫且采用mysql數據庫。怎么連接mysql數據呢？其方法跟[《mysql數據庫(1)》](https://github.com/qiwsir/StarterLearningPython/blob/master/230.md)中的方法完全一致。為了簡單，我也不新建數據庫了，就利用已經有的那個數據庫。在上一節中已經建立的文件夾methods中建立一個文件db.py，并且參考[《mysql數據庫(1)》](https://github.com/qiwsir/StarterLearningPython/blob/master/230.md)和[《mysql數據庫(2)》](https://github.com/qiwsir/StarterLearningPython/blob/master/231.md)的內容，分別建立起連接對象和游標對象。代碼如下： ~~~ #!/usr/bin/env python # coding=utf-8 import MySQLdb conn = MySQLdb.connect(host="localhost", user="root", passwd="123123", db="qiwsirtest", port=3306, charset="utf8") #連接對象 cur = conn.cursor() #游標對象 ~~~ ## [](https://github.com/qiwsir/StarterLearningPython/blob/master/304.md#用戶登錄)用戶登錄 ### [](https://github.com/qiwsir/StarterLearningPython/blob/master/304.md#前端)前端很多網站上都看到用戶登錄功能，這里做一個簡單的登錄，其功能描述為： > 當用戶輸入網址，呈現在眼前的是一個登錄界面。在用戶名和密碼兩個輸入框中分別輸入了正確的用戶名和密碼之后，點擊確定按鈕，登錄網站，顯示對該用戶的歡迎信息。用圖示來說明，首先呈現下圖： [![](https://box.kancloud.cn/2015-09-07_55ed57137ae1c.png)](https://github.com/qiwsir/StarterLearningPython/blob/master/3images/30401.png) 用戶點擊“登錄”按鈕，經過驗證是合法用戶之后，就呈現這樣的界面： [![](https://box.kancloud.cn/2015-09-07_55ed572686b77.png)](https://github.com/qiwsir/StarterLearningPython/blob/master/3images/30402.png) 先用HTML寫好第一個界面。進入到templates文件，建立名為index.html的文件： ~~~ <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Learning Python</title> </head> <body> <h2>Login</h2> <form method="POST"> <p><span>UserName:</span><input type="text" id="username"/></p> <p><span>Password:</span><input type="password" id="password" /></p> <p><input type="BUTTON" value="LOGIN" id="login" /></p> </form> </body> ~~~ 這是一個很簡單前端界面。要特別關注`<meta name="viewport" content="width=device-width, initial-scale=1" />`，其目的在將網頁的默認寬度(viewport)設置為設備的屏幕寬度(width=device-width)，并且原始縮放比例為1.0(initial-scale=1)，即網頁初始大小占屏幕面積的100%。這樣做的目的，是讓在電腦、手機等不同大小的屏幕上，都能非常好地顯示。這種樣式的網頁，就是“自適應頁面”。當然，自適應頁面絕非是僅僅有這樣一行代碼就完全解決的。要設計自適應頁面，也就是要進行“響應式設計”，還需要對CSS、JS乃至于其它元素如表格、圖片等進行設計，或者使用一些響應式設計的框架。這個目前暫不討論，讀者可以網上搜索有關資料閱讀。 > 一提到要能夠在手機上，讀者是否想到了HTML5呢，這個被一些人熱捧、被另一些人蔑視的家伙，毋庸置疑，現在已經得到了越來越廣泛的應用。 > > HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到符合當代的網絡需求。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。 > > 響應式網頁設計（英語：Responsive web design，通常縮寫為RWD），又稱為自適應網頁設計、回應式網頁設計。是一種網頁設計的技術做法，該設計可使網站在多種瀏覽設備（從桌面電腦顯示器到移動電話或其他移動產品設備）上閱讀和導航，同時減少縮放、平移和滾動。如果要看效果，可以直接用瀏覽器打開網頁，因為它是.html格式的文件。 ### [](https://github.com/qiwsir/StarterLearningPython/blob/master/304.md#引入jquery)引入jQuery 雖然完成了視覺上的設計，但是，如果點擊那個login按鈕，沒有任何反應。因為它還僅僅是一個孤立的頁面，這時候需要一個前端交互利器——javascript。 > 對于javascript，不少人對它有誤解，總認為它是從java演化出來的。的確，兩個有相像的地方。但javascript和java的關系，就如同“雷峰塔”和“雷鋒”的關系一樣。詳細讀一讀來自維基百科的詮釋。 > > JavaScript，一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。然而現在JavaScript也可被用于網絡服務器，如Node.js。 > > 在1995年時，由網景公司的布蘭登·艾克，在網景導航者瀏覽器上首次設計實現而成。因為網景公司與昇陽公司合作，網景公司管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語義與Self及Scheme較為接近。 > > 為了獲取技術優勢，微軟推出了JScript，與JavaScript同樣可在瀏覽器上運行。為了統一規格，1997年，在ECMA（歐洲計算機制造商協會）的協調下，由網景、昇陽、微軟和Borland公司組成的工作組確定統一標準：ECMA-262。因為JavaScript兼容于ECMA標準，因此也稱為ECMAScript。但是，我更喜歡用jQuery，因為它的確讓我省了不少事。 > jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。由約翰·雷西格（John Resig）在2006年1月的BarCamp NYC上發布第一個版本。目前是由Dave Methvin領導的開發團隊進行開發。全球前10,000個訪問最高的網站中，有65%使用了jQuery，是目前最受歡迎的JavaScript庫。在index.html文件中引入jQuery的方法有多種。原則上將，可以在HTML文件的任何地方引入jQuery庫，但是通常放置的地方在html文件的開頭`<head>...</head>`中，或者在文件的末尾`</body>`以內。放在開頭，如果所用的庫比較大、比較多，在載入頁面時時間相對長點。第一種引入方法，是國際化的一種： ~~~ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> ~~~ 這是直接從jQuery CDN(Content Delivery Network)上直接引用，好處在于如果這個庫更新，你不用任何操作，就直接使用最新的了。但是，如果在你的網頁中這么用了，如果在某個有很多自信的國家上網，并且沒有梯子，會發現網頁幾乎打不開，就是因為連接上面那個地址的通道是被墻了。當然，jQuery CDN不止一個，比如官方網站的： ~~~ <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> ~~~ 第二種引入方法，就是將jQuery下載下來，放在指定地方（比如，與自己網站在同一個存儲器中，或者自己可以訪問的另外服務器）。到官方網站（[https://jqueryui.com/](https://jqueryui.com/)）下載最新的庫，然后將它放在已經建立的statics目錄內，為了更清楚區分，可以在里面建立一個子目錄js，jquery庫放在js子目錄里面。下載的時候，建議下載以min.js結尾的文件，因為這個是經過壓縮之后，體積小。我在`statics/js`目錄中放置了下載的庫，并且為了簡短，更名為jquery.min.js。本來可以用下面的方法引入： ~~~ <script src="statics/js/jquery.min.js"></script> ~~~ 如果這樣寫，也是可以的。但是，考慮到tornado的特點，用下面方法引入，更具有靈活性： ~~~ <script src="{{static_url("js/jquery.min.js")}}"></script> ~~~ 不僅要引入jquery，還需要引入自己寫的js指令，所以要建立一個文件，我命名為script.js，也同時引用過來。雖然目前這個文件還是空的。 ~~~ <script src="{{static_url("js/script.js")}}"></script> ~~~ 這里用的static_url是一個函數，它是tornado模板提供的一個函數。用這個函數，能夠制定靜態文件。之所以用它，而不是用上面的那種直接調用的方法，主要原因是如果某一天，將靜態文件目錄statics修改了，也就是不指定statics為靜態文件目錄了，定義別的目錄為靜態文件目錄。只需要在定義靜態文件目錄那里修改（定義靜態文件目錄的方法請參看上一節），而其它地方的代碼不需要修改。 ### [](https://github.com/qiwsir/StarterLearningPython/blob/master/304.md#編寫js)編寫js 先寫一個測試性質的東西。用編輯器打開statics/js/script.js文件，如果沒有就新建。輸入的代碼如下： ~~~ $(document).ready(function(){ alert("good"); $("#login").click(function(){ var user = $("#username").val(); var pwd = $("#password").val(); alert("username: "+user); }); }); ~~~ 由于本教程不是專門講授javascript或者jquery，所以，在js代碼部分，只能一帶而過，不詳細解釋。上面的代碼主要實現獲取表單中id值分別為username和password所輸入的值，alert函數的功能是把值以彈出菜單的方式顯示出來。 ## [](https://github.com/qiwsir/StarterLearningPython/blob/master/304.md#hanlers里面的程序)hanlers里面的程序是否還記得在上一節中，在url.py文件中，做了這樣的設置： ~~~ from handlers.index import IndexHandler #假設已經有了 url = [ (r'/', IndexHandler), ] ~~~ 現在就去把假設有了的那個文件建立起來，即在handlers里面建立index.py文件，并寫入如下代碼： ~~~ #!/usr/bin/env python # coding=utf-8 import tornado.web class IndexHandler(tornado.web.RequestHandler): def get(self): self.render("index.html") ~~~ 當訪問根目錄的時候（不論輸入`localhost:8000`，還是`http://127.0.0.1:8000`，或者網站域名），就將相應的請求交給了handlers目錄中的index.py文件中的IndexHandler類的get()方法來處理，它的處理結果是呈現index.html模板內容。 `render()`函數的功能在于向請求者反饋網頁模板，并且可以向模板中傳遞數值。關于傳遞數值的內容，在后面介紹。上面的文件保存之后，回到handlers目錄中。因為這里面的文件要在別處被當做模塊引用，所以，需要在這里建立一個空文件，命名為`__init__.py`。這個文件非常重要。在[編寫模塊](https://github.com/qiwsir/StarterLearningPython/blob/master/219.md)一節中，介紹了引用模塊的方法。但是，那些方法有一個弊端，就是如果某個目錄中有多個文件，就顯得麻煩了。其實python已經想到這點了，于是就提供了`__init__.py`文件，只要在該目錄中加入了這個文件，該目錄中的其它.py文件就可以作為模塊被python引入了。至此，一個帶有表單的tornado網站就建立起來了。讀者可以回到上一級目錄中，找到server.py文件，運行它： ~~~ $ python server.py Development server is running at http://127.0.0.1:8000 Quit the server with Control-C ~~~ 如果讀者在前面的學習中，跟我的操作完全一致，就會在shell中看到上面的結果。打開瀏覽器，輸入`http://localhost:8000`或者`http://127.0.0.1:8000`，看到的應該是： [![](https://box.kancloud.cn/2015-09-07_55ed572866aea.png)](https://github.com/qiwsir/StarterLearningPython/blob/master/3images/30403.png) 這就是script.js中的開始起作用了，第一句是要彈出一個對話框。點擊“確定”按鈕之后，就是： [![](https://box.kancloud.cn/2015-09-07_55ed572b09d63.png)](https://github.com/qiwsir/StarterLearningPython/blob/master/3images/30404.png) 在這個頁面輸入用戶名和密碼，然后點擊Login按鈕，就是： [![](https://box.kancloud.cn/2015-09-07_55ed573671064.png)](https://github.com/qiwsir/StarterLearningPython/blob/master/3images/30405.png) 一個網站有了雛形。不過，當提交表單的反應，還僅僅停留在客戶端，還沒有向后端傳遞客戶端的數據信息。請繼續學習下一節。