【秒懂】号称最为简明实用的Django上手教程（下）

2017年8月25日08:51:58

摘要：上文号称【最为简明实用的Django上手教程】介绍了django基本概念、配置和相关操作。相信通过上文的阅读，基本明白django运行机制和操作。假设你现在通过dome和相关书籍已经基本理解django这台机器的运行。下一步如何像asp.net、Jsp，PHP等常规网站开发，进行前后台交互呢？又如何采用较为简洁美观的前端框架进行设计呢？假设你需要配置多个数据库怎么办？静态文件单独存放需要哪些配置？针对这些配置有哪些便利？最后，假设你又是一名对数据开发很感兴趣的，且学过一些机器学习，数据挖掘，自然语言处理，云计算等技术之一，想挖掘分析数据并进行可视化，怎么办？本文就是针对这些问题开始的。（本文原创编著，转载注明出处:号称最为简明实用的Django上手教程（下））

1 前景回顾

系统环境：WIN10 64bit

开发环境：sublime+Anaconda
数据库：Mysql 5.6.17
语言：python3.5
框架：django1.11+Bootstrap
可视化工具：Highchart|Echarts|plotly|Bokeh（采用Echarts）

2 静态文件配置操作

（1）静态static文件夹的配置。

在analysis文件夹下创建：analysis/static和analysis/templates文件夹，其中：

① static：包括，css，js，img，font，files等文件，使用时需要配置，页面开头添加{% load static %}

② templates：包含web的html静态页面，django1.10之后会默认识别

【秒懂】号称最为简明实用的Django上手教程（下）

（2）打开xmjc_analysis/setting.py修改如下：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")

（3）打开xmjc_analysis/urls.py修改如下：

# 配置加载静态页面
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 %}

【秒懂】号称最为简明实用的Django上手教程（下）

（5 ）xmjc_analysis/views.py修改如下：

'''
第一个页面
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下添加访问

【秒懂】号称最为简明实用的Django上手教程（下）

前端nav.html的超链接如下：

【秒懂】号称最为简明实用的Django上手教程（下）

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

<!-- 引入 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>

<!-- 精简版 -->
<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文件放在页面尾部，提高用户体验）

侧边栏 引用③文件，便于修改和管理。

<!-- 侧边栏 -->
<div >
    {% include 'xmjc/nav.html' %}
</div>
<!-- /侧边栏 -->

页面内容设计 {% block content %}{% endblock %}占块符号

<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>

View Code