tornado+bootstrap急速搭建你自己的网站

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目录下。放在别的地方的话,可能是获取不到静态的内容。

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

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

时间: 2024-10-03 23:29:08

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

《learning laravel》翻译第三章-----搭建我们第一个网站

重要: 这是一个稳定的版本. 让我们知道你的喜好. 我们将会修改bug和错误,并且定期更新所有章节. 第二章: 搭建我们第一个网站 既然我们知道如何安装Laravel了, 那现在就开始通过我们自己的方式来搭建我们第一个基于Laravel的网站吧. 在本章中,通过搭建Laravel应用程序你将会很方便得学习Laravel的结构,路由,控制器,模板,Artisan命令,Elixir API和很多基础特性. 剖析Laravel结构 假设你将Laravel安装在 ~/Code/Laravel目录.跳转到

小白如何快速上手搭建属于自己的网站

小白入门建站其实可以完全不需要代码方面的知识也可以建站.想要在学习初期就拥有一个属于自己的网站,步骤很简单: 一.域名选择:选购一个自己喜欢的域名,建议可以到阿里云或者腾讯云购买(域名购买建议:简单易懂,有特殊意义,.com优先) 二.服务器选择:如果不考虑往编程方面学习,可以选择虚拟主机,如果想往编程方面发展的小同学建议可以选择云服务器,选择linux-centos系统然后自己也可以学学linux系统的部署和环境的使用. 三. 网站备案,对已解析成功的域名进行备案,备案需要生份证扫描件,备案专

学生成绩管理后台第二项任务:初步建模,搭建一个简单的网站

负责人:程琳茹 合伙人:李玉婷 签约员工:闫玉荣 前言:学生成绩管理后台,看起来是一个简单的项目,但是对于我们今后的发展很重要,建设一个管理后台有很多方法,这里我们主要使用Rstudio,在之后的文章中,会详细给出我们小组完成项目的过程与遇到的问题,欢迎大家借鉴,此外,同学们要积极参与讨论. 项目步骤:1.熟悉与安装Rstudio,并且配置好R内部环境. 2.建立好文件所存放的位置与确保文档可以正常使用. 3.搭建一个简单的网站,分别分为server.R端口与ui.R端口. 4.搭建好网站后,插

快速搭建属于自己的网站

使用的本地php环境,XAMPP这个是地址. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #839496; background-color: rgba(1, 43, 54, 0.96) } span.s1 { } /Applications/XAMPP/xamppfiles/htdocs/upload/data 1.一个完全的新人如何搭建自己的个人网站 1.博客程序. wordpress,目前全球也是中国

自己搭建 Google 反向代理网站

自己搭建 Google 反向代理网站 1 mantouge · 133 天前 · 2649 次点击 这是一个创建于 133 天前的主题,其中的信息可能已经有所发展或是发生改变. 上次发布了一篇 建了一个 Google 反代,会有什么后果? http://v2ex.com/t/201854然后发现很多童鞋对怎么搭建反向代理服务器很感兴趣,这里就贴出来了,3KU 们! 假设你有一台可以访问Google服务的的服务器(VPS) 假设你有一个域名,并已经解析到服务器IP 假设你有SSL域名证书 假设你使

搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 1         服务器搭建 使用Tomcat需要先安装Java.从Oracle官方网站下载Java最新版本: http://www.oracle.com/technetwork/java/javase/downloads/index.html 安装完成Java后,需要配置环境变量.具体方法请自行百度.安装成功后可以下载服务器了. 从Tomcat官方网站下载最新的版本,在Windo

在Azure上搭建Orchard CRM入口网站

这是英文版:Setup Orchard CRM portal website on Azure 在Azure上搭建Orchard CRM入口网站

九、搭建织梦cms网站

九.搭建织梦cms网站 1.介绍: 织梦内容管理系统(DedeCms) 以简单.实用.开源而闻名,是国内最知名的PHP开源网站管理系统,也是使用用户最多的PHP类CMS系统,在经历多年的发展,目前的版本无论在功能,还是在易用性方面,都有了长足的发展和进步,DedeCms免费版的主要目标用户锁定在个人站长,功能更专注于个人网站或中小型门户的构建,当然也不乏有企业用户和学校等在使用本系统. 优点: 1.易用:使用织梦你可以用十分钟学习它,十分钟搭建一个. 2.完善:织梦基本包含了一个常规网站需要的一

ubuntu 搭建简易的https网站

ubuntu 搭建简易的https网站 环境:ubuntu 12.04.5 openssl (1)创建一个ssl的保存路径 sudo mkdir /opt/nginx/ssl (2)生存密钥sudo openssl genrsa -out key.pem 2048 (3)sudo openssl req -new -x509 -nodes -out server.crt -keyout server.key (4)配置nginx server { listen 443; index index.