Tornado 网站demo 二

连接数据库

methods 中建立一个文件 db.py 分别建立起连接对象和游标对象

#!/usr/bin/env Python
# coding=utf-8
 
import pymysql
conn = pymysql.connect(host="localhost", user="root", passwd="", db="testdb", port=3306, charset="utf8")    #连接对象
 
cur = conn.cursor()    #游标对象

用户登录

进入到 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>
<script src="{{static_url('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{static_url('js/script.js')}}"></script>
</body>

其中<meta name="viewport" content="width=device-width, initial-scale=1" />，其目的在将网页的默认宽度(viewport)设置为设备的屏幕宽度(width=device-width)，并且原始缩放比例为 1.0(initial-scale=1)，即网页初始大小占屏幕面积的 100%。这样做的目的，是让在电脑、手机等不同大小的屏幕上，都能非常好地显示。

编写 js

statics/js/script.js

/**
 * Created by fulong on 2017/6/14.
 */
$(document).ready(function(){
    alert("good");
    $("#login").click(function(){
        var user = $("#username").val();
        var pwd = $("#password").val();
        alert("username: "+user);
    });
});

hanlers 里面的程序

创建 __init__.py 只要在该目录中加入了这个文件，该目录中的其它 .py 文件就可以作为模块被 Python 引入了。

运行结果

数据传输

前端传输数据

用 ajax() 方法实现数据传输，需要修改 script.js 文件内容：

statics/js/script.js

/**
 * Created by fulong on 2017/6/14.
 */
$(document).ready(function(){
    $("#login").click(function(){
        var user = $("#username").val();
        var pwd = $("#password").val();
        var pd = {"username":user, "password":pwd};
        $.ajax({
            type:"post",
            url:"/",
            data:pd,
            cache:false,
            success:function(data){
                alert(data);
            },
            error:function(){
                alert("error!");
            },
        });
    });
});

ajax() 参数说明

type：post 还是 get。
url：post 或者 get 的地址
data：传输的数据，包括三种：（1）html 拼接的字符串；（2）json 数据；（3）form 表单经 serialize() 序列化的。本例中传输的就是 json 数据，这也是经常用到的一种方式。
cache：默认为 true，如果不允许缓存，设置为 false.
success：请求成功时执行回调函数。本例中，将返回的 data 用 alert 方式弹出来。 alert() 这个东西，目的在于调试，走一步看一步，看看得到的数据是否如自己所要
error：如果请求失败所执行的函数。

后端接收数据

在 IndexHandler 类中增加 post()，增加之后的完善代码是：

index.py

#!/usr/bin/env Python
# coding=utf-8
 
import tornado.web
 
class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.html")
 
    def post(self):
        username = self.get_argument("username")
        password = self.get_argument("password")
        self.write(username)

特别注意，在 get 的时候，通过 get_argument() 函数获得 url 的参数，如果是多个参数，就获取最后一个的值。要想获取多个值，可以使用 get_arguments(name, strip=true)。

运行之后即可看到结果

验证用户名和密码

在 methods 目录中创建一个readdb.py的文件，专门用来存储读数据用的函数

#!/usr/bin/env Python
# coding=utf-8
 
from methods.db import *
 
def select_table(table, column, condition, value ):
    sql = "select " + column + " from " + table + " where " + condition + "='" + value + "'"
    cur.execute(sql)
    lines = cur.fetchall()
    return lines

改写index.py

#!/usr/bin/env Python
# coding=utf-8
 
import tornado.web
import methods.readdb as mrd
 
class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.html")
 
    def post(self):
        username = self.get_argument("username")
        password = self.get_argument("password")
        user_infos = mrd.select_table(table="users",column="*",condition="username",value=username)
        if user_infos:
            db_pwd = user_infos[0][2]
            if db_pwd == password:
                self.write("welcome you: " + username)
            else:
                self.write("your password was not right.")
        else:
            self.write("There is no thi user.")

运行即可看到结果