#!/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()    #游標(biāo)對象

用戶登錄

前端

很多網(wǎng)站上都看到用戶登錄功能，這里做一個簡單的登錄，其功能描述為：

當(dāng)用戶輸入網(wǎng)址，呈現(xiàn)在眼前的是一個登錄界面。在用戶名和密碼兩個輸入框中分別輸入了正確的用戶名和密碼之后，點(diǎn)擊確定按鈕，登錄網(wǎng)站，顯示對該用戶的歡迎信息。

用圖示來說明，首先呈現(xiàn)下圖：

http://wiki.jikexueyuan.com/project/start-learning-python/images/30401.png" alt="" />

用戶點(diǎn)擊“登錄”按鈕，經(jīng)過驗(yàn)證是合法用戶之后，就呈現(xiàn)這樣的界面：

http://wiki.jikexueyuan.com/project/start-learning-python/images/30402.png" alt="" />

先用 HTML 寫好第一個界面。進(jìn)入到 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>

這是一個很簡單前端界面。要特別關(guān)注 <meta name="viewport" content="width=device-width, initial-scale=1" />，其目的在將網(wǎng)頁的默認(rèn)寬度(viewport)設(shè)置為設(shè)備的屏幕寬度(width=device-width)，并且原始縮放比例為 1.0(initial-scale=1)，即網(wǎng)頁初始大小占屏幕面積的 100%。這樣做的目的，是讓在電腦、手機(jī)等不同大小的屏幕上，都能非常好地顯示。

這種樣式的網(wǎng)頁，就是“自適應(yīng)頁面”。當(dāng)然，自適應(yīng)頁面絕非是僅僅有這樣一行代碼就完全解決的。要設(shè)計自適應(yīng)頁面，也就是要進(jìn)行“響應(yīng)式設(shè)計”，還需要對 CSS、JS 乃至于其它元素如表格、圖片等進(jìn)行設(shè)計，或者使用一些響應(yīng)式設(shè)計的框架。這個目前暫不討論，讀者可以網(wǎng)上搜索有關(guān)資料閱讀。

一提到要能夠在手機(jī)上，讀者是否想到了 HTML5 呢，這個被一些人熱捧、被另一些人蔑視的家伙，毋庸置疑，現(xiàn)在已經(jīng)得到了越來越廣泛的應(yīng)用。

HTML5 是 HTML 最新的修訂版本，2014 年 10 月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。目標(biāo)是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。廣義論及 HTML5 時，實(shí)際指的是包括 HTML、CSS 和 JavaScript 在內(nèi)的一套技術(shù)組合。

響應(yīng)式網(wǎng)頁設(shè)計（英語：Responsive web design，通常縮寫為 RWD），又稱為自適應(yīng)網(wǎng)頁設(shè)計、回應(yīng)式網(wǎng)頁設(shè)計。是一種網(wǎng)頁設(shè)計的技術(shù)做法，該設(shè)計可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到移動電話或其他移動產(chǎn)品設(shè)備）上閱讀和導(dǎo)航，同時減少縮放、平移和滾動。

如果要看效果，可以直接用瀏覽器打開網(wǎng)頁，因?yàn)樗?.html 格式的文件。

引入 jQuery

雖然完成了視覺上的設(shè)計，但是，如果點(diǎn)擊那個 login 按鈕，沒有任何反應(yīng)。因?yàn)樗€僅僅是一個孤立的頁面，這時候需要一個前端交互利器——javascript。

對于 javascript，不少人對它有誤解，總認(rèn)為它是從 java 演化出來的。的確，兩個有相像的地方。但 javascript 和 java 的關(guān)系，就如同“雷峰塔”和“雷鋒”的關(guān)系一樣。詳細(xì)讀一讀來自維基百科的詮釋。

JavaScript，一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類。它的解釋器被稱為 JavaScript 引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在 HTML 網(wǎng)頁上使用，用來給 HTML 網(wǎng)頁增加動態(tài)功能。然而現(xiàn)在 JavaScript 也可被用于網(wǎng)絡(luò)服務(wù)器，如 Node.js。

在 1995 年時，由網(wǎng)景公司的布蘭登·艾克，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計實(shí)現(xiàn)而成。因?yàn)榫W(wǎng)景公司與昇陽公司合作，網(wǎng)景公司管理層希望它外觀看起來像 Java，因此取名為 JavaScript。但實(shí)際上它的語義與 Self 及 Scheme 較為接近。

為了獲取技術(shù)優(yōu)勢，微軟推出了 JScript，與 JavaScript 同樣可在瀏覽器上運(yùn)行。為了統(tǒng)一規(guī)格，1997 年，在 ECMA（歐洲計算機(jī)制造商協(xié)會）的協(xié)調(diào)下，由網(wǎng)景、昇陽、微軟和 Borland 公司組成的工作組確定統(tǒng)一標(biāo)準(zhǔn)：ECMA-262。因?yàn)?JavaScript 兼容于 ECMA 標(biāo)準(zhǔn)，因此也稱為 ECMAScript。

但是，我更喜歡用 jQuery，因?yàn)樗拇_讓我省了不少事。

jQuery 是一套跨瀏覽器的 JavaScript 庫，簡化 HTML 與 JavaScript 之間的操作。由約翰·雷西格（John Resig）在 2006 年 1 月的 BarCamp NYC 上發(fā)布第一個版本。目前是由 Dave Methvin 領(lǐng)導(dǎo)的開發(fā)團(tuán)隊進(jìn)行開發(fā)。全球前 10,000 個訪問最高的網(wǎng)站中，有 65% 使用了 jQuery，是目前最受歡迎的 JavaScript 庫。

在 index.html 文件中引入 jQuery 的方法有多種。

原則上將，可以在 HTML 文件的任何地方引入 jQuery 庫，但是通常放置的地方在 html 文件的開頭 <head>...</head> 中，或者在文件的末尾 </body> 以內(nèi)。放在開頭，如果所用的庫比較大、比較多，在載入頁面時時間相對長點(diǎn)。

第一種引入方法，是國際化的一種：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

這是直接從 jQuery CDN(Content Delivery Network)上直接引用，好處在于如果這個庫更新，你不用任何操作，就直接使用最新的了。但是，如果在你的網(wǎng)頁中這么用了，如果在某個有很多自信的國家上網(wǎng)，并且沒有梯子，會發(fā)現(xiàn)網(wǎng)頁幾乎打不開，就是因?yàn)檫B接上面那個地址的通道是被墻了。

當(dāng)然，jQuery CDN 不止一個，比如官方網(wǎng)站的：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

第二種引入方法，就是將 jQuery 下載下來，放在指定地方（比如，與自己網(wǎng)站在同一個存儲器中，或者自己可以訪問的另外服務(wù)器）。到官方網(wǎng)站（https://jqueryui.com/）下載最新的庫，然后將它放在已經(jīng)建立的 statics 目錄內(nèi)，為了更清楚區(qū)分，可以在里面建立一個子目錄 js，jquery 庫放在 js 子目錄里面。下載的時候，建議下載以 min.js 結(jié)尾的文件，因?yàn)檫@個是經(jīng)過壓縮之后，體積小。

我在 statics/js 目錄中放置了下載的庫，并且為了簡短，更名為 jquery.min.js。

本來可以用下面的方法引入：

<script src="statics/js/jquery.min.js"></script>

如果這樣寫，也是可以的。但是，考慮到 tornado 的特點(diǎn)，用下面方法引入，更具有靈活性：

<script src="{{static_url("js/jquery.min.js")}}"></script>

不僅要引入 jquery，還需要引入自己寫的 js 指令，所以要建立一個文件，我命名為 script.js，也同時引用過來。雖然目前這個文件還是空的。

<script src="{{static_url("js/script.js")}}"></script>

這里用的 static_url 是一個函數(shù)，它是 tornado 模板提供的一個函數(shù)。用這個函數(shù)，能夠制定靜態(tài)文件。之所以用它，而不是用上面的那種直接調(diào)用的方法，主要原因是如果某一天，將靜態(tài)文件目錄 statics 修改了，也就是不指定 statics 為靜態(tài)文件目錄了，定義別的目錄為靜態(tài)文件目錄。只需要在定義靜態(tài)文件目錄那里修改（定義靜態(tài)文件目錄的方法請參看上一節(jié)），而其它地方的代碼不需要修改。

編寫 js

先寫一個測試性質(zhì)的東西。

用編輯器打開 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 代碼部分，只能一帶而過，不詳細(xì)解釋。

上面的代碼主要實(shí)現(xiàn)獲取表單中 id 值分別為 username 和 password 所輸入的值，alert 函數(shù)的功能是把值以彈出菜單的方式顯示出來。

hanlers 里面的程序

是否還記得在上一節(jié)中，在 url.py 文件中，做了這樣的設(shè)置：

from handlers.index import IndexHandler    #假設(shè)已經(jīng)有了

url = [
    (r'/', IndexHandler),
]

現(xiàn)在就去把假設(shè)有了的那個文件建立起來，即在 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")

當(dāng)訪問根目錄的時候（不論輸入 localhost:8000，還是 http://127.0.0.1:8000，或者網(wǎng)站域名），就將相應(yīng)的請求交給了 handlers 目錄中的 index.py 文件中的 IndexHandler 類的 get() 方法來處理，它的處理結(jié)果是呈現(xiàn) index.html 模板內(nèi)容。

render() 函數(shù)的功能在于向請求者反饋網(wǎng)頁模板，并且可以向模板中傳遞數(shù)值。關(guān)于傳遞數(shù)值的內(nèi)容，在后面介紹。

上面的文件保存之后，回到 handlers 目錄中。因?yàn)檫@里面的文件要在別處被當(dāng)做模塊引用，所以，需要在這里建立一個空文件，命名為__init__.py。這個文件非常重要。在編寫模塊一節(jié)中，介紹了引用模塊的方法。但是，那些方法有一個弊端，就是如果某個目錄中有多個文件，就顯得麻煩了。其實(shí) Python 已經(jīng)想到這點(diǎn)了，于是就提供了__init__.py 文件，只要在該目錄中加入了這個文件，該目錄中的其它 .py 文件就可以作為模塊被 Python 引入了。

至此，一個帶有表單的 tornado 網(wǎng)站就建立起來了。讀者可以回到上一級目錄中，找到 server.py 文件，運(yùn)行它：

$ python server.py
Development server is running at http://127.0.0.1:8000
Quit the server with Control-C

如果讀者在前面的學(xué)習(xí)中，跟我的操作完全一致，就會在 shell 中看到上面的結(jié)果。

打開瀏覽器，輸入 http://localhost:8000 或者 http://127.0.0.1:8000，看到的應(yīng)該是：

http://wiki.jikexueyuan.com/project/start-learning-python/images/30403.png" alt="" />

這就是 script.js 中的開始起作用了，第一句是要彈出一個對話框。點(diǎn)擊“確定”按鈕之后，就是：

http://wiki.jikexueyuan.com/project/start-learning-python/images/30404.png" alt="" />

在這個頁面輸入用戶名和密碼，然后點(diǎn)擊 Login 按鈕，就是：

http://wiki.jikexueyuan.com/project/start-learning-python/images/30405.png" alt="" />

一個網(wǎng)站有了雛形。不過，當(dāng)提交表單的反應(yīng)，還僅僅停留在客戶端，還沒有向后端傳遞客戶端的數(shù)據(jù)信息。請繼續(xù)學(xué)習(xí)下一節(jié)。

總目錄 | 上節(jié)：用 tornado 做網(wǎng)站 (1) | 下節(jié)：用 tornado 做網(wǎng)站 (3)

如果你認(rèn)為有必要打賞我，請通過支付寶：qiwsir@126.com,不勝感激。

上一篇：MySQL 數(shù)據(jù)庫 (2)下一篇：寫一個簡單的程序