摘要：在年時(shí)，由網(wǎng)景公司的布蘭登艾克，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)作而成。為了取得技術(shù)優(yōu)勢(shì)，微軟推出了，推出，與同樣可在瀏覽器上運(yùn)行。在表單中還要注意，有一個(gè)，表示的是要將表單的內(nèi)容提交給路徑所對(duì)應(yīng)的程序來(lái)處理。

  
But when he heard this, he said:"Those who are well have no need of a physician, but those who are sick. Go and learn what this means,"Idesire mercy, not sacrifice" For I have come to call not the righteous but sinners."(MATTHEW 9:12)

如果像前面那么做網(wǎng)站，也太丑陋了。并且功能也不多。

在實(shí)際做網(wǎng)站中，現(xiàn)在都要使用一個(gè)模板，并且在用戶直接看到的頁(yè)面，用html語(yǔ)言來(lái)寫頁(yè)面（關(guān)于HTML，本教程默認(rèn)為看官已經(jīng)熟悉，如果不熟悉，可以到找有關(guān)教程來(lái)學(xué)習(xí)）。

在做網(wǎng)站的行業(yè)里面，常常將HTML+CSS+JS組成的網(wǎng)頁(yè)，稱作“前端”。它主要負(fù)責(zé)展示，或者讓用戶填寫一些表格，通過(guò)JS提交給用python寫的程序，讓python程序來(lái)處理數(shù)據(jù)，那些處理數(shù)據(jù)的python程序稱之為“后端”。我常常提醒做“后端”的，不要輕視“前端”。如果看官立志成為全棧工程師，就要從前到后都通。

在本講中，為了突出模板和后端程序，我略去CSS+JS，雖然這樣一來(lái)界面難看，而且用戶的友好度也不怎么樣（JS，javascript是使網(wǎng)頁(yè)變得更友好的重要工具，如不用更換地址就能刷新頁(yè)面等等，特別提醒看官，一定要學(xué)好javascript，雖然這個(gè)可能沒(méi)有幾個(gè)大學(xué)教的。請(qǐng)看維基百科對(duì)javascript簡(jiǎn)介：）。

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

  
在1995年時(shí)，由網(wǎng)景公司的布蘭登·艾克，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)作而成。因?yàn)榫W(wǎng)景公司與升陽(yáng)公司合作，網(wǎng)景公司管理層次結(jié)構(gòu)希望它外觀看起來(lái)像Java，因此取名為JavaScript。但實(shí)際上它的語(yǔ)法風(fēng)格與Self及Scheme較為接近。

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

上面這段引文里面提到了一個(gè)非常著名的公司：網(wǎng)景，可能年青一代都忘卻了。也建議有興趣的看官到維基百科中了解這個(gè)傳奇公司，它曾經(jīng)有一個(gè)傳奇產(chǎn)品，雖然名字不復(fù)存在，但是Firefox是秉承它衣缽的。

話題再轉(zhuǎn)回來(lái)，還是關(guān)于本講，主要是要演示一個(gè)用模板（HTML）寫一個(gè)表單，然后提交給后端的python程序，再轉(zhuǎn)到另外一個(gè)顯示的前端頁(yè)面顯示。為了簡(jiǎn)化流程，這個(gè)過(guò)程中沒(méi)有數(shù)據(jù)處理和CSS+Javascript的工作，所有界面會(huì)丑陋。但是，“我很丑，可是我很溫柔”。

要做一個(gè)前端的頁(yè)面，顯示的內(nèi)容就如同下圖樣式

相應(yīng)代碼是，并命名為index.html，存在一個(gè)名稱是template的目錄中。

    
        
    
    
        
Please sing in.
        

            
Name:

            
Email:

            
Website:

            
Language:

            
        
    

上面的代碼是比較簡(jiǎn)單，如果看官熟悉html的話，不熟悉也不要緊，網(wǎng)上搜索就能理解。注意，沒(méi)有CSS+JS，所以簡(jiǎn)單。如果在真正開發(fā)中，這兩個(gè)是不能少的。

有了這個(gè)表單之后，如果用戶把相關(guān)信息都填寫好了。點(diǎn)擊下面的按鈕，就應(yīng)該提交給后端的python程序來(lái)處理。

做為tornado驅(qū)動(dòng)的網(wǎng)站，首先要能夠把前面的index.html顯示出來(lái)，這個(gè)一般用get方法，顯示的樣式就按照上面的樣子顯示。

用戶填寫信息之后，點(diǎn)擊按鈕提交。注意觀察上面的代碼表單中，設(shè)定了post方法，所以，在python程序中，應(yīng)該有一個(gè)post方法專門來(lái)接收所提交的數(shù)據(jù)，然后把提交的數(shù)據(jù)在另外一個(gè)網(wǎng)頁(yè)顯示出來(lái)。

在表單中還要注意，有一個(gè)action=/user，表示的是要將表單的內(nèi)容提交給/user路徑所對(duì)應(yīng)的程序來(lái)處理。這里需要說(shuō)明的是，在網(wǎng)站中，數(shù)據(jù)提交和顯示，路徑是非常重要的。

按照以上意圖，編寫如下代碼，并命名為usercontroller.py，保存在template目錄中

#!/usr/bin/env python
#coding:utf-8

import os.path

import tornado.httpserver
import tornado.ioloop
import tornado.options
import tornado.web

from tornado.options import define, options
define("port", default=8000, help="run on the given port", type=int)

class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.html")

class UserHandler(tornado.web.RequestHandler):
    def post(self):
        user_name = self.get_argument("username")
        user_email = self.get_argument("email")
        user_website = self.get_argument("website")
        user_language = self.get_argument("language")
        self.render("user.html",username=user_name,email=user_email,website=user_website,language=user_language)

handlers = [
    (r"/", IndexHandler),
    (r"/user", UserHandler)
]

template_path = os.path.join(os.path.dirname(__file__),"template")

if __name__ == "__main__":
    tornado.options.parse_command_line()
    app = tornado.web.Application(handlers, template_path)
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(options.port)
    tornado.ioloop.IOLoop.instance().start()

這次代碼量多一些。但是多數(shù)在前面講述tornado基本結(jié)構(gòu)的時(shí)候已經(jīng)說(shuō)過(guò)了，跟前面一樣，這里僅僅把重點(diǎn)的和新出現(xiàn)的進(jìn)行講述，如果看官對(duì)某些內(nèi)容還有疑問(wèn)，可以參考前面的相關(guān)章節(jié)。

在引入的模塊上，多了一個(gè)import os.path，這個(gè)模塊主要用在：

template_path = os.path.join(os.path.dirname(__file),"template")

這是要獲取存放程序的目錄template的路徑。

重點(diǎn)看兩個(gè)類中都有的self.render()，用這個(gè)方法引入相應(yīng)的模板。

self.render("index.html")

顯示index.html模板，但是此時(shí)并沒(méi)有向模板網(wǎng)頁(yè)傳遞任何數(shù)據(jù)，僅僅顯示罷了。下面一個(gè)：

self.render("user.html",username=user_name,email=user_email,website=user_website,language=user_language)

與前面的不同在于，不僅僅是要引用模板網(wǎng)頁(yè)user.html，還要向這個(gè)網(wǎng)頁(yè)傳遞一些數(shù)據(jù)，例如username=user_name，含義就是，在模板中，某個(gè)地方是用username來(lái)標(biāo)示得到的數(shù)據(jù)，而user_name是此方法中的一個(gè)變量，也就是對(duì)應(yīng)一個(gè)數(shù)據(jù)，那么模板中的username也就對(duì)應(yīng)了user_name的數(shù)據(jù)，這是通過(guò)username=user_name完成的（說(shuō)的有點(diǎn)像外語(yǔ)了）。后面的變量同理。

那么，user_name的數(shù)據(jù)是哪里來(lái)的呢？就是在index.html頁(yè)面的表單中提交上來(lái)的。注意觀察路徑的設(shè)置，r"/user", UserHandler，也就是在form中的action="/user"，就是要將數(shù)據(jù)提交給UserHandler處理，并且是通過(guò)post方法。所以，在UserHandler類中，有post()方法來(lái)處理這個(gè)問(wèn)題。通過(guò)self.get_argument()來(lái)接收前端提交過(guò)來(lái)的數(shù)據(jù)，接收方法就是，self.get_argument()的參數(shù)與index.html表單form中的各項(xiàng)的name值相同，就會(huì)得到相應(yīng)的數(shù)據(jù)。例如user_name = self.get_argument("username")，就能夠得到index.html表單中name為"username"的元素的值，并賦給user_name變量。

還差一個(gè)網(wǎng)頁(yè)。

在上面的代碼中，又多了一個(gè)模板：index.html，對(duì)這個(gè)模板，跟前面那個(gè)模板有一點(diǎn)兒不一樣的地方，就是要引入一些變量。它的代碼是這樣的：

    
        
    
    
        
Your Information
        
Your name is {{username}}
        
Your email is {{email}}
        
Your website is {{website}}, it is very good. This website is make by {{language}}
    

請(qǐng)將上面的代碼和這句話對(duì)照：

self.render("user.html",username=user_name,email=user_email,website=user_website,language=user_language)

上面的模板代碼存儲(chǔ)為名為user.html的文件，并且和前面已經(jīng)保存的在同一個(gè)目錄中。

看HTML模板代碼中，有類似{{username}}的變量，模板中用{{}}引入變量，這個(gè)變量就是在self.render()中規(guī)定的，兩者變量名稱一致，對(duì)應(yīng)將相應(yīng)的值對(duì)象引入到模板中。

進(jìn)入到template目錄，執(zhí)行：

qw@qw-Latitude-E4300:~/template$ python userscontroller.py

然后在瀏覽器的地址欄中輸入

http://localhost:8000

出現(xiàn)如下圖的表單，并填寫表單內(nèi)容

點(diǎn)擊“按鈕”之后：

這樣就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單表單提交的網(wǎng)站。