Python Django 使用前端框架Adminlte
阿新 • • 發佈：2019-02-14
一、下載adminlte
在github下載admintle版本
https://github.com/almasaeed2010/AdminLTE/releases二、放置adminte css等檔案
先配置settings檔案
STATIC_URL = '/static/'
HERE = os.path.dirname(os.path.abspath(__file__))
HERE = os.path.join(HERE, '../')
STATICFILES_DIRS = (
os.path.join(HERE, 'static/'),
)在把目錄bower_components、dist、plugins放置到專案static檔案
三、建立靜態檔案
1.在teamplete資料夾建立base.html
根據專案的具體情況修改檔案引用、頁面框架、title、CSS、主體和script塊。
{% load staticfiles %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>{% block title %}Databases{% endblock %}</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" href="{% static 'bower_components/bootstrap/dist/css/bootstrap.min.css' %}"> <!-- Font Awesome --> <link rel="stylesheet" href="{% static 'bower_components/font-awesome/css/font-awesome.min.css' %}"> <!-- Ionicons --> <link rel="stylesheet" href="{% static 'bower_components/Ionicons/css/ionicons.min.css' %}"> <!-- DataTables --> <link rel="stylesheet" href="{% static 'bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css' %}"> <!-- Theme style --> <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}"> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}"> <!-- HTML5 Shim and Respond.js 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.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> {% block css %}{% endblock %} </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header"> <!-- Logo --> <a href="index2.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>DB</b>A</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>Databases</b>Admin</span> </a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu" data-widget="tree"> <li class="header">MAIN NAVIGATION</li> <li class="treeview"> <a href="#"> <i class="fa fa-pie-chart"></i> <span>Databases</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="index"><i class="fa fa-circle-o"></i>test</a></li> <li><a href="test1"><i class="fa fa-circle-o"></i> test1</a></li> <li><a href="test2"><i class="fa fa-circle-o"></i> test2</a></li> <li><a href="test3"><i class="fa fa-circle-o"></i> test3</a></li> <li><a href="test4"><i class="fa fa-circle-o"></i> test4</a></li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-laptop"></i> <span>Management</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="user"><i class="fa fa-circle-o"></i> User</a></li> <li><a href="log."><i class="fa fa-circle-o"></i> Log</a></li> </ul> </li> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> {% block content %}{% endblock %} </div> <!-- /.content-wrapper --> </div> <!-- ./wrapper --> <!-- jQuery 3 --> <script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script> <!-- Bootstrap 3.3.7 --> <script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script> <!-- DataTables --> <script src="{% static 'bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script> <script src="{% static 'bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script> <!-- SlimScroll --> <script src="{% static 'bower_components/jquery-slimscroll/jquery.slimscroll.min.js' %}"></script> <!-- FastClick --> <script src="{% static 'bower_components/fastclick/lib/fastclick.js' %}"></script> <!-- AdminLTE App --> <script src="{% static 'dist/js/pages/../static/dist/js/adminlte.min.js' %}"></script> <!-- AdminLTE for demo purposes --> <script src="{% static 'dist/js/demo.js' %}"></script> <!-- page script --> <script> $(function () { $('#example1').DataTable() $('#example2').DataTable({ 'paging' : true, 'lengthChange': false, 'searching' : false, 'ordering' : true, 'info' : true, 'autoWidth' : false }) }) </script> {% block script %}{% endblock %} </body> </html>
2.建立index.html等顯示頁面
{% extends 'base.html' %} {% load staticfiles %} {% block title %}資產總表{% endblock %} {% block css %} <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"> <link rel="stylesheet" href="/static/dist/css/skins/_all-skins.min.css"> {% endblock %} {% block content %} <!-- Content Header (Page header) --> <section class="content-header"> <h1> test <small></small> </h1> <ol class="breadcrumb"> </ol> </section> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <a href="adderp.html" class="btn btn-app"> <i class="fa fa-edit"></i>新增 </a> </div> <!-- /.box-header --> <div class="box-body"> <table id="example2" class="table table-bordered table-hover"> <thead> <tr> <th>資料庫</th> <th>IP</th> <th>ssh埠</th> <th>資料庫埠</th> <th>例項名</th> <th>刪除</th> </tr> </thead> <tbody> {% for data in database %} <tr> <td>{{ data.name }}</td> <td>{{ data.ip }}</td> <td>{{ data.ssh }}</td> <td>{{ data.port }}</td> <td>{{ data.sid }}</td> <td><button type="button" class="btn btn-block btn-success">刪除</button></td> </tr> {% endfor %} </tbody> </table> </div> <!-- /.box-body --> </div> <!-- /.box --> <!-- /.box --> </div> <!-- /.col --> </div> <!-- /.row --> </section> <!-- /.content --> {% endblock %} {% block script %} <!-- jQuery 3 --> <script src="/static/bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- DataTables --> <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script> <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> <!-- SlimScroll --> <script src="/static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script> <!-- FastClick --> <script src="/static/bower_components/fastclick/lib/fastclick.js"></script> <!-- AdminLTE App --> <script src="/static/dist/js/adminlte.min.js"></script> <!-- AdminLTE for demo purposes --> <script src="/static/dist/js/demo.js"></script> <!-- page script --> <script> $(function () { $('#example1').DataTable() $('#example2').DataTable({ 'paging' : true, 'lengthChange': false, 'searching' : false, 'ordering' : true, 'info' : true, 'autoWidth' : false }) }) </script> {% endblock %}