既然擺好了一個網(wǎng)站的架勢,下面就可以向里面填內(nèi)容。
要做的網(wǎng)站,有數(shù)據(jù)庫支持,雖然這不是必須的,但是如果做一個功能強悍的網(wǎng)站,數(shù)據(jù)庫就是必須的了。
接下來的網(wǎng)站,我暫且采用 mysql 數(shù)據(jù)庫。
怎么連接 mysql 數(shù)據(jù)呢?其方法跟《mysql 數(shù)據(jù)庫(1)》中的方法完全一致。為了簡單,我也不新建數(shù)據(jù)庫了,就利用已經(jīng)有的那個數(shù)據(jù)庫。
在上一節(jié)中已經(jīng)建立的文件夾 methods 中建立一個文件 db.py,并且參考《mysql 數(shù)據(jù)庫 (1)》和《mysql 數(shù)據(jù)庫 (2)》的內(nèi)容,分別建立起連接對象和游標(biāo)對象。代碼如下:
#!/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)在眼前的是一個登錄界面。在用戶名和密碼兩個輸入框中分別輸入了正確的用戶名和密碼之后,點擊確定按鈕,登錄網(wǎng)站,顯示對該用戶的歡迎信息。
用圖示來說明,首先呈現(xiàn)下圖:
http://wiki.jikexueyuan.com/project/start-learning-python/images/30401.png" alt="" />
用戶點擊“登錄”按鈕,經(jīng)過驗證是合法用戶之后,就呈現(xiàn)這樣的界面:
http://wiki.jikexueyuan.com/project/start-learning-python/images/30402.png" alt="" />
先用 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>
這是一個很簡單前端界面。要特別關(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%。這樣做的目的,是讓在電腦、手機等不同大小的屏幕上,都能非常好地顯示。
這種樣式的網(wǎng)頁,就是“自適應(yīng)頁面”。當(dāng)然,自適應(yīng)頁面絕非是僅僅有這樣一行代碼就完全解決的。要設(shè)計自適應(yīng)頁面,也就是要進行“響應(yīng)式設(shè)計”,還需要對 CSS、JS 乃至于其它元素如表格、圖片等進行設(shè)計,或者使用一些響應(yīng)式設(shè)計的框架。這個目前暫不討論,讀者可以網(wǎng)上搜索有關(guān)資料閱讀。
一提到要能夠在手機上,讀者是否想到了 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āng)代的網(wǎng)絡(luò)需求。廣義論及 HTML5 時,實際指的是包括 HTML、CSS 和 JavaScript 在內(nèi)的一套技術(shù)組合。
響應(yīng)式網(wǎng)頁設(shè)計(英語:Responsive web design,通??s寫為 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)頁,因為它是 .html 格式的文件。
雖然完成了視覺上的設(shè)計,但是,如果點擊那個 login 按鈕,沒有任何反應(yīng)。因為它還僅僅是一個孤立的頁面,這時候需要一個前端交互利器——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è)計實現(xiàn)而成。因為網(wǎng)景公司與昇陽公司合作,網(wǎng)景公司管理層希望它外觀看起來像 Java,因此取名為 JavaScript。但實際上它的語義與 Self 及 Scheme 較為接近。
為了獲取技術(shù)優(yōu)勢,微軟推出了 JScript,與 JavaScript 同樣可在瀏覽器上運行。為了統(tǒng)一規(guī)格,1997 年,在 ECMA(歐洲計算機制造商協(xié)會)的協(xié)調(diào)下,由網(wǎng)景、昇陽、微軟和 Borland 公司組成的工作組確定統(tǒng)一標(biāo)準(zhǔn):ECMA-262。因為 JavaScript 兼容于 ECMA 標(biāo)準(zhǔn),因此也稱為 ECMAScript。
但是,我更喜歡用 jQuery,因為它的確讓我省了不少事。
jQuery 是一套跨瀏覽器的 JavaScript 庫,簡化 HTML 與 JavaScript 之間的操作。由約翰·雷西格(John Resig)在 2006 年 1 月的 BarCamp NYC 上發(fā)布第一個版本。目前是由 Dave Methvin 領(lǐng)導(dǎo)的開發(fā)團隊進行開發(fā)。全球前 10,000 個訪問最高的網(wǎng)站中,有 65% 使用了 jQuery,是目前最受歡迎的 JavaScript 庫。
在 index.html 文件中引入 jQuery 的方法有多種。
原則上將,可以在 HTML 文件的任何地方引入 jQuery 庫,但是通常放置的地方在 html 文件的開頭 <head>...</head>
中,或者在文件的末尾 </body>
以內(nèi)。放在開頭,如果所用的庫比較大、比較多,在載入頁面時時間相對長點。
第一種引入方法,是國際化的一種:
<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)頁幾乎打不開,就是因為連接上面那個地址的通道是被墻了。
當(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é)尾的文件,因為這個是經(jīng)過壓縮之后,體積小。
我在 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 是一個函數(shù),它是 tornado 模板提供的一個函數(shù)。用這個函數(shù),能夠制定靜態(tài)文件。之所以用它,而不是用上面的那種直接調(diào)用的方法,主要原因是如果某一天,將靜態(tài)文件目錄 statics 修改了,也就是不指定 statics 為靜態(tài)文件目錄了,定義別的目錄為靜態(tài)文件目錄。只需要在定義靜態(tài)文件目錄那里修改(定義靜態(tài)文件目錄的方法請參看上一節(jié)),而其它地方的代碼不需要修改。
先寫一個測試性質(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ì)解釋。
上面的代碼主要實現(xiàn)獲取表單中 id 值分別為 username 和 password 所輸入的值,alert 函數(shù)的功能是把值以彈出菜單的方式顯示出來。
是否還記得在上一節(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 目錄中。因為這里面的文件要在別處被當(dāng)做模塊引用,所以,需要在這里建立一個空文件,命名為__init__.py
。這個文件非常重要。在編寫模塊一節(jié)中,介紹了引用模塊的方法。但是,那些方法有一個弊端,就是如果某個目錄中有多個文件,就顯得麻煩了。其實 Python 已經(jīng)想到這點了,于是就提供了__init__.py
文件,只要在該目錄中加入了這個文件,該目錄中的其它 .py 文件就可以作為模塊被 Python 引入了。
至此,一個帶有表單的 tornado 網(wǎng)站就建立起來了。讀者可以回到上一級目錄中,找到 server.py 文件,運行它:
$ 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 中的開始起作用了,第一句是要彈出一個對話框。點擊“確定”按鈕之后,就是:
http://wiki.jikexueyuan.com/project/start-learning-python/images/30404.png" alt="" />
在這個頁面輸入用戶名和密碼,然后點擊 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,不勝感激。