咱這截圖是網站找的，驗證碼什麼的咱可以略過，知道登陸介面什麼樣就行。 使用者單擊“登入”按鈕，經過驗證是合法使用者之後，呈現的是歡迎介面
首先得需要建立HTML介面，在templates檔案中建立index.html檔案： <!DOCTYPE html> <head> <meta charset="UTF-8"> <!-- 將網頁的預設寬度（viewport）設定為裝置的螢幕寬度（width=device-width），並且原始縮放比例為1.0（initial-scale=1），即網頁初始大小占螢幕面積的100% --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>登陸 Python</title> </head> <body> <h2>登陸介面</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> 這是一個簡單的前端登陸介面,使用自適應的方式來寫的。 雖然完成了視覺上的設計，但是，如果單擊login按鈕，沒有任何反應。因為它還僅僅是一個孤立的頁面，這時候需要一個前端互動利器——JavaScript或者JQuery。 在這裡為了方便使用的是JQuery;jQuery是一套跨瀏覽器的JavaScript庫，可以簡化HTML與JavaScript之間的操作。 將jQuery下載下來，放在指定地方，到官方網站（https://jqueryui.com/）下載最新的庫，然後將它放在已經建立的statics目錄內，為了更清楚地區分，可以在裡面建立一個子目錄js，jQuery庫放在js子目錄裡面。建議下載以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/js/script.js檔案，如果沒有就建立。輸入的代碼如下： $(document).ready(function(){ alert("hello"); $("#login").click(function(){ var user = $("#username").val(); var pwd = $("#password").val(); alert("username: "+user); }); }); 代碼主要實現擷取表單中的id值分別為username和password輸入的值，alert函數的功能是把值以快顯功能表的方式顯示出來。 在handlers裡面建立index.py檔案，並寫入如下代碼： #!/usr/bin/env python # coding=utf-8 ''' Created on 2018年4月19日 ''' import tornado.web
class IndexHandler(tornado.web.RequestHandler): def get(self): self. render ("index.html") 當訪問根目錄的時候，就將相應的請求交給了handlers目錄中index.py檔案的IndexHandler類的get()方法來處理，它的處理結果呈現index.html模板內容。 render()函數的功能在於向要求者反饋網頁模板，並且可以向模板中傳遞數值。 回到 handlers目錄中。因為這裡面的檔案要在別處被當作模組引用，所以，需要在這裡建立一個空檔案，命名為 __init__.py。這個檔案非常重要。只要在目錄中加入了這個檔案，該目錄中的其他.py檔案就可以作為模組被Python引入了。 至此，一個帶有表單的網站就建立起來了。可以回到上一級目錄中，找到 server.py檔案，並運行它：
我第一次運行報錯了，原因是handlers/__init__.py裡面建立的時候自動產生注釋了，一定要刪掉，空的什麼都不留。 開啟瀏覽器，輸入http://localhost:8000或者 http://127.0.0.1:8000
這就是script.js中的“alert（"hello"）;”開始起作用了，第一句是要彈出一個對話方塊。單擊“確定”按鈕之後才顯示登陸介面。 輸入使用者名稱密碼，點擊登陸：
一個網站有了雛形就有了。當然現在還沒設計到表單提交和資料互動。繼續...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
