7,模版
Tornado提供比较好用的前端模板(tornado.template),通过这个模板,能够让前端编写更方便。
render():
render()方法能够告诉Tornado读入哪个模板,插入其中的模板代码,并返回结果给浏览器。比如在IndexHandler类中get()方法里面的self.render("index.html"),就是让Tornado到templates目中找到名为index.html的文件,读出它的内容,返回给浏览器。这样用户就能看到index.html所规定的页面了。
为了显示模版的作用,现在修改
index.html和
index.py文件
首先修改
index.py里的get方法:
#!/usr/bin/env python
# coding=utf-8
'''
Created on 2018年4月19日
'''
import tornado.web
import methods.readdb as mr
class IndexHandler(tornado.web.RequestHandler):
def get(self):
userNames = mr.selecr_columns(table="users", column="name")
first_user = userNames[0][0]
self.render("index.html"
,user = first_user
)
def post(self):
userName = self.get_argument("username")
passWord = self.get_argument("password")
user_infos = mr.select_tab(table="users",column="*",condition="name", value="'"+userName+"'")
if user_infos:
db_wd = user_infos[0][2]
if db_wd == passWord:
self.write("Welcome you :"+userName)
else:
self.write("your password was not right.")
else:
self.write("There is no this user.")
从数据库中读取用户名,并且提出数据库第一个用户(first_user),然后通过self.render("index.html",user=first_user)将这个用户名放到index.html中,其中user=first_user的作用就是传递对象到模板。
注意,在上面的代码中,我使用了mrd.select_columns(table="users",column="name"),也就是说必须要在methods目录中的
readdb.py文件中有一个名为select_columns的函数。
#!/usr/bin/env python
# coding=utf-8
'''
Created on 2018年4月20日
'''
from db import *
def select_tab(table, column, condition, value):
#拼接查询SQL
sql = "select " + column + " from " + table + " where " + condition + "=" + value
cur.execute(sql)
lines = cur.fetchall()
return lines
def selecr_columns(table, column):
sql = "select " + column + " from " + table
cur.execute(sql)
lines = cur.fetchall()
return lines
在继续修改
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" />
<script src="{{static_url('js/jquery.min.js')}}"></script>
<script src="{{static_url('js/script.js')}}"></script>
<title>登陆 Python</title>
</head>
<body>
<h2>登陆界面</h2>
<p>欢迎使用{{user}}用户登陆</p>
<form method="POST">
<p><span>用户名:</span><input type="text" id="username"/></p>
<p><span>密 码:</span><input type="password" id="password" /></p>
<p><input type="button" value="login" id="login" /></p>
</form>
</body>
“<p>用户名为:{{user}}登录</p>”,在这里用了“{{}}”方式接受对应的变量引用的对象。
效果:
“{{}}”本质上是占位符,当这个html被执行的时候,这个位置会被一个具体的对象所替代。具体是哪个具体对象替代这个占位符,完全由render()方法中的关键词来指定,也就是render()中的关键词与模板中的占位符包裹着的关键词一致。
然后,假如用户名密码正确之后,我们需要跳转到另外一个页面,并且在新页面中显示用户完整信息。
首先修改
url.py文件
#!/usr/bin/env python
# coding=utf-8
'''
Created on 2018年4月18日
这是网站的url结构
'''
import sys
reload(sys)
sys.setdefaultencoding("utf-8")
from handlers.index import IndexHandler
from handlers.user import UserHandler
url = [
(r'/',IndexHandler),
(r'/user',UserHandler),
]
然后建立handlers/
user.py文件
#!/usr/bin/env python
# coding=utf-8
'''
Created on 2018年4月23日
'''
import tornado.web
import methods.readdb as mr
class UserHandler(tornado.web.RequestHandler):
def get(self):
userName = self.get_argument("user")
user_infos = mr.select_tab(table="users",column="*",condition="name", value="'"+userName+"'")
self.render("user.html",
users = user_infos
)
在get()中使用self.get_argument("user"),目的是要通过url获取参数user的值。
修改statics/js/
scrupt.js文件
$(document).ready(function(){
$("#login").click(function(){
var user = $("#username").val();//获取用户名
var pwd = $("#password").val();//获取密码
var da = {"username":user, "password":pwd};
$.ajax({
type:"post",
url:"/",
data:da,
cache:false,
success:function(data){
window.location.href = "/user?user="+user;
},
error:function(){
alert("error!");
},
});
});
});
接下来是
user.html模板,注意,上面的代码中,user_infos引用的对象不是一个字符串了,即传入模板的不是一个字符串,而是一个元组。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>登陆 Python</title>
</head>
<body>
<h2>你的登陆用户信息:</h2>
<ul>
{% for one in users %}
<li>登录名:{{one[1]}}</li>
<li>密 码:{{one[2]}}</li>
<li>邮 箱:{{one[3]}}</li>
{% end %}
</ul>
</body>
登陆后效果:
可以注意一下页面数据的遍历形式
{% for语句 %}
...
{% end %}
还有:
{{% if语句 %}}
...
{{% end %}}