配置框架
在main.py当前目录下创建views目录,并在views模板目录中,先写好五个HTML模板页:基础模板(base.tpl),菜单模板(menu.tpl),顶部模板(top.tpl),错误页面(404.tpl),首页模板(index.tpl)
如果对模板不熟悉的,请查以下模板教程
base.tpl模板代码:
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <title>{{get('title','任务管理系统')}}</title> <!--获取子模板传递进来的值-->
- <meta name="description" content="任务管理系统" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
- <!--Basic Styles-->
- <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
- <link href="assets/css/bootstrap-table.css" rel="stylesheet" />
- <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
- <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
- <link href="assets/css/weather-icons.min.css" rel="stylesheet" />
- <!--Fonts
- <link href="http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300" rel="stylesheet" type="text/css">
- <link href='http://fonts.useso.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
- -->
- <!--Beyond styles-->
- <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
- <link href="assets/css/demo.min.css" rel="stylesheet" />
- <link href="assets/css/typicons.min.css" rel="stylesheet" />
- <link href="assets/css/animate.min.css" rel="stylesheet" />
- <link id="skin-link" href="" rel="stylesheet" type="text/css" />
- <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
- <script src="assets/js/skins.min.js"></script>
- <script src="assets/js/jquery-2.0.3.min.js"></script>
- <script src="assets/js/bootstrap.min.js"></script>
- <script src="assets/js/bootstrap-table.js"></script>
- <script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>
- <script src="assets/js/bootstrap-table-zh-CN.js"></script>
- <style type="text/css">
- input[type=checkbox]{
- opacity : 1;
- position: static;
- }
- </style>
- </head>
- <body>
- <!-- Navbar -->
- <div class="navbar">
- % include('top.tpl') <!--加载top(网站顶部页)模板-->
- </div>
- <!-- /Navbar -->
- <!-- Main Container -->
- <div class="main-container container-fluid">
- <div class="page-container">
- % include('menu.tpl') <!--menu(菜单)模板-->
- <div class="page-content">
- <!-- Page Breadcrumb -->
- <div class="page-breadcrumbs">
- <ul class="breadcrumb">
- <li>
- <i class="fa fa-home"></i>
- <a href="#">首页</a>
- </li>
- <li class="active">大厅</li>
- </ul>
- </div>
- <!-- /Page Breadcrumb -->
- <!-- Page Header -->
- <div class="page-header position-relative">
- <div class="header-title">
- <h1>
- {{get('position',' ')}} <!--获取子模板传递进来的值-->
- </h1>
- </div>
- <!--Header Buttons-->
- <div class="header-buttons">
- <a class="sidebar-toggler" href="#">
- <i class="fa fa-arrows-h" title="宽屏"></i>
- </a>
- <a class="refresh" id="refresh-toggler" href="">
- <i class="glyphicon glyphicon-refresh" title="刷新"></i>
- </a>
- <a class="fullscreen" id="fullscreen-toggler" href="#">
- <i class="glyphicon glyphicon-fullscreen" title="全屏"></i>
- </a>
- </div>
- <!--Header Buttons End-->
- </div>
- <!-- /Page Header -->
- <!-- Page Body -->
- %include <!--留下被子模板渲染的位置-->
- <!-- /Page Body -->
- </div>
- <!-- /Page Content -->
- </div>
- <!-- /Page Container -->
- <!-- Main Container -->
- </div>
- <script src="assets/js/beyond.min.js"></script>
- <!--Beyond Scripts-->
- </body>
- </html>
在base.tpl模板中,要注意的是
<title>{{get('title','任务管理系统')}}</title> <!--获取子模板传递进来的值-->
% include('menu.tpl') <!--menu(菜单)模板-->
{{get('position',' ')}} <!--获取子模板传递进来的值-->
% include('top.tpl') <!--加载top(网站顶部页)模板-->
%include <!--留下被子模板渲染的位置-->
这个基础HTML模板主要作用是加载样式,字体等文件,继承这个模板的子模板,就不需要再加载这些样式了。
top.tpl代码:
- <div class="navbar-inner">
- <div class="navbar-container">
- <!-- Navbar Barnd -->
- <div class="navbar-header pull-left">
- <a href="#" class="navbar-brand">
- <h2 style="margin-top:5px;">任务管理系统</h2>
- </a>
- </div>
- <!-- /Navbar Barnd -->
- <!-- Sidebar Collapse -->
- <div class="sidebar-collapse" id="sidebar-collapse">
- <i class="collapse-icon fa fa-bars"></i>
- </div>
- <!-- /Sidebar Collapse -->
- <!-- Account Area and Settings --->
- <div class="navbar-header pull-right">
- <div class="navbar-account">
- <ul class="account-area">
- <li>
- <a class=" dropdown-toggle" data-toggle="dropdown" title="帮助" href="#">
- <i class="icon fa fa-warning"></i>
- </a>
- </li>
- <li>
- <a class="wave in dropdown-toggle" data-toggle="dropdown" title="信息" href="#">
- <i class="icon fa fa-envelope"></i>
- <span class="badge">0</span>
- </a>
- </li>
- <li>
- <a class="dropdown-toggle" data-toggle="dropdown" title="任务" href="#">
- <i class="icon fa fa-tasks"></i>
- <span class="badge">0</span>
- </a>
- <!--Tasks Dropdown-->
- <!--/Tasks Dropdown-->
- </li>
- <li>
- <a class="login-area dropdown-toggle" data-toggle="dropdown">
- <div class="avatar" title="查看个人信息配置">
- <img src="assets/img/avatars/adam-jansen.jpg">
- </div>
- <section>
- <h2><span class="profile"><span>个人信息</span></span></h2>
- </section>
- </a>
- <!--Login Area Dropdown-->
- <ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
- <li class="email"><a>帐号:drfdai</a></li>
- <!--Avatar Area-->
- <li>
- <div class="avatar-area">
- <img src="assets/img/avatars/adam-jansen.jpg" class="avatar">
- <span class="caption">修改头像</span>
- </div>
- </li>
- <!--Theme Selector Area-->
- <li class="theme-area">
- <ul class="colorpicker" id="skin-changer">
- <li><a class="colorpick-btn" href="#" style="background-color:#5DB2FF;" rel="assets/css/skins/blue.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#2dc3e8;" rel="assets/css/skins/azure.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#03B3B2;" rel="assets/css/skins/teal.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#53a93f;" rel="assets/css/skins/green.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#FF8F32;" rel="assets/css/skins/orange.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#cc324b;" rel="assets/css/skins/pink.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#AC193D;" rel="assets/css/skins/darkred.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#8C0095;" rel="assets/css/skins/purple.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#0072C6;" rel="assets/css/skins/darkblue.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#585858;" rel="assets/css/skins/gray.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#474544;" rel="assets/css/skins/black.min.css"></a></li>
- <li><a class="colorpick-btn" href="#" style="background-color:#001940;" rel="assets/css/skins/deepblue.min.css"></a></li>
- </ul>
- </li>
- <!--/Theme Selector Area-->
- <li class="dropdown-footer">
- <a href="/logout">
- 退出登陆
- </a>
- </li>
- </ul>
- <!--/Login Area Dropdown-->
- </li>
- <!-- /Account Area -->
- <!--Note: notice that setting div must start right after account area list.
- no space must be between these elements-->
- <!-- Settings -->
- </ul>
- <div class="setting">
- <a id="" title="设置" href="#">
- <i class="icon glyphicon glyphicon-cog"></i>
- </a>
- </div>
- <!-- Settings -->
- </div>
- </div>
- <!-- /Account Area and Settings -->
- </div>
- </div>
menu.tpl代码
- <!-- Page Sidebar -->
- <div class="page-sidebar" id="sidebar">
- <!-- Page Sidebar Header-->
- <div class="sidebar-header-wrapper">
- <input type="text" class="searchinput" />
- <i class="searchicon fa fa-search"></i>
- <div class="searchhelper">搜索</div>
- </div>
- <!-- /Page Sidebar Header -->
- <!-- Sidebar Menu -->
- <ul class="nav sidebar-menu">
- <!--Dashboard-->
- <li>
- <a href="/">
- <i class="menu-icon glyphicon glyphicon-home"></i>
- <span class="menu-text"> 首页 </span>
- </a>
- </li>
- <li class="active open">
- <a href="#" class="menu-dropdown">
- <i class="menu-icon fa fa-gavel"></i>
- <span class="menu-text"> 用户管理 </span>
- <i class="menu-expand"></i>
- </a>
- <ul class="submenu">
- <li class="">
- <a href="/user">
- <span class="menu-text">用户管理</span>
- </a>
- </li>
- <li class="">
- <a href="/user">
- <span class="menu-text">用户权限</span>
- </a>
- </li>
- </ul>
- </li>
- <li class="active open">
- <a href="#" class="menu-dropdown">
- <i class="menu-icon fa fa-bar-chart-o"></i>
- <span class="menu-text"> 任务管理 </span>
- <i class="menu-expand"></i>
- </a>
- <ul class="submenu">
- <li class="">
- <a href="/taskinfo">
- <span class="menu-text">任务大厅</span>
- </a>
- </li>
- <li class="">
- <a href="/addtask">
- <span class="menu-text">发布任务</span>
- </a>
- </li>
- <li class="">
- <a href="/gettask">
- <span class="menu-text">我接收的任务</span>
- </a>
- </li>
- <li>
- <a href="/sendtask">
- <span class="menu-text">我发起的任务</span>
- </a>
- </li>
- </ul>
- </li>
- <li class="active open">
- <a href="#" class="menu-dropdown">
- <i class="menu-icon fa fa-gavel"></i>
- <span class="menu-text"> 项目管理 </span>
- <i class="menu-expand"></i>
- </a>
- <ul class="submenu">
- <li class="">
- <a href="/user">
- <span class="menu-text">项目列表</span>
- </a>
- </li>
- <li class="">
- <a href="/addtask">
- <span class="menu-text">发布项目</span>
- </a>
- </li>
- <li class="">
- <a href="/gettask">
- <span class="menu-text">发起任务</span>
- </a>
- </li>
- </ul>
- </li>
- </ul>
- <!-- /Sidebar Menu -->
- </div>
- <!-- /Page Sidebar -->
- <!-- Page Content -->
下篇继续......
相关代码已上传到SVN
SVN请跳转至:python bottle框架(WEB开发、运维开发)教程目录
.
来自外部的引用: 2