Home > Developer > Web Develop
Bootstrap since it's so popular and can save a lot of things why not use him? Plus the ox x produced by FB tornado!
1. Installation Configuration
Install the required libraries and more. There's nothing more to say here. Tornado directly with Easy_install or PIP. Bootstrap directly down on the OK. Of course, you also need to download bootstrap-dependent jquery. Download the installation in turn.
2. Directory structure
The contents of the bootstrap directory are placed in the static directory under the CSS, fonts and JS. jquery corresponding JS is also placed in the static directory in the JS directory.
The templates directory places an HTML file, and you can see a index.html file highlighted.
3. Tornado code
ImportLoggingImportTornado.authImportTornado.escapeImportTornado.ioloopImportTornado.webImportOs.pathImportUUID fromTornado.concurrentImport Future fromTornadoImportGen fromTornado.optionsImportdefine, Options, Parse_command_linedefine ("Port", default=8888, help="run on the given port", type=int) define ("Debug", Default=false, help="run in debug mode")classBasehandler (tornado.web.RequestHandler):defGet_current_user (self): User_json= Self.get_secure_cookie ("Chatdemo_user") if notUser_json:returnNonereturnTornado.escape.json_decode (User_json)classMainHandler (Basehandler): @tornado. web.authenticateddefGet (self): Self.render ("index.html", messages=Global_message_buffer.cache)defMain (): 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 defines the port of the site.
class Basehandler (Tornado.web.RequestHandler) defines a base class for simple encapsulation of tornado RequestHandler. Each subsequent class will need to integrate this basehandler, such as the back MainHandler. This allows the HTTP request to be obtained.
Finally in (r "/", MainHandler), bind the requested URL and the corresponding handler. This cannot be run at this time because we need to parse the template HTML in MainHandler.
4. HTML templates
The index.htm template here is stripped down directly from the bootstrap example.
<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!--Bootstrap - <Linkhref= "{{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> <navclass= "NavBar navbar-inverse navbar-fixed-top"> <Divclass= "Container"> <Divclass= "Navbar-header"> <Buttontype= "button"class= "Navbar-toggle collapsed"Data-toggle= "Collapse"Data-target= "#navbar"aria-expanded= "false"Aria-controls= "NavBar"> <spanclass= "Sr-only">Toggle Navigation</span> <spanclass= "Icon-bar"></span> <spanclass= "Icon-bar"></span> <spanclass= "Icon-bar"></span> </Button> <aclass= "Navbar-brand"href="#">Project Name</a> </Div> <DivID= "NavBar"class= "Collapse Navbar-collapse"> <ulclass= "Nav navbar-nav"> <Liclass= "Active"><ahref="#">Home</a></Li> <Li><ahref= "#about">About</a></Li> <Li><ahref= "#contact">Contact</a></Li> </ul> </Div><!--/.nav-collapse - </Div> </nav> <Divclass= "Container"> <Divclass= "Starter-template"> <H1>Bootstrap Starter Template</H1> <Pclass= "Lead">Use the This document as a by-quickly start any new project.<BR>All you get are this text and a mostly barebones HTML document.</P> </Div> </Div><!--/.container - <!--jQuery (necessary for Bootstrap ' s JavaScript plugins) - <Scriptsrc= "{{Static_url ("js/jquery-1.11.2.min.js ")}}"></Script> <!--include all compiled plugins (below), or include individual files as needed - <Scriptsrc= "{{Static_url ("js/bootstrap.min.js ")}}"></Script> </Body></HTML>
The CSS and JS are placed in the static directory of the directory organization above us. So in the original template of these things need to make some changes:<link href= "{{Static_url (" Css/bootstrap.min.css ")}" rel= "stylesheet" > and <script src= "{{Static_url (" Js/jquery-1.11.2.min.js ")}" ></script> <script src= "{{static _url ("Js/bootstrap.min.js")}} "></script>. Have passed the Static_url this built-in method to achieve the path of the jump.
If you do not want to set the path is also possible, but these CSS and JS and so on still need to be placed in the static directory. If you put it somewhere else, you might not get the static content.
Run the code at this point and you'll see the page.
Well, there seems to be some problems at this time. But the general structure is like this!
Tornado+bootstrap rapidly build your own website
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
