tornado+bootsharp入门

 

      最近要搞点web开发了,前端嘛,你懂的,bootsharp这么火,果断就用它了。

1.安装配置:

 

     这一块没啥说的,tornado 、bootsharp、jquery的安装都很简单,自行看官方文档吧。

 

2.目录结构:

 

     我的目录树为下:

 

[root@localhost tornao-bootsharp]# tree  
.
|-- static
|   |-- css
|   |   |-- bootstrap-theme.css
|   |   |-- bootstrap-theme.min.css
|   |   |-- bootstrap.css
|   |   `-- bootstrap.min.css
|   |-- fonts
|   |   |-- glyphicons-halflings-regular.eot
|   |   |-- glyphicons-halflings-regular.svg
|   |   |-- glyphicons-halflings-regular.ttf
|   |   `-- glyphicons-halflings-regular.woff
|   `-- js
|       |-- bootstrap.js
|       |-- bootstrap.min.js
|       `-- jquery.min.js
`-- templates

5 directories, 11 files

 

   static目录存放了我们下载的bootsharp的所有文件,jquery.min.js 是我们下载的jquery文件,我手动移动重命名到该目录下的。

  

   templates下用来存放我们所有的html文件,目前还木有。

 

3.后端tornado代码:

 

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 LoginHandler(tornado.web.RequestHandler):
    def get(self):
        self.render('login.html')

if __name__ == "__main__":
    tornado.options.parse_command_line()
    app = tornado.web.Application([(r"/login",LoginHandler)],
                                  template_path = os.path.join(os.path.dirname(__file__),"templates"),
                                  static_path =os.path.join(os.path.dirname(__file__), "static"),
                                  debug = True                                                                                                                                               
          )   
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(options.port)
    tornado.ioloop.IOLoop.instance().start()

 

    

 

    define定义了两个参数,port、help,port用来接收自定义的端口,help则用来打印出使用帮助:

 

                        image

 

      class LoginHandler 这部分是定义了一个类,其中get函数用来处理get的请求,当然你可以再写个post去处理post请求。我们这里的get函数就是直接使用render返回了一个模板(login.html)。

     app = tornado.web.Application创建了一个Application实力,主要内容就是绑定了LoginHandler用来处理/login请求,template_path、static_patch则是定义了对应的template、static文件夹的路径。

    

     其实tornado和django比起来还是很像的,不过确实要简单很多。django中有专门的urls.py去控制视图的展示,就是我们这里的[(r"/login",LoginHandler)]的绑定,而static_path这些则有专门的setting.py中去定义。tornado则足够简单,在我们项目规模很小的情况下,比django要简洁、容易上手。

     这就是我们全部的后端代码了,直接运行就Ok了:python hello-bootstrap.py。

 

4.前端代码模板:

     这里要声明的是,所有的前端代码都是我抄的bootsharp官网的。不过,我们来看下应该怎么去抄。

 

     首先看官方的基本模板:

 

                           image

 

     ok,我们就按照这个来写我们的login.html:

 

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{{ static_url("css/bootstrap.min.css") }}">
                                                                                                                                                                                             
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
    <body>
        <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="{{ static_url("js/jquery.min.js") }}"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{{ static_url("js/bootstrap.min.js") }}"></script>

    </body>
</html>

 

      这里唯一需要改的是官网的模板是采用了cdn加速的方式,而我们采用tornado放到了本地,所以我们将路径都改掉,改成实际的href="{{ static_url("css/bootstrap.min.css") }}">这种路径,static_url则是前面定义的:

static_path =os.path.join(os.path.dirname(__file__), "static"),

     即当前项目下的static目录,结合我们前面的目录树可以知道我们已经将所有的bootsharp的js、css文件都放到了这个目录下。所以我们上面的href的路径才会那么去写,根据自己实际的路径去改下吧。注意路径是个大问题,弄不对的话效果不会出来的。

   看下效果:

 

                                image

            

       看下对应的请求:

 

[I 140430 13:35:23 web:1635] 304 GET /login (192.168.153.1) 7.84ms
[I 140430 13:35:23 web:1635] 304 GET /static/css/bootstrap.min.css?v=35fc838ce584c1eb81b3bebe245442d6 (192.168.153.1) 5.02ms
[I 140430 13:35:23 web:1635] 304 GET /static/js/jquery.min.js?v=3b80424646a7ecdb19273d86800c1ac0 (192.168.153.1) 1.18ms
[I 140430 13:35:23 web:1635] 304 GET /static/js/bootstrap.min.js?v=353240ad37d1b084a53b1575f8ce57da (192.168.153.1) 0.76ms

 

       没有404,说明我们的路径都是ok的。

 

5.login.html:

 

            bootsharp官方提供了一些demo,我们找一个简单的去抄下:

 

                  image

      

       感觉这个登陆界面就不错,给它扒了。看下它的页面源代码,发现没啥东西,主要就是一个div,我们拿了放到我们的login.html上去:

 

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{{ static_url("css/bootstrap.min.css") }}">
                                                                                                                                                                                             

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
    <body>

      <div class="container">
        <form class="form-signin" role="form">
          <h2 class="form-signin-heading">Please sign in</h2>
          <input type="text" class="form-control" placeholder="Email address" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <label class="checkbox">
          <input type="checkbox" value="remember-me"> Remember me
          </label>
          <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
      </div> <!-- /container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="{{ static_url("js/jquery.min.js") }}"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{{ static_url("js/bootstrap.min.js") }}"></script>

    </body>
</html>

再次刷新看下效果:

 

                                         image 

      

     好扁长,好丑有木有?说的bootsharp高大上呢。研究了下,发现官方的那个demo有一个自定义的signin.css文件:

 

<!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

 


     继续,我们把css文件也给它弄下来,扔到我们的static/css目录下去,同时在我们的login.htm中加入这个css文件,再次刷新:

       

                               image

 

          终于高大上了。如果还是不行,那就看下对应的请求,看下是不是有404的问题。最后看下我们现在的目录树:

  

[root@localhost tornao-bootsharp]# tree 
.
|-- hello-bootstrap.py
|-- static
|   |-- css
|   |   |-- bootstrap-theme.css
|   |   |-- bootstrap-theme.min.css
|   |   |-- bootstrap.css
|   |   |-- bootstrap.min.css
|   |   `-- signin.css
|   |-- fonts
|   |   |-- glyphicons-halflings-regular.eot
|   |   |-- glyphicons-halflings-regular.svg
|   |   |-- glyphicons-halflings-regular.ttf
|   |   `-- glyphicons-halflings-regular.woff
|   `-- js
|       |-- bootstrap.js
|       |-- bootstrap.min.js
|       `-- jquery.min.js
`-- templates
    `-- login.html

5 directories, 14 files

 

         到这里,我们就完整的实现了官方的那个demo页面,其他的demo同理照抄就可以了。

6.总结:

 

     tornado结合bootsharp可以快速的做出一些很漂亮的web,当然我们仅仅是一个入门,其实和hello world的演示差不多,很多的问题例如数据库、cookie、安全验证这块我们都没有提,tornaod结合mongo这些其实也容易的,上手也非常快。后续有时间再慢慢搞吧。

         

          

Leave a Reply

Your email address will not be published. Required fields are marked *


To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax