bootstrap既然是这么的流行又能省很多的事为什么不用他呢？再加上牛X的produced by FB的tornado简直如虎添翼了！

1. 安装配置

安装所需要的库等内容。这里没什么需要多讲的。tornado直接用easy_install或者pip。bootstrap直接下下来就OK了。当然还需要下载bootstrap依赖的jquery。依次下载安装就可以。

2. 目录结构

把bootstrap目录下得内容分别都放在static目录下得css、fonts和js中。jquery对应的js也放在static目录下得js目录中。

templates目录放置html文件，可以看到高亮出来的一个index.html文件。

3. tornado代码

import logging

import tornado.auth

import tornado.escape

import tornado.ioloop

import tornado.web

import os.path

import uuid

from tornado.concurrent import Future

from tornado import gen

from tornado.options import define, options, parse_command_line

define("port", default=8888, help="run on the given port", type=int)

define("debug", default=False, help="run in debug mode")

class BaseHandler(tornado.web.RequestHandler):

    def get_current_user(self):

        user_json = self.get_secure_cookie("chatdemo_user")

        if not user_json: return None

        return tornado.escape.json_decode(user_json)

class MainHandler(BaseHandler):

    @tornado.web.authenticated

    def get(self):

        self.render("index.html", messages=global_message_buffer.cache)

def main():

    parse_command_line()

    app = tornado.web.Application(

        [

            (r"/", MainHandler),

            ],

        cookie_secret="__TODO:_GENERATE_YOUR_OWN_RANDOM_VALUE_HERE__",

        template_path=os.path.join(os.path.dirname(__file__), "templates"),

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

        xsrf_cookies=True,

        debug=options.debug,

        )

    app.listen(options.port)

    tornado.ioloop.IOLoop.instance().start()

if __name__ == "__main__":

    main()

define定义了站点的port。

class BaseHandler(tornado.web.RequestHandler)定义了一个基类，用于简单封装tornado的RequestHandler。以后的每个类都需要集成这个BaseHandler，比如后面的MainHandler。这样才能获得http请求。

最后在(r"/", MainHandler),绑定了请求的url和对应的handler。这时还不能运行，因为我们需要在MainHandler中解析模板html。

4. Html模板

这里的index.htm模板是直接从bootstrap上得例子中扒下来的。

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="{{static_url("css/bootstrap.min.css")}}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

      <nav class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="#">Project name</a>

          </div>

          <div id="navbar" class="collapse navbar-collapse">

            <ul class="nav navbar-nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#about">About</a></li>

              <li><a href="#contact">Contact</a></li>

            </ul>

          </div><!--/.nav-collapse -->

        </div>

      </nav>

      <div class="container">

        <div class="starter-template">

          <h1>Bootstrap starter template</h1>

          <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>

        </div>

      </div><!-- /.container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="{{static_url("js/jquery-1.11.2.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>

其中的css、js都放在我们上面的目录机构中的static目录下。所以在原来模板中的这些内容都需要做一些修改：<link href="{{static_url("css/bootstrap.min.css")}}" rel="stylesheet">和<script src="{{static_url("js/jquery-1.11.2.min.js")}}"></script>还有<script src="{{static_url("js/bootstrap.min.js")}}"></script>。都通过了static_url这个内置方法实现了路径的跳转。

如果你不想这么设置路径也可以，但是这些css和js之类的还是需要放在static目录下。放在别的地方的话，可能是获取不到静态的内容。

这个时候运行代码你就会看到这个网页了。

好吧，这个时候似乎还是有些问题的。但是大体的结构就是这样了！

tornado+bootstrap急速搭建你自己的网站的更多相关文章

  1. Tornado + Bootstrap 快速搭建自己的web应用

    前言 最近用 python tordado 框架, 整了一个模板页面, 用于接入与发布数据的展示, tornado 简单易用, bootstrap 比较流行, 用起来也省事, 配合起来做些小案例非常迅 ...

  2. 利用Bootstrap快速搭建个人响应式主页（附演示+源码）

    1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

  3. 阿里云+wordpress搭建个人博客网站【小白专用的图文教程】

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  4. 阿里云+wordpress搭建个人博客网站

    [正文] 在阿里云上搭建使用个人博客主要分为以下几个步骤: 1.购买阿里云ECS主机 2.购买域名 3.申请备案 4.环境配置 5.安装wordpress 6.域名解析 声明一下,本人对服务器端的知识 ...

  5. 如何搭建个人博客网站(Mac)

    一直以为自己记忆力很好,毕业之后才发现,之前需要看一遍就能记住的东西,现在看两三遍才能有印象.而搞技术的,如果不及时的记录下当时的情景,过后很容易就忘记.所以,再次萌生了搭博客.写文章的想法(之前用D ...

  6. 搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

    Web GIS系列: 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 使用GeoServer+QGIS发布WMTS服务 使用GeoSe ...

  7. Linux_基于Docker快速搭建个人博客网站

    时间:2017年04月28日星期五 说明:基于docker技术,使用jpress开源框架搭建个人博客网站.特别感谢jpress开源项目.系统版本:CentOS 7.2-64bit. 步骤一:准备Doc ...

  8. ubuntu 搭建简易的https网站

    ubuntu 搭建简易的https网站 环境:ubuntu 12.04.5 openssl (1)创建一个ssl的保存路径 sudo mkdir /opt/nginx/ssl (2)生存密钥sudo ...

  9. bootstrap环境搭建

    Bootstrap 是stwitter公司的两名前端设计师设计的基于html css javascript的超强的前端框架. Bootstrap 是一移动设备为优先,pc机,平板,手机皆适用的框架. ...

随机推荐

  1. SSM总结

    1    报错: cvc-complex-type.2.4.a: Invalid content was found starting with element 'async-supported'.  ...

  2. 趣味编程：CPS风格代码（C++11, C++14版）

    CPS风格代码(C++11版) #include <iostream> using namespace std; int add(int x, int y){return x + y;} ...

  3. spring 3.x + hibernate4.x 实现数据延迟加载

      Spring为我们解决Hibernate的Session的关闭与开启问题. Hibernate 允许对关联对象.属性进行延迟加载,但是必须保证延迟加载的操作限于同一个 Hibernate Sess ...

  4. 经典动态规划python实现

    1.最长上升子序列 对于一个数字序列,请设计一个复杂度为O(nlogn)的算法,返回该序列的最长上升子序列的长度,这里的子序列定义为这样一个序列U1,U2...,其中Ui < Ui+1,且A[U ...

  5. 视图的URL配置，找不到我设置的第一个Page

    问题:视图的URL配置,找不到我设置的第一个Page 我的代码如下: 结果访问/test/时说找不到这个page   原因:patterns方法的参数有两个,一个是prefix,一个是参数元祖,详见下 ...

  6. Python bytearray() 函数

    Python bytearray() 函数  Python 内置函数 描述 bytearray() 方法返回一个新字节数组.这个数组里的元素是可变的,并且每个元素的值范围: 0 <= x < ...

  7. Too Rich（贪心+DFS）

    Too Rich http://acm.hdu.edu.cn/showproblem.php?pid=5527 Time Limit: 6000/3000 MS (Java/Others)    Me ...

  8. 【校招面试 之 剑指offer】第9-1题 用两个栈实现一个队列

    #include<iostream> #include<stack> using namespace std; template <typename T> void ...

  9. [leetcode]112. Path Sum路径和(是否有路径)

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  10. tp中引入js、css、img的问题

    方法一: 直接把js.css.img放到网站公共目录/Public/下. 然后直接在模板文件中使用__PUBLIC__进行替换. 方法二: 在模块配置文件config.php中配置指定的路径,如下: ...