1. 基本结构,采用 MVC 模式。
控制器(controller)负责转发请求,对请求进行处理
视图 (View): 界面设计人员进行图形界面设计。
模型 (Model): 程序员编写程序应有的功能(实现算法等)、数据库管理
2。一个基本架势
做一个基本的框架,建立好各级目录 /. handlers methods statics templates application.py server.py url.py
handler: 我准备在这个文件夹中放后端 python 程序,主要处理来自前端的请求,并且操作数据库。
method: 这里准备放一些函数或者类,比如用的最多的读写数据库的函数,这些函数被 handlers 里面的程序使用。
staics: 这里准备放一些静态文件,比如图片、css\JavaScript文件等
template: 这里放模板文件,都以html为扩展名
2.1 url.py 主要设置网站的目录结构
#!/usr/bin/env python
# coding=utf-8
"""
the url structure of website
"""
import
sys
reload
(sys)
sys.setdefaultencoding(
"utf-8"
)
from
handlers.index
import
IndexHandler
url
=
[
(
r'/'
,IndexHandler),
]
2.2 application.py 该文件完成了对网站系统的基本配置,建立网站请求处理集合
#
!/
usr
/
bin
/
env python
#coding
:
utf
-
8
from url
import
url
import
tornado.web
import
os
settings
=
dict(
template_path
=
os
.
path
.
join(os
.
path
.
dirname(__file__),
"templates"
),
static_path
=
os
.
path
.
join(os
.
path
.
dirname(__file__),
"statics"
)
)
application
=
tornado
.
web
.
Application
(
handlers
=
url,
**settings
)
2.3 server.py 作用是将tornado服务器运行起来,并且囊括前面两个文件的对象属性设置。
#!/usr/bin/env/python
#coding:utf-8
import
tornado.ioloop
import
tornado.options
import
tornado.httpserver
from
application
import
application
from
tornado.options
import
define,options
define(
"port"
,
default
=
8088
,
help
=
"run on the given port"
,
type
=
int
)
def
main
():
tornado.options.parse_command_line()
http_server
=
tornado.httpserver.HTTPServer(application)
http_server.listen(options.port)
print
"Development server is running at http://127.0.0.1:
%s
"
%
options.port
print
"Quit the server with Control-C"
tornado.ioloop.IOLoop.instance().start()
if
__name__
==
"__main__"
:
main()
2.4 登录界面 index.html
<!
D
O
C
T
Y
P
E
h
t
m
l
>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1"
>
<
title
>
Learming 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
=
"text"
id
=
"password"
/>
</
p
>
<
p
>
<
input
type
=
"BUTTON"
value
=
"LOGIN"
id
=
"login"
/>
</
p
>
</
form
>
</
body
>
</
html
>
JavaScript 一种直译式脚本语言,JQuery 是一套跨浏览器的JavaScript库,可以简化 HTML 和JavaScript之间的操作。
在index.html中引入jQuery 的方法有多种
a: <script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
但是特别慢
b: 把jQuery下载下来,放在指定的地方到官网(https://jqueryui.com/)下载最新的库,然后放在statics目录下,建议下载以min.js结尾的文件爱呢,因为这个是压缩过得,然后为了简短更名为jquery.min.js。引入:<script src="statics/js/jquery.min.js"></script>或者
<script src="{{static_url("js/jquery.min.js")}}"></script>
再引入自己写的js,<script src="{{static_url("js/script.js")}}"></script>
$(document).ready(function(){
alert(
"good"
)
$(
"#login"
).
click
(function(){
var
user
=
$(
"#username"
).val();
var
pwd
=
$(
"#password"
).val();
alert(
"username:"
+
user);
});
});
url.py 做过这样的设置:
from handlers.index import IndexHandler
url = [
(r'/',IndexHandler),
]
吸纳在把假设有了的那个文件index.py 建立起来,即在handler 里面建立index.py 文件,内容如下
#!/usr/bin/env python
#coding:utf-8
import
tornado.web
class
IndexHandler
(
tornado.web.RequestHandler
):
def
get
(
self
):
self
.render(
"index.html"
)
将上面的文件保存之后,回到handler目录中,因为这里面的文件要在别处被当作模块引用,所以需要在这里建立一个空文件,命名为:__init__.py
至此,一个简单的网站建立起来了,运行server.py 即可 >>>python server.py
3. 数据传输
Ajax()实现前后太数据传输,修改 script.js 如下
$(document).ready(function(){
alert(
"good"
)
$(
"#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!"
);
},
});
});
});
pd 那行,得到一个json对象中,接下来就是利用Ajax()方法将这个json对象传给后端。
参数说明如下:
- type 是 post 还是 get
- url : post /get 的地址
- data: 传输的数据,包括三种,(1)html拼接的字符串(2)json数据(3)form表单经serialize()序列化的。不是一般都是字典集吗,我自己想的
- cache: 默认为True 如果不希望有缓存,设置为False.
- success 请求成功的回调函数。
- error 请求失败所执行的函数
3. 数据处理
前端通过Ajax 将数据以json的格式传给了后台,并且指明了路径“/”,这个路径在url.py 中做了配置,由handlers 目录中 index.py 文件的IndexHandler类来处理。因为用的是post方法传输,所以在类中需要有 post 方法来接受处理数据。完善代码为:
#!/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)
在post 方法中,使用 get_argument()方法来接收前端传递过来的数据,参数表示键值对的键,获取对应的值。
write() 方法,是后端向前端返回数据,可以是字符串,json字符串