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

假设你现在通过dome和相关书籍已经基本理解django这台机器的运行。下一步如何像asp.net、Jsp，PHP等常规网站开发，进行前后台交互呢？又如何采用较为简洁美观的前端框架进行设计呢？假设你需要配置多个数据库怎么办？静态文件单独存放需要哪些配置？针对这些配置有哪些便利？最后，假设你又是一名对数据开发很感兴趣的，且学过一些机器学习，数据挖掘，自然语言处理，云计算等技术之一，想挖掘分析数据并进行可视化，怎么办？本文就是针对这些问题开始的。

系统环境：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之后会默认识别

（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 %}

 （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下添加访问

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

 !-- 引入 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 id="sidebar" 

{% include xmjc/nav.html %}

/div
!-- /侧边栏 --

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

 div 

 {% block content %}

 p 此处为主要内容 /p 

 {% endblock %}

/div

（5）运行服务器访问

页面效果：

至此，已经完成静态页面的配置工作。

4 多数据库配置联合操作

（1）打开xmjc_analysis/setting.py，有一个默认的数据库 default,我们可以再加一些其它的（这里你可以调用Access、SQLServer、Oracle等），比如：

配置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,

},

}

# 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):

 /span span """

A router to control all database operations on models for different

databases.

In /span span case /span an app span is /span not span set /span span in /span span settings.DATABASE_APPS_MAPPING, the router

will fallback to the ` /span span default /span span ` database.

Settings example:

DATABASE_APPS_MAPPING /span = { span  /span span app1 /span span  /span : span  /span span db1 /span span  /span , span  /span span app2 /span span  /span : span  /span span db2 /span span  /span span }

 /span span """

def db_for_read(self, model, /span ** span hints):

 /span span """" /span Point all read operations to the specific database. span """

if model._meta.app_label in DATABASE_MAPPING:

 /span span return /span span DATABASE_MAPPING[model._meta.app_label]

 /span span return /span span None

def db_for_write(self, model, /span ** span hints):

 /span span """ /span span Point all write operations to the specific database. /span span """ /span 

 span if /span model._meta.app_label span in /span span DATABASE_MAPPING:

 /span span return /span span DATABASE_MAPPING[model._meta.app_label]

 /span span return /span span None

def allow_relation(self, obj1, obj2, /span ** span hints):

 /span span """ /span span Allow any relation between apps that use the same database. /span span """ /span span 

 db_obj1 /span = DATABASE_MAPPING. span get /span span (obj1._meta.app_label)

 db_obj2 /span = DATABASE_MAPPING. span get /span span (obj2._meta.app_label)

 /span span if /span span db_obj1 and db_obj2:

 /span span if /span db_obj1 == span db_obj2:

 /span span return /span span True

 /span span else /span span :

 /span span return /span span False

 /span span return /span span None

# /span span for /span Django span 1.4 /span - Django span 1.6 /span span 

def allow_syncdb(self, db, model):

 /span span """ /span span Make sure that apps only appear in the related database. /span span """ /span 

 span if /span db span in /span span DATABASE_MAPPING.values():

 /span span return /span DATABASE_MAPPING. span get /span (model._meta.app_label) == span db

 elif model._meta.app_label /span span in /span span DATABASE_MAPPING:

 /span span return /span span False

 /span span return /span span None

# Django /span span 1.7 /span - Django span 1.11 /span span 

def allow_migrate(self, db, app_label, model_name /span =None, ** span hints):

 print(db, app_label, model_name, hints)

 /span span if /span db span in /span span DATABASE_MAPPING.values():

 /span span return /span DATABASE_MAPPING. span get /span (app_label) == span db

 elif app_label /span span in /span span DATABASE_MAPPING:

 /span span return /span span False

 /span span return /span None /pre 

View Code

（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，添加如下代码

 !-- 为ECharts准备一个具备大小（宽高）的Dom -- 
 div 

 div id="test1" 

 /div 

/div

js代码：

/*
柱状图
白宁超
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数据，你可以通过数据挖掘技术后文本或者数据库梳理出绑定起来即可。如下所示：

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，添加如下代码

 !-- 为ECharts准备一个具备大小（宽高）的Dom -- 
 div 

 div id="test2" 

 /div 

/div

js代码

/*
嵌套环形图
白宁超
2017年8月4日17:21:03
*/
var myChart1 = echarts.init(document.getElementById(test2));

option1

= {

tooltip: {

 trigger: /span span  /span span item /span span  /span span ,

 formatter: /span span " /span span {a} br/ {b}: {c} ({d}%) /span span " /span span 

legend: {

 orient: /span span  /span span vertical /span span  /span span ,

 x: /span span  /span span left /span span  /span span ,

 data:[ /span span  /span span 直达 /span span  /span , span  /span span 营销广告 /span span  /span , span  /span span 搜索引擎 /span span  /span , span  /span span 邮件营销 /span span  /span , span  /span span 联盟广告 /span span  /span , span  /span span 视频广告 /span span  /span , span  /span span 百度 /span span  /span , span  /span span 谷歌 /span span  /span , span  /span span 必应 /span span  /span , span  /span span 其他 /span span  /span span ]

series: [

 name: /span span  /span span 访问来源 /span span  /span span ,

 type: /span span  /span span pie /span span  /span span ,

 selectedMode: /span span  /span span single /span span  /span span ,

 radius: [ /span span 0 /span , span  /span span 30% /span span  /span span ],

 label: {

 normal: {

 position: /span span  /span span inner /span span  /span span 

 labelLine: {

 normal: {

 show: /span span false /span span 

 data:[

 {value: /span span 335 /span , name: span  /span span 直达 /span span  /span , selected: span true /span span },

 {value: /span span 679 /span , name: span  /span span 营销广告 /span span  /span span },

 {value: /span span 1548 /span , name: span  /span span 搜索引擎 /span span  /span span }

 name: /span span  /span span 访问来源 /span span  /span span ,

 type: /span span  /span span pie /span span  /span span ,

 radius: [ /span span  /span span 40% /span span  /span , span  /span span 55% /span span  /span span ],

 data:[

 {value: /span span 335 /span , name: span  /span span 直达 /span span  /span span },

 {value: /span span 310 /span , name: span  /span span 邮件营销 /span span  /span span },

 {value: /span span 234 /span , name: span  /span span 联盟广告 /span span  /span span },

 {value: /span span 135 /span , name: span  /span span 视频广告 /span span  /span span },

 {value: /span span 1048 /span , name: span  /span span 百度 /span span  /span span },

 {value: /span span 251 /span , name: span  /span span 谷歌 /span span  /span span },

 {value: /span span 147 /span , name: span  /span span 必应 /span span  /span span },

 {value: /span span 102 /span , name: span  /span span 其他 /span span  /span span }

]

};
myChart1.setOption(option1);

View Code

效果

 

（5）表格案例展示

 新建页面ksh.html，添加如下代码

 !-- DATA TABLES -- 
 div 

 div span class /span = span " /span span col-md-6 /span span " /span 

 !-- BOX -- 

 div span class /span = span " /span span box border green /span span " /span 

 div span class /span = span " /span span box-title /span span " /span 

 h4 i span class /span = span " /span span fa fa-table /span span " /span /i 动态数据表格 /h4 

 div span class /span = span " /span span tools hidden-xs /span span " /span 

 a href= span " /span span javascript:; /span span " /span span class /span = span " /span span reload /span span " /span 

 i span class /span = span " /span span fa fa-refresh /span span " /span /i 

 a href= span " /span span javascript:; /span span " /span span class /span = span " /span span collapse /span span " /span 

 i span class /span = span " /span span fa fa-chevron-up /span span " /span /i 

 a href= span " /span span javascript:; /span span " /span span class /span = span " /span span remove /span span " /span 

 i span class /span = span " /span span fa fa-times /span span " /span /i 

 /div 

 /div 

 div span class /span = span " /span span box-body /span span " /span 

 table id= span " /span span datatable1 /span span " /span cellpadding= span " /span span 0 /span span " /span cellspacing= span " /span span 0 /span span " /span border= span " /span span 0 /span span " /span span class /span = span " /span span datatable table table-striped table-bordered table-hover /span span " /span 

 thead 

 !-- hidden-lg/md/xs/sm -- 

 th span class /span = span " /span span center /span span " /span 用户名 /th 

 th span class /span = span " /span span center /span span " /span 密码 /th 

 th span class /span = span " /span span center /span span " /span 邮箱 /th 

 th span class /span = span " /span span center /span span " /span 权限 /th 

 /tr 

 /thead 

 tbody id= span " /span span tbody /span span " /span span 

 { /span % span for /span user span in /span data % span }

 /span tr span class /span = span " /span span gradeB /span span " /span 

 td span class /span = span " /span span center /span span " /span {{ user.username }} /td 

 td span class /span = span " /span span center /span span " /span {{ user.userpass }} /td 

 td span class /span = span " /span span center /span span " /span {{ user.useremail }} /td 

 td span class /span = span " /span span center /span span " /span {{ user.usertype }} /td 

 /tr span 

 { /span % endfor % span }

 /span /tbody 

 tfoot 

 th span class /span = span " /span span center /span span " /span 用户名 /th 

 th span class /span = span " /span span center /span span " /span 密码 /th 

 th span class /span = span " /span span center /span span " /span 邮箱 /th 

 th span class /span = span " /span span center /span span " /span 权限 /th 

 /tr 

 /tfoot 

 /table 

 /div 

 /div 

 !-- /BOX -- 

 /div 

/div

View Code

效果

 

6 将项目上传到github，进行项目管理

（1）下载：Git 各平台安装包下载地址为：http://git-scm.com/downloads

pip install git-core

Windows 平台上安装包下载地址：http://msysgit.github.io/

（2）使用：Windows版Git下载安装，在开始菜单里找到Git- Git Bash

（3）配置你的名字和Email地址。

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

（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）远程连接仓库

git remote add originbnc git@github.com:username/bncgit.git

（10）推送

git push -u originbnc master

（11）查看我的github

 

 自此，完成全部初级学习，扩展处读者自行学习。

HelloDjango 系列教程：Django 迁移、操作数据库 HelloDjango 系列教程：Django 迁移、操作数据库 文中涉及的示例代码，已同步更新到 HelloGitHub-Team 仓库 我们已经编写了博客数据库模型的代码，但那还只是 Python 代码而已，django 还没有把它翻译成数据库语言，因此实际上这些数据库表还没有真正的在数据库中创建。
HelloDjango 系列教程：创建 Django 博客的数据库模型 HelloDjango 系列教程：创建 Django 博客的数据库模型文中涉及的示例代码，已同步更新到 HelloGitHub-Team 仓库 设计博客的数据库表结构博客最主要的功能就是展示我们写的文章，它需要从某个地方获取博客文章数据才能把文章展示出来，通常来说这个地方就是数据库。
号称简明实用的Django上手教程 Django的学习教程也是分门别类，形式不一。或是较为体系的官方文档，或者风格自由的博客文档，或者偏向实例的解析文档。即使官方文档，章节较多，文字阐述累赘，有时候我们只是关注某个功能用法而已，而自由博文最大的问题是互相抄袭，结构混乱，涵盖面小且错误较为明显。
伏草惟存 白宁超主页【https://bainingchao.github.io/】，工学硕士，研究方向是自然语言处理和机器学习。曾参与国家自然基金项目和四川省科技支撑计划等多个省级项目。著有《自然语言处理理论与实战》一书。 自然语言处理与机器学习技术交流群号：436303759。