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. Jquery detect page refresh

    first thing there are 3 functions we will use: function setCookie(c_name, value, exdays) {           ...

  2. Mysql count+if 函数结合使用

    Mysql count+if 函数结合使用 果林椰子 关注 2017.05.18 13:48* 字数 508 阅读 148评论 0喜欢 1 涉及函数 count函数 mysql中count函数用于统计 ...

  3. 判断是否有TrueType字体

    function IsTrueTypeAvailable : bool;var {$IFDEF WIN32}  rs : TRasterizerStatus; {$ELSE}  rs : TRaste ...

  4. java 可伸缩阻塞队列实现

    最近一年多写的最虐心的代码.必须好好复习java并发了.搞了一晚上终于测试都跑通过了,特此纪念,以资鼓励! import java.util.ArrayList; import java.util.L ...

  5. StringBuild的一个小问题

    今天在项目开发的过程中写了一小段代码: sb_result.AppendFormat("{\"SmsmTaskModeName\":\"{0}\",\ ...

  6. 吴裕雄 实战python编程（1）

    import sqlite3 conn = sqlite3.connect('E:\\test.sqlite') # 建立数据库联接cursor = conn.cursor() # 建立 cursor ...

  7. k-means处理图片

    问题描述:把给定图片,用图片中最主要的三种颜色来表示该图片 k-means思想: 1.选择k个点作为初始中心 2.将每个点指派到最近的中心,形成k个簇cluster 3.重新计算每个簇的中心 4.如果 ...

  8. 奶牛易物小组 Alpha冲刺

    项目地址:https://gitee.com/rrycbar/NenuChange 1 第一天 日期:2018/6/14 1.1 今日完成任务情况以及遇到的问题. 吴建瑜: 完成任务: 1.继续完善购 ...

  9. dom node 查找父级parentNode

    var o = document.querySelectorAll("a[href='baidu.com']"); var p = o[o.length-1];console.lo ...

  10. 如何设置maven的local repository目录

    step1:默认会放在~/.m2/repository目录下 (“~”代表用户的目录,比如windows下一般都是C:\Documents and Settings\[你的用户名]\.由于“Docum ...