號稱最爲簡明實用的Django上手教程（下）
做者：白寧超javascript
2017年8月25日08:51:58css
摘要：上文 號稱【最爲簡明實用的Django上手教程】介紹了django基本概念、配置和相關操做。相信經過上文的閱讀，基本明白django運行機制和操做。假設你如今經過dome和相關書籍已經基本理解django這臺機器的運行。下一步如何像asp.net、Jsp，PHP等常規網站開發，進行先後臺交互呢？又如何採用較爲簡潔美觀的前端框架進行設計呢？假設你須要配置多個數據庫怎麼辦？靜態文件單獨存放須要哪些配置？針對這些配置有哪些便利？最後，假設你又是一名對數據開發很感興趣的，且學過一些機器學習，數據挖掘，天然語言處理，雲計算等技術之一，想挖掘分析數據並進行可視化，怎麼辦？本文就是針對這些問題開始的。（ 本文原創編著，轉載註明出處: 號稱最爲簡明實用的Django上手教程（下））
1 前景回顧
系統環境：WIN10 64bithtml
開發環境：sublime+Anaconda
數據庫：Mysql 5.6.17
語言：python3.5
框架：django1.11+Bootstrap
可視化工具：Highchart|Echarts|plotly|Bokeh（採用Echarts）前端
2 靜態文件配置操做
（1）靜態static文件夾的配置。java
在analysis文件夾下建立：analysis/static和analysis/templates文件夾，其中：python
① static：包括，css，js，img，font，files等文件，使用時須要配置，頁面開頭添加{% load static %}mysql
② templates：包含web的html靜態頁面，django1.10以後會默認識別jquery
（2）打開xmjc_analysis/setting.py修改以下：git
|
1
2
|
STATIC_URL =
'/static/'
STATIC_ROOT = os.path.
join
(BASE_DIR,
"static"
)
|
（3）打開xmjc_analysis/urls.py修改以下：github
|
1
2
3
4
5
6
7
8
9
10
|
# 配置加載靜態頁面
from
django.conf import settings
from
django.conf.urls.
static
import
static
urlpatterns = [
url(r
'^admin/'
, admin.site.urls),
url(r
'^index/$'
, analysis_views.index,name=
'index'
),# 首頁
]+
static
(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
|
（4） 在基模板（後文詳細介紹）base頁面開頭添加{% load static %}
（5 ）xmjc_analysis/views.py修改以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
''
'
第一個頁面
author：白寧超
site：http:
//www.cnblogs.com/baiboy/
''
'
#coding:utf-8
from
django.shortcuts import render
from
django.http import HttpResponse
def index1(request):
name = request.GET[
'name'
]
return
HttpResponse(u
"歡迎"
+name+
",進入第一個Django頁面!"
)
def index(request):
''
'項目統計分析平臺主頁'
''
return
render(request,
'xmjc/index.html'
) # 首頁
|
而後在xmjc_analysis/urls.py下添加訪問
前端nav.html的超連接以下：
3 結合Bootstrap和頁面模板前端設計
（1）什麼是Bootstrap？
Bootstrap是一組用於網站和網絡應用程序開發的開源前端框架，包括HTML、CSS及JavaScript的框架，提供字體排印、窗體、按鈕、導航及其餘各類組件及Javascript擴展，旨在使動態網頁和Web應用的開發更加容易。 Bootstrap是GitHub上面被標記爲「Starred」次數排名第二最多的項目。Starred次數超過105,000，而分支次數超過了47,000次。
ps：前端框架，全部的插件依賴於 jQuery。因此必須在插件文件以前引用 jQuery
----維基百科
（2）Bootstrap學習資料
① 官網下載地址：http://getbootstrap.com/
② 中文網下載地址：http://www.bootcss.com/
③ w3c學習網站：https://www.w3cschool.cn/bootstrap
（3）引入 Bootstrap
|
1
2
3
4
|
<!-- 引入 Bootstrap -->
<link href=
"http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"
rel=
"stylesheet"
>
<!-- jQuery (Bootstrap 的 JavaScript 插件須要引入 jQuery) -->
<script src=
"https://code.jquery.com/jquery.js"
></script>
|
|
1
2
3
4
|
<!-- 精簡版 -->
<link href=
"http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel=
"stylesheet"
>
<script src=
"//libs.baidu.com/jquery/2.0.0/jquery.min.js"
></script>
<script src=
"//libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"
></script>
|
具體知識點總結參考文章：【前端知識十分鐘預覽之學習札記】
（4）基於Bootstrap的頁面模板設計
① base.html 能夠視做母模板，其中包括：
{% load static %} 放在頁面最頂層，用於識別靜態文件
<head></head> 放入的編碼和基本信息以及css文件（js文件放在頁面尾部，提升用戶體驗）
側邊欄 引用③文件，便於修改和管理。
|
1
2
3
4
5
|
<!-- 側邊欄 -->
<div id=
"sidebar"
class
=
"sidebar"
>
{% include
'xmjc/nav.html'
%}
</div>
<!-- /側邊欄 -->
|
頁面內容設計 {% block content %}{% endblock %}佔塊符號
|
1
2
3
4
5
|
<div
class
=
"row col-lg-12"
>
{% block content %}
<p>此處爲主要內容</p>
{% endblock %}
</div>
|
底部 存放js文件
<!DOCTYPE html>
<html>
<head>
{% load static %}
<!-- meta的引用 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="author" content="bnc">
<!-- CSS樣式設計 -->
<link rel="stylesheet" type="text/css" href="/static/bootstrap-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/static/bootstrap-dist/css/bootstrap-theme.css" />
<!-- 換膚 -->
<link rel="stylesheet" type="text/css" href="/static/css/cloud-admin.css" />
<link rel="stylesheet" type="text/css" href="/static/css/themes/default.css" id="skin-switcher" />
<!--圖標 -->
<link href="/static/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<!-- JQUERY UI-->
<link rel="stylesheet" type="text/css" href="/static/js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
<!-- 表格 -->
<link rel="stylesheet" type="text/css" href="/static/js/datatables/media/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/static/js/datatables/media/assets/css/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="/static/js/datatables/extras/TableTools/media/css/TableTools.min.css" />
<!-- JQUERY，全部bootstrap依賴此js -->
<script src="/static/js/jquery-2.0.3.min.js"></script>
<!-- echarts -->
<script src="/static/js/echarts/echarts.js"></script>
<!-- title標籤，能夠自定義設置 -->
<title>{% block title %}四川省科技廳大數據決策分析平臺{% endblock %}</title>
</head>
<body >
<!-- 頂部設計 -->
<header class="navbar clearfix" id="header">
<div class="container">
<div class="navbar-brand ">
<!-- 公司logo -->
<a href="{% url 'index' %}">
<img src="/static/img/logo/logo.png" alt="" class="img-responsive" height="30" width="120">
</a>
<!-- /公司logo -->
<!-- 摺疊側邊欄 -->
<div id="sidebar-collapse" class="sidebar-collapse btn">
<i class="fa fa-bars"
data-icon1="fa fa-bars"
data-icon2="fa fa-bars" ></i>
</div>
<!-- /摺疊側邊欄 -->
</div>
<!-- NAVBAR LEFT -->
<ul class="nav navbar-nav pull-left hidden-xs" id="navbar-left">
<li class="dropdown">
<a href="{% url 'index' %}" class="team-status-toggle dropdown-toggle tip-bottom" data-toggle="tooltip" title="大數據決策分析平臺">
<span class="name" style="font-size: x-large;">大數據決策分析平臺</span>
</a>
</li>
</ul>
<!-- /NAVBAR LEFT -->
<!-- BEGIN TOP NAVIGATION MENU -->
<ul class="nav navbar-nav pull-right" style="float: right;margin-right: -6%">
<!-- 通知 -->
<li class="dropdown" id="header-notification">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell"></i>
<span class="badge">7</span>
</a>
<ul class="dropdown-menu notification">
<li class="dropdown-title">
<span><i class="fa fa-bell"></i> 6 消息通知</span>
</li>
<!-- 通知下拉用戶信息 -->
<li>
<a href="#">
<span class="label label-success"><i class="fa fa-user"></i></span>
<span class="body">
<span class="message">5 用戶在線. </span>
<span class="time">
<i class="fa fa-clock-o"></i>
<span>剛剛</span>
</span>
</span>
</a>
</li>
<!-- /通知下拉用戶信息 -->
<!-- 服務器信息 -->
<li>
<a href="#">
<span class="label label-warning"><i class="fa fa-lock"></i></span>
<span class="body">
<span class="message">DW1 服務器中止.</span>
<span class="time">
<i class="fa fa-clock-o"></i>
<span>32 分鐘前</span>
</span>
</span>
</a>
</li>
<!-- /服務器信息 -->
<!-- 查看全部通知信息 -->
<li class="footer">
<a href="#">查看全部通知信息 <i class="fa fa-arrow-circle-right"></i></a>
</li>
<!-- /查看全部通知信息 -->
</ul>
</li>
<!-- /通知 -->
<!-- 登陸信息 -->
<li class="dropdown user" id="header-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img alt="" src="/static/img/avatars/avatar3.jpg" />
<span class="username">王定國</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user"></i>我的簡介</a></li>
<li><a href="#"><i class="fa fa-cog"></i> 帳號設置</a></li>
<li><a href="login.html"><i class="fa fa-power-off"></i>退 出</a></li>
</ul>
</li>
<!-- /登陸信息 -->
</ul>
<!-- END TOP NAVIGATION MENU -->
</div>
</header>
<!--/頂部設計 -->
<!-- 主頁面設計 -->
<section id="page">
<!-- 側邊欄 -->
<div id="sidebar" class="sidebar">
{% include 'xmjc/nav.html' %}
</div>
<!-- /側邊欄 -->
<!-- 右側 -->
<div id="main-content">
<div class="container">
<div class="row">
<!-- 右側內容 -->
<div id="content" class="col-lg-12">
<div class="row col-lg-12">
<div class="page-header">
<!-- 麪包式導航頁-->
<ul class="breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="{% url 'index' %}">首頁 </a>
</li>
<li>
<!-- 子主菜單 -->
{% block lnav %}
菜單導航
{% endblock %}
</li>
</ul>
<!-- /麪包式導航頁 -->
<!-- 當前主題 -->
<div class="clearfix">
<h3 class="content-title pull-left">
{{ lnav }}
</h3>
</div>
<!-- /當前主題 -->
<!-- 當前主題描述 -->
<div class="description">
{{ lcontent }}
</div>
<!-- /當前主題描述 -->
</div>
</div>
<!-- 頁面內容設計 -->
<div class="row col-lg-12">
{% block content %}
<p>此處爲主要內容</p>
{% endblock %}
</div>
<!-- /頁面內容設計 -->
<!-- 頂部 -->
<div class="footer-tools">
<span class="go-top">
<i class="fa fa-chevron-up"></i> 頂部
</span>
</div>
<!-- /頂部 -->
</div>
<!-- 右側內容 -->
</div>
</div>
</div>
<!-- 右側 -->
</section>
<!--/主頁面設計 -->
<!-- JAVASCRIPTS -->
<!-- JQUERY UI，摺疊-->
<!-- JQUERY UI-->
<script src="/static/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="/static/bootstrap-dist/js/bootstrap.min.js"></script>
<!-- DATE RANGE PICKER -->
<script src="/static/js/bootstrap-daterangepicker/moment.min.js"></script>
<script src="/static/js/bootstrap-daterangepicker/daterangepicker.min.js"></script>
<!-- BLOCK UI 刷新-->
<script type="text/javascript" src="/static/js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
<!-- 表格 -->
<script type="text/javascript" src="/static/js/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/static/js/datatables/media/assets/js/datatables.min.js"></script>
<script type="text/javascript" src="/static/js/datatables/extras/TableTools/media/js/TableTools.min.js"></script>
<script type="text/javascript" src="/static/js/datatables/extras/TableTools/media/js/ZeroClipboard.min.js"></script>
<!-- FLOT CHARTS -->
<!-- <script src="/static/js/flot/jquery.flot.min.js"></script>
<script src="/static/js/flot/jquery.flot.time.min.js"></script>
<script src="/static/js/flot/jquery.flot.selection.min.js"></script>
<script src="/static/js/flot/jquery.flot.resize.min.js"></script>
<script src="/static/js/flot/jquery.flot.pie.min.js"></script>
<script src="/static/js/flot/jquery.flot.stack.min.js"></script>
<script src="/static/js/flot/jquery.flot.crosshair.min.js"></script> -->
<!-- COOKIE -->
<script type="text/javascript" src="/static/js/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="/static/js/script.js"></script>
<!-- <script>
jQuery(document).ready(function() {
App.setPage("base"); //Set current page
App.init(); //Initialise plugins and elements
});
</script> -->
<!-- /JAVASCRIPTS -->
</body>
</html>
② content.html 內容頁面，能夠本身自由設計，本例子使用畫布佈局，展現幾個可視化和表格的應用。
<!-- DASHBOARD CONTENT -->
<div class="row">
<!-- COLUMN 1 -->
<div class="col-md-6">
<div class="row">
<div class="col-lg-6">
<div class="dashbox panel panel-default">
<div class="panel-body">
<div class="panel-left red">
<i class="fa fa-instagram fa-3x"></i>
</div>
<div class="panel-right">
<div class="number">6718</div>
<div class="title">Likes</div>
<span class="label label-success">
26% <i class="fa fa-arrow-up"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="dashbox panel panel-default">
<div class="panel-body">
<div class="panel-left blue">
<i class="fa fa-twitter fa-3x"></i>
</div>
<div class="panel-right">
<div class="number">2724</div>
<div class="title">Followers</div>
<span class="label label-warning">
5% <i class="fa fa-arrow-down"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="quick-pie panel panel-default">
<div class="panel-body">
<div class="col-md-4 text-center">
<div id="dash_pie_1" class="piechart" data-percent="59">
<span class="percent"></span>
</div>
<a href="#" class="title">New Visitors <i class="fa fa-angle-right"></i></a>
</div>
<div class="col-md-4 text-center">
<div id="dash_pie_2" class="piechart" data-percent="73">
<span class="percent"></span>
</div>
<a href="#" class="title">Bounce Rate <i class="fa fa-angle-right"></i></a>
</div>
<div class="col-md-4 text-center">
<div id="dash_pie_3" class="piechart" data-percent="90">
<span class="percent"></span>
</div>
<a href="#" class="title">Brand Popularity <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /COLUMN 1 -->
<!-- COLUMN 2 -->
<div class="col-md-6">
<div class="box solid grey">
<div class="box-title">
<h4><i class="fa fa-dollar"></i>Revenue</h4>
<div class="tools">
<span class="label label-danger">
20% <i class="fa fa-arrow-up"></i>
</span>
<a href="#box-config" data-toggle="modal" class="config">
<i class="fa fa-cog"></i>
</a>
<a href="javascript:;" class="reload">
<i class="fa fa-refresh"></i>
</a>
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
<a href="javascript:;" class="remove">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="box-body">
<div id="chart-revenue" style="height:240px"></div>
</div>
</div>
</div>
<!-- /COLUMN 2 -->
</div>
<!-- /DASHBOARD CONTENT -->
<!-- NEW ORDERS & STATISTICS -->
<div class="row">
<!-- NEW ORDERS -->
<div class="col-md-6">
<div class="box border">
<div class="box-title">
<h4><i class="fa fa-columns"></i> <span class="hidden-inline-mobile">Sales Tab</span></h4>
</div>
<div class="box-body">
<div class="tabbable header-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#sales" data-toggle="tab"><i class="fa fa-bookmark"></i> <span class="hidden-inline-mobile">New Orders</span></a></li>
<li><a href="#feed" data-toggle="tab"><i class="fa fa-rss"></i> <span class="hidden-inline-mobile">Recent Activities</span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="sales">
<div class="panel panel-default">
<div class="panel-body orders no-opaque">
<div class="scroller" data-height="450px" data-always-visible="1" data-rail-visible="1">
<ul class="list-unstyled">
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A14</strong> Rikki S. Stover</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 9, 2013" >Oct 9, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$124.00</h4>
<p>
<span class="label label-success arrow-in-right"><i class="fa fa-check"></i> Complete</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
<span class="sr-only">85% Complete</span>
</div>
</div>
</li>
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A15</strong> Scott Allen</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 10, 2013" >Oct 10, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$235.00</h4>
<p>
<span class="label label-warning arrow-in-right"><i class="fa fa-cog"></i> In Progress</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
<span class="sr-only">30% Complete</span>
</div>
</div>
</li>
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A16</strong> Larry Wright</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013" >Oct 11, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$77.00</h4>
<p>
<span class="label label-primary arrow-in-right"><i class="fa fa-archive"></i> Archived</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 97%;">
<span class="sr-only">97% Complete</span>
</div>
</div>
</li>
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A17</strong> John Dale</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 10, 2013" >Oct 10, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$174.00</h4>
<p>
<span class="label label-danger arrow-in-right"><i class="fa fa-star"></i> New</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
<span class="sr-only">10% Complete</span>
</div>
</div>
</li>
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A18</strong> MJ Perkins</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013" >Oct 11, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$68.00</h4>
<p>
<span class="label label-info arrow-in-right"><i class="fa fa-truck"></i> In Transit</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
<span class="sr-only">50% Complete</span>
</div>
</div>
</li>
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A19</strong> Stephen Stover</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 9, 2013" >Oct 9, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$124.00</h4>
<p>
<span class="label label-success arrow-in-right"><i class="fa fa-check"></i> Complete</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only">80% Complete</span>
</div>
</div>
</li>
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A20</strong> Edward Lus</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013" >Oct 11, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$52.00</h4>
<p>
<span class="label label-danger arrow-in-right"><i class="fa fa-star"></i> New</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">20% Complete</span>
</div>
</div>
</li>
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A21</strong> Alice Mangrum</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013" >Oct 11, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$14.00</h4>
<p>
<span class="label label-info arrow-in-right"><i class="fa fa-truck"></i> In Transit</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
<span class="sr-only">65% Complete</span>
</div>
</div>
</li>
<li class="clearfix">
<div class="pull-left">
<p>
<h5><strong>#A22</strong> Tamika Owens</h5>
</p>
<p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013" >Oct 11, 2013</abbr></p>
</div>
<div class="text-right pull-right">
<h4 class="cost">$604.00</h4>
<p>
<span class="label label-warning arrow-in-right"><i class="fa fa-cog"></i> In Progress</span>
</p>
</div>
<div class="clearfix"></div>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
<span class="sr-only">75% Complete</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class='text-center'>
<ul class='pagination'>
<li class='disabled'>
<a href='#'>
<i class='fa fa-angle-left'></i>
</a>
</li>
<li class='active'>
<a href='#'>
1
</a>
</li>
<li>
<a href='#'>2</a>
</li>
<li>
<a href='#'>3</a>
</li>
<li>
<a href='#'>4</a>
</li>
<li>
<a href='#'>5</a>
</li>
<li>
<a href='#'>
<i class='fa fa-angle-right'></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane" id="feed">
<div class="scroller" data-height="450px" data-always-visible="1" data-rail-visible="1">
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-check btn btn-info"></i>
<a class="user" href="#"> John Doe </a>
accepted your connection request.
<br>
<a href="#">View profile</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
5 hours ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-picture-o btn btn-danger"></i>
<a class="user" href="#"> Jack Doe </a>
uploaded a new photo.
<br>
<a href="#">Take a look</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
5 hours ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-edit btn btn-pink"></i>
<a class="user" href="#"> Jess Doe </a>
edited their skills.
<br>
<a href="#">Endorse them</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
5 hours ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-bitcoin btn btn-yellow"></i>
<a class="user" href="#"> Divine Doe </a>
made a bitcoin payment.
<br>
<a href="#">Check your financials</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
6 hours ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-dropbox btn btn-primary"></i>
<a class="user" href="#"> Lisbon Doe </a>
saved a new document to Dropbox.
<br>
<a href="#">Download</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
1 day ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-pinterest btn btn-inverse"></i>
<a class="user" href="#"> Bob Doe </a>
pinned a new photo to Pinterest.
<br>
<a href="#">Take a look</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
2 days ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-clock-o btn btn-success"></i>
<a class="user" href="#"> John Doe </a>
accepted your connection request.
<br>
<a href="#">View profile</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
5 hours ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-heart btn btn-purple"></i>
<a class="user" href="#"> Jack Doe </a>
uploaded a new photo.
<br>
<a href="#">Take a look</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
5 hours ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-gift btn btn-pink"></i>
<a class="user" href="#"> Jess Doe </a>
edited their skills.
<br>
<a href="#">Endorse them</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
5 hours ago
</div>
</div>
<div class="feed-activity clearfix">
<div>
<i class="pull-left roundicon fa fa-random btn btn-yellow"></i>
<a class="user" href="#"> Divine Doe </a>
made a bitcoin payment.
<br>
<a href="#">Check your financials</a>
</div>
<div class="time">
<i class="fa fa-clock-o"></i>
6 hours ago
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /NEW ORDERS -->
<!-- STATISTICS -->
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="box border inverse">
<div class="box-title">
<h4><i class="fa fa-money"></i>Sales Summary</h4>
<div class="tools">
<a href="javascript:;" class="reload">
<i class="fa fa-refresh"></i>
</a>
<a href="javascript:;" class="remove">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="box-body">
<div class="sparkline-row">
<span class="title">Total sales</span>
<span class="value">$78,273</span>
<span class="sparkline big" data-color="blue">16,7,23,13,12,11,15,4,19,18,4,24</span>
</div>
<div class="sparkline-row">
<span class="title">Profit</span>
<span class="value">$6,543</span>
<span class="sparkline big" data-color="red">6,3,24,25,27,29,14,26,20,8,12,20</span>
</div>
<div class="sparkline-row">
<span class="title">Orders</span>
<span class="value">985</span>
<span class="sparkline big" data-color="green">11,19,20,20,5,18,11,6,16,20,26,11</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box border purple">
<div class="box-title">
<h4><i class="fa fa-adjust"></i>Distribution Index</h4>
<div class="tools">
<a href="javascript:;" class="reload">
<i class="fa fa-refresh"></i>
</a>
<a href="javascript:;" class="remove">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="box-body">
<div class="sparkline-row">
<span class="title">Revenue distribution</span>
<span class="value"><i class="fa fa-usd"></i> 25674</span>
<span class="sparklinepie">16,7,23</span>
</div>
<div class="sparkline-row">
<span class="title">Sales</span>
<span class="value"><i class="fa fa-money"></i> 19 999,99</span>
<span class="sparklinepie">6,3,24,25</span>
</div>
<div class="sparkline-row">
<span class="title">Employee/ Dept</span>
<span class="value"><i class="fa fa-user"></i> 645783</span>
<span class="sparklinepie">11,19,20</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /STATISTICS -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th><i class="fa fa-user"></i> Client</th>
<th class="hidden-xs"><i class="fa fa-quote-left"></i> Sales Item</th>
<th><i class="fa fa-dollar"></i> Amount</th>
<th><i class="fa fa-bars"></i> Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Fortune 500</a></td>
<td class="hidden-xs">Gold Level Virtual Server</td>
<td>$ 2310.23</td>
<td><span class="label label-success label-sm">Paid</span></td>
</tr>
<tr>
<td><a href="#">Cisco Inc.</a></td>
<td class="hidden-xs">Platinum Level Virtual Server</td>
<td>$ 5502.67</td>
<td><span class="label label-warning label-sm">Pending</span></td>
</tr>
<tr>
<td><a href="#">VMWare Ltd.</a></td>
<td class="hidden-xs">Hardware Switch</td>
<td>$ 3472.54</td>
<td><span class="label label-success label-sm">Paid</span></td>
</tr>
<tr>
<td><a href="#">Wall-Mart Stores</a></td>
<td class="hidden-xs">Branding & Marketing</td>
<td>$ 6653.25</td>
<td><span class="label label-success label-sm">Paid</span></td>
</tr>
<tr>
<td><a href="#">Exxon Mobil</a></td>
<td class="hidden-xs">UX and UI Services</td>
<td>$ 45645.45</td>
<td><span class="label label-danger label-sm">Overdue</span></td>
</tr>
<tr>
<td><a href="#">General Electric</a></td>
<td class="hidden-xs">Web Designing</td>
<td>$ 3432.11</td>
<td><span class="label label-warning label-sm">Pending</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /NEW ORDERS & STATISTICS -->
③ nav.html 導航頁面設計，其中包括菜單摺疊，子菜單等功能，超連接使用<a href="{% url 'index' %}">
<div class="sidebar-menu nav-collapse">
<div class="divide-20"></div>
<!-- 搜索 -->
<div id="search-bar">
<input class="search" type="text" placeholder="查找"><i class="fa fa-search search-icon"></i>
</div>
<!-- /搜索 -->
<!-- 側邊導航菜單 -->
<ul>
<li class="active">
<a href="{% url 'index' %}">
<i class="fa fa-tachometer fa-fw"></i>
<span class="menu-text">大數據決策分析</span>
<span class="selected"></span>
</a>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-bookmark-o fa-fw"></i>
<span class="menu-text">項目統計分析</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li>
<a class="" href="{% url 'xmksh' %}">
<span class="sub-menu-text">可視化統計圖形測試</span>
</a></li>
<li><a class="" href="{% url 'xmjf' %}">
<span class="sub-menu-text">項目經費統計</span>
</a></li>
<li><a class="" href="">
<span class="sub-menu-text">項目數量統計</span>
</a></li>
<li><a class="" href="">
<span class="sub-menu-text">項目區域統計</span>
</a></li>
<li><a class="" href="charts/xmlb.html">
<span class="sub-menu-text">項目類別統計</span>
</a></li>
<li class="has-sub-sub">
<a href="javascript:;" class="">
<span class="sub-menu-text">項目結題統計</span>
<span class="arrow"></span>
</a>
<ul class="sub-sub">
<li><a class="" href="charts/xmjfjt.html">
<span class="sub-sub-menu-text">結題成功統計</span>
</a></li>
<li><a class="" href="charts/xmjfbjt.html">
<span class="sub-sub-menu-text">結題失敗統計</span>
</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-table fa-fw"></i>
<span class="menu-text">市縣州主題分析</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="simple_table.html">
<span class="sub-menu-text">各區域項目分佈</span>
</a></li>
<li><a class="" href="dynamic_tables.html">
<span class="sub-menu-text">各區域經費分佈</span>
</a></li>
<li><a class="" href="jqgrid_plugin.html">
<span class="sub-menu-text">各區域課題分佈</span>
</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-pencil-square-o fa-fw"></i>
<span class="menu-text">高校項目分佈</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="forms.html">
<span class="sub-menu-text">高校項目分佈</span>
</a></li>
<li><a class="" href="wizards_validations.html">
<span class="sub-menu-text">高校經費分佈</span>
</a></li>
<li><a class="" href="wizards_validations.html">
<span class="sub-menu-text">高校課題分佈</span>
</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-bar-chart-o fa-fw"></i>
<span class="menu-text">年報分析</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="flot_charts.html">
<span class="sub-menu-text">年度結題狀況</span>
</a></li>
<li><a class="" href="xcharts.html">
<span class="sub-menu-text">年度經費狀況</span>
</a></li>
<li><a class="" href="others.html">
<span class="sub-menu-text">年度課題狀況</span>
</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-columns fa-fw"></i>
<span class="menu-text">專家人員統計分析</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="mini_sidebar.html">
<span class="sub-menu-text">專家年齡統計</span>
</a></li>
<li><a class="" href="fixed_header.html">
<span class="sub-menu-text">專家學術領域統計</span>
</a></li>
<li><a class="" href="fixed_header_sidebar.html">
<span class="sub-menu-text">專家評審資格年限統計</span>
</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-map-marker fa-fw"></i>
<span class="menu-text">評獎狀況統計分析</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="google_maps.html">
<span class="sub-menu-text">獎項類別</span>
</a></li>
<li><a class="" href="vector_maps.html">
<span class="sub-menu-text">獎項記錄</span>
</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-file-text fa-fw"></i>
<span class="menu-text">機器學習算法庫</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="login.html">
<span class="sub-menu-text">樸素貝葉斯算法</span>
</a></li>
<li><a class="" href="user_profile.html">
<span class="sub-menu-text">分類算法</span>
</a></li>
<li><a class="" href="chats.html">
<span class="sub-menu-text">聚類算法</span>
</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-file-text fa-fw"></i>
<span class="menu-text">可視化圖形庫</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="login.html">
<span class="sub-menu-text">條形圖</span>
</a></li>
<li><a class="" href="user_profile.html">
<span class="sub-menu-text">折線圖</span>
</a></li>
<li><a class="" href="chats.html">
<span class="sub-menu-text">地圖</span>
</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-briefcase fa-fw"></i>
<span class="menu-text">數據預處理
<span class="badge pull-right">3</span>
</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="search_results.html">
<span class="sub-menu-text">網絡爬蟲</span>
</a></li>
<li><a class="" href="email_templates.html">
<span class="sub-menu-text">數據清洗</span>
</a></li>
<li><a class="" href="error_404.html">
<span class="sub-menu-text">數據拼裝</span>
</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;" class="">
<i class="fa fa-briefcase fa-fw"></i>
<span class="menu-text">基礎算法庫
<span class="badge pull-right">3</span>
</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="search_results.html">
<span class="sub-menu-text">PDF轉換</span>
</a></li>
<li><a class="" href="email_templates.html">
<span class="sub-menu-text">發送郵件</span>
</a></li>
<li><a class="" href="error_404.html">
<span class="sub-menu-text">信息查重</span>
</a></li>
</ul>
</li>
<!-- 單獨頁面左右跳轉參照此模板 -->
<li>
<a class="" href="inbox.html">
<i class="fa fa-envelope-o fa-fw"></i>
<span class="menu-text">郵件</span>
</a></li>
<li>
<a class="" href="widgets_box.html">
<i class="fa fa-th-large fa-fw"></i>
<span class="menu-text">系統設置
<span class="tooltip-error pull-right" title="" data-original-title="3 New Events">
<span class="label label-success">新</span>
</span>
</span>
</a></li>
<!-- 單獨頁面跳轉站外參照此模板 -->
<li>
<a class="" href="../../static/frontend_theme/index.html" target="_blank">
<i class="fa fa-desktop fa-fw"></i>
<span class="menu-text">前端主題</span>
</a></li>
</ul>
<!-- /側邊導航菜單 -->
</div>
④ 首頁 index.html 調用①母版頁面，自定義內容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!-- 繼承模板頁 -->
{% extends
'xmjc/base.html'
%}
<!-- 設置標題 -->
{% block title %}歡迎光臨首頁{% endblock %}
<!-- 覆蓋內容塊，自定義頁面的內容 -->
{% block content %}
<!-- <p>覆蓋內容塊，自定義頁面的內容</p> -->
{% include
'xmjc/content.html'
%}
<script>
jQuery(document).ready(function() {
App.setPage(
"base"
);
//Set current page
App.init();
//Initialise plugins and elements
});
</script>
{% endblock %}
|
（5）運行服務器訪問
頁面效果：
至此，已經完成靜態頁面的配置工做。
4 多數據庫配置聯合操做
（1）打開xmjc_analysis/setting.py，有一個默認的數據庫 default,咱們能夠再加一些其它的（這裏你能夠調用Access、SQLServer、Oracle等），好比：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
''
'
配置Mysql數據庫
2017年7月26日16:40:38
白寧超
''
'
DATABASES = {
'default'
: {
'ENGINE'
:
'django.db.backends.mysql'
,
'NAME'
:
'test'
,
'USER'
:
'test'
,
'PASSWORD'
:
'test123'
,
'HOST'
:
'localhost'
,
'PORT'
:
'3306'
,
},
'db1'
: {
'ENGINE'
:
'django.db.backends.mysql'
,
'NAME'
:
'數據庫名稱'
,
'USER'
:
'用戶名'
,
'PASSWORD'
:
'密碼'
,
"HOST"
:
"localhost"
, #本地
'PORT'
:
'3306'
,
},
'db2'
: {
'ENGINE'
:
'django.db.backends.mysql'
,
'NAME'
:
'數據庫名稱'
,
'USER'
:
'用戶名'
,
'PASSWORD'
:
'密碼'
,
"HOST"
:
"服務器地址"
,
'PORT'
:
'3306'
,
},
}
|
|
1
2
3
4
5
6
7
|
# use multi-database in django
DATABASE_ROUTERS = [
'xmjc_analysis.database_router.DatabaseAppsRouter'
]
DATABASE_APPS_MAPPING = {
#'app_name':'database_name',
'app1'
:
'db1'
,
'app2'
:
'db2'
,
}
|
（2）在project_name文件夾中存放 database_router.py 文件，內容以下：
# -*- coding: utf-8 -*-
from django.conf import settings
DATABASE_MAPPING = settings.DATABASE_APPS_MAPPING
class DatabaseAppsRouter(object):
"""
A router to control all database operations on models for different
databases.
In case an app is not set in settings.DATABASE_APPS_MAPPING, the router
will fallback to the `default` database.
Settings example:
DATABASE_APPS_MAPPING = {'app1': 'db1', 'app2': 'db2'}
"""
def db_for_read(self, model, **hints):
""""Point all read operations to the specific database."""
if model._meta.app_label in DATABASE_MAPPING:
return DATABASE_MAPPING[model._meta.app_label]
return None
def db_for_write(self, model, **hints):
"""Point all write operations to the specific database."""
if model._meta.app_label in DATABASE_MAPPING:
return DATABASE_MAPPING[model._meta.app_label]
return None
def allow_relation(self, obj1, obj2, **hints):
"""Allow any relation between apps that use the same database."""
db_obj1 = DATABASE_MAPPING.get(obj1._meta.app_label)
db_obj2 = DATABASE_MAPPING.get(obj2._meta.app_label)
if db_obj1 and db_obj2:
if db_obj1 == db_obj2:
return True
else:
return False
return None
# for Django 1.4 - Django 1.6
def allow_syncdb(self, db, model):
"""Make sure that apps only appear in the related database."""
if db in DATABASE_MAPPING.values():
return DATABASE_MAPPING.get(model._meta.app_label) == db
elif model._meta.app_label in DATABASE_MAPPING:
return False
return None
# Django 1.7 - Django 1.11
def allow_migrate(self, db, app_label, model_name=None, **hints):
print(db, app_label, model_name, hints)
if db in DATABASE_MAPPING.values():
return DATABASE_MAPPING.get(app_label) == db
elif app_label in DATABASE_MAPPING:
return False
return None
（3）使用操做
# 查詢
YourModel.objects.using('db1').all()
# 保存 或 刪除
user_obj.save(using='new_users')
user_obj.delete(using='legacy_users')
# 數據庫同步
python manage.py migrate --database=db2
# 數據導出
python manage.py dumpdata app2 --database=db2 > app2_fixture.json
python manage.py dumpdata auth > auth_fixture.json
# 數據庫導入
python manage.py loaddata app1_fixture.json --database=db1
5 數據挖掘與可視化技術
（1）設計思路
調用Echarts進行可視化展現，其中數據來源於兩個部分，直接調用一方面數據庫的結構化數據，另外一個方面分析處理非結構化數據。最終處理成json形式，最後結合ajax進行數據綁定展現。這裏【數據挖掘|文本處理技術】不詳細介紹，主要展現思想和流程。指望展現三個案例：柱形圖、餅形圖、數據表格。
（2）數據前臺展現，使用表單須要添加{%csrf_token%}
（3）柱形圖案例展現
新建頁面ksh.html，添加以下代碼
|
1
2
3
4
5
|
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div
class
=
"row"
>
<div
class
=
"col-md-6 "
id=
"test1"
style=
"width:600px;height:400px;margin:0 auto"
>
</div>
</div>
|
js代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/*
柱狀圖
白寧超
2017年8月4日17:20:42
*/
// 基於準備好的dom，初始化echarts圖表
var
myChart = echarts.init(document.getElementById(
'test1'
));
// 指定圖表的配置項和數據
var
option = {
title: {
text:
'ECharts 入門示例'
},
tooltip: {},
legend: {
data:[
'銷量'
]
},
xAxis: {
data: [
"襯衫"
,
"羊毛衫"
,
"雪紡衫"
,
"褲子"
,
"高跟鞋"
,
"襪子"
]
},
yAxis: {
},
series: [{
name:
'銷量'
,
type:
'bar'
,
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
|
json數據：上面案例採用官方數據，只須要配置data便可，這個data的json數據，你能夠經過數據挖掘技術後文本或者數據庫梳理出綁定起來便可。以下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
def xmjf(request):
lnav=
"項目經費統計"
# 可視化主題
lcontent =
"這裏是可視化主題的描述->項目經費統計"
# 可視化主題的描述
data=[{
"value"
: 55,
"name"
:
'優先55'
},
{
"value"
: 70,
"name"
:
'普通70'
},
{
"value"
: 25,
"name"
:
"緊急25"
}]
data1 = [{
"keys"
:
"襯衫"
,
"values"
:5},
{
"keys"
:
"羊毛衫"
,
"values"
:20},
{
"keys"
:
"雪紡衫"
,
"values"
:36},
{
"keys"
:
"褲子"
,
"values"
:10},
{
"keys"
:
"高跟鞋"
,
"values"
:10},
{
"keys"
:
"襪子"
,
"values"
:20}]
return
render(request,
'xmjc/xmjf.html'
,{
'lnav'
:lnav,
'lcontent'
:lcontent,
'data'
:data,
'data1'
:data1})
|
效果：
（4）扇形圖案例展現
新建頁面ksh.html，添加以下代碼
|
1
2
3
4
5
|
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div
class
=
"row"
>
<div
class
=
"col-md-6 "
id=
"test2"
style=
"width:600px;height:400px;margin:0 auto"
>
</div>
</div>
|
js代碼
View Code
效果
（5）表格案例展現
新建頁面ksh.html，添加以下代碼
<!-- DATA TABLES -->
<div class="row">
<div class="col-md-6">
<!-- BOX -->
<div class="box border green">
<div class="box-title">
<h4><i class="fa fa-table"></i>動態數據表格</h4>
<div class="tools hidden-xs">
<a href="javascript:;" class="reload">
<i class="fa fa-refresh"></i>
</a>
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
<a href="javascript:;" class="remove">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="box-body">
<table id="datatable1" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
<thead>
<tr>
<!-- hidden-lg/md/xs/sm -->
<th class="center">用戶名</th>
<th class="center">密碼</th>
<th class="center">郵箱</th>
<th class="center">權限</th>
</tr>
</thead>
<tbody id="tbody">
{% for user in data %}
<tr class="gradeB">
<td class="center">{{ user.username }}</td>
<td class="center">{{ user.userpass }}</td>
<td class="center">{{ user.useremail }}</td>
<td class="center">{{ user.usertype }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th class="center">用戶名</th>
<th class="center">密碼</th>
<th class="center">郵箱</th>
<th class="center">權限</th>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /BOX -->
</div>
</div>
效果
6 將項目上傳到github，進行項目管理
（1）下載：Git 各平臺安裝包下載地址爲：http://git-scm.com/downloads
|
1
|
pip install git-core
|
Windows 平臺上安裝包下載地址：http://msysgit.github.io/
（2）使用：Windows版Git下載安裝，在開始菜單裏找到Git->Git Bash
（3）配置你的名字和Email地址。
|
1
2
|
$ git config --global user.name
"Your Name"
$ git config --global user.email
"email@example.com"
|
（4）建立版本庫
|
1
2
3
4
|
$ cd /E
//你指定的我的盤符
$ mkdir mygit
//建立版本庫根目錄
$ cd mygit
//進入版本庫目錄
$ pwd
//查看當前路徑
|
(5) 將須要上傳的項目拷貝到版本庫即mygit裏面，查看
（6）經過git init命令把目錄變成Git能夠管理的倉庫
（7） mygit下建立xmjc_analysis，用命令git add告訴Git,把文件添加到倉庫
（8）用命令git commit提交到倉庫，-m本次提交的說明
（9）遠程鏈接倉庫
|
1
|
git remote add originbnc git@github.com:username/bncgit.git
|
（10）推送
|
1
|
git push -u originbnc master
|
（11）查看個人github
自此，完成所有初級學習，擴展處讀者自行學習。