号称最为简明实用的Django上手教程(下)

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 假设你现在通过dome和相关书籍已经基本理解django这台机器的运行。下一步如何像asp.net、Jsp,PHP等常规网站开发,进行前后台交互呢?又如何采用较为简洁美观的前端框架进行设计呢?假设你需要配置多个数据库怎么办?静态文件单独存放需要哪些配置?针对这些配置有哪些便利?最后,假设你又是一名对数据开发很感兴趣的,且学过一些机器学习,数据挖掘,自然语言处理,云计算等技术之一,想挖掘分析数据并进行可视化,怎么办?本文就是针对这些问题开始的。

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之后会默认识别



(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" class="sidebar">
{% include 'xmjc/nav.html' %}

</div>
<!-- /侧边栏 -->



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



<div class="row col-lg-12">
     {% block content %}
         &lt;p&gt;此处为主要内容&lt;/p&gt;
      {% 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 style="color: #800000;">"""

A router to control all database operations on models for different
databases.

In </span><span style="color: #0000ff;">case</span> an app <span style="color: #0000ff;">is</span> not <span style="color: #0000ff;">set</span> <span style="color: #0000ff;">in</span><span style="color: #000000;"> settings.DATABASE_APPS_MAPPING, the router
will fallback to the `</span><span style="color: #0000ff;">default</span><span style="color: #000000;">` database.

Settings example:

DATABASE_APPS_MAPPING </span>= {<span style="color: #800000;">'</span><span style="color: #800000;">app1</span><span style="color: #800000;">'</span>: <span style="color: #800000;">'</span><span style="color: #800000;">db1</span><span style="color: #800000;">'</span>, <span style="color: #800000;">'</span><span style="color: #800000;">app2</span><span style="color: #800000;">'</span>: <span style="color: #800000;">'</span><span style="color: #800000;">db2</span><span style="color: #800000;">'</span><span style="color: #000000;">}
</span><span style="color: #800000;">"""

def db_for_read(self, model, </span>**<span style="color: #000000;">hints):
    </span><span style="color: #800000;">""""</span>Point all read operations to the specific database.<span style="color: #800000;">"""

if model._meta.app_label in DATABASE_MAPPING:
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> DATABASE_MAPPING[model._meta.app_label]
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> None

def db_for_write(self, model, </span>**<span style="color: #000000;">hints):
    </span><span style="color: #800000;">"""</span><span style="color: #800000;">Point all write operations to the specific database.</span><span style="color: #800000;">"""</span>
    <span style="color: #0000ff;">if</span> model._meta.app_label <span style="color: #0000ff;">in</span><span style="color: #000000;"> DATABASE_MAPPING:
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> DATABASE_MAPPING[model._meta.app_label]
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> None

def allow_relation(self, obj1, obj2, </span>**<span style="color: #000000;">hints):
    </span><span style="color: #800000;">"""</span><span style="color: #800000;">Allow any relation between apps that use the same database.</span><span style="color: #800000;">"""</span><span style="color: #000000;">
    db_obj1 </span>= DATABASE_MAPPING.<span style="color: #0000ff;">get</span><span style="color: #000000;">(obj1._meta.app_label)
    db_obj2 </span>= DATABASE_MAPPING.<span style="color: #0000ff;">get</span><span style="color: #000000;">(obj2._meta.app_label)
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> db_obj1 and db_obj2:
        </span><span style="color: #0000ff;">if</span> db_obj1 ==<span style="color: #000000;"> db_obj2:
            </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> True
        </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
            </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> False
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> None

# </span><span style="color: #0000ff;">for</span> Django <span style="color: #800080;">1.4</span> - Django <span style="color: #800080;">1.6</span><span style="color: #000000;">
def allow_syncdb(self, db, model):
    </span><span style="color: #800000;">"""</span><span style="color: #800000;">Make sure that apps only appear in the related database.</span><span style="color: #800000;">"""</span>

    <span style="color: #0000ff;">if</span> db <span style="color: #0000ff;">in</span><span style="color: #000000;"> DATABASE_MAPPING.values():
        </span><span style="color: #0000ff;">return</span> DATABASE_MAPPING.<span style="color: #0000ff;">get</span>(model._meta.app_label) ==<span style="color: #000000;"> db
    elif model._meta.app_label </span><span style="color: #0000ff;">in</span><span style="color: #000000;"> DATABASE_MAPPING:
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> False
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> None

# Django </span><span style="color: #800080;">1.7</span> - Django <span style="color: #800080;">1.11</span><span style="color: #000000;">
def allow_migrate(self, db, app_label, model_name</span>=None, **<span style="color: #000000;">hints):
    print(db, app_label, model_name, hints)
    </span><span style="color: #0000ff;">if</span> db <span style="color: #0000ff;">in</span><span style="color: #000000;"> DATABASE_MAPPING.values():
        </span><span style="color: #0000ff;">return</span> DATABASE_MAPPING.<span style="color: #0000ff;">get</span>(app_label) ==<span style="color: #000000;"> db
    elif app_label </span><span style="color: #0000ff;">in</span><span style="color: #000000;"> DATABASE_MAPPING:
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> False
    </span><span style="color: #0000ff;">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 class="row">
&lt;div class="col-md-6 " id="test1" style="width:600px;height:400px;margin:0 auto"&gt;
&lt;/div&gt;

</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 = "这里是可视化主题的描述-&gt;项目经费统计" # 可视化主题的描述

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 class="row">
&lt;div class="col-md-6 " id="test2" style="width:600px;height:400px;margin:0 auto"&gt;
&lt;/div&gt;

</div>



js代码




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

option1

= {
tooltip: {
    trigger: </span><span style="color: #800000;">'</span><span style="color: #800000;">item</span><span style="color: #800000;">'</span><span style="color: #000000;">,
    formatter: </span><span style="color: #800000;">"</span><span style="color: #800000;">{a} &lt;br/&gt;{b}: {c} ({d}%)</span><span style="color: #800000;">"</span><span style="color: #000000;">
},
legend: {
    orient: </span><span style="color: #800000;">'</span><span style="color: #800000;">vertical</span><span style="color: #800000;">'</span><span style="color: #000000;">,
    x: </span><span style="color: #800000;">'</span><span style="color: #800000;">left</span><span style="color: #800000;">'</span><span style="color: #000000;">,
    data:[</span><span style="color: #800000;">'</span><span style="color: #800000;">直达</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">营销广告</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">搜索引擎</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">邮件营销</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">联盟广告</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">视频广告</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">百度</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">谷歌</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">必应</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">其他</span><span style="color: #800000;">'</span><span style="color: #000000;">]
},
series: [
    {
        name:</span><span style="color: #800000;">'</span><span style="color: #800000;">访问来源</span><span style="color: #800000;">'</span><span style="color: #000000;">,
        type:</span><span style="color: #800000;">'</span><span style="color: #800000;">pie</span><span style="color: #800000;">'</span><span style="color: #000000;">,
        selectedMode: </span><span style="color: #800000;">'</span><span style="color: #800000;">single</span><span style="color: #800000;">'</span><span style="color: #000000;">,
        radius: [</span><span style="color: #800080;">0</span>, <span style="color: #800000;">'</span><span style="color: #800000;">30%</span><span style="color: #800000;">'</span><span style="color: #000000;">],

        label: {
            normal: {
                position: </span><span style="color: #800000;">'</span><span style="color: #800000;">inner</span><span style="color: #800000;">'</span><span style="color: #000000;">
            }
        },
        labelLine: {
            normal: {
                show: </span><span style="color: #0000ff;">false</span><span style="color: #000000;">
            }
        },
        data:[
            {value:</span><span style="color: #800080;">335</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">直达</span><span style="color: #800000;">'</span>, selected:<span style="color: #0000ff;">true</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">679</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">营销广告</span><span style="color: #800000;">'</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">1548</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">搜索引擎</span><span style="color: #800000;">'</span><span style="color: #000000;">}
        ]
    },
    {
        name:</span><span style="color: #800000;">'</span><span style="color: #800000;">访问来源</span><span style="color: #800000;">'</span><span style="color: #000000;">,
        type:</span><span style="color: #800000;">'</span><span style="color: #800000;">pie</span><span style="color: #800000;">'</span><span style="color: #000000;">,
        radius: [</span><span style="color: #800000;">'</span><span style="color: #800000;">40%</span><span style="color: #800000;">'</span>, <span style="color: #800000;">'</span><span style="color: #800000;">55%</span><span style="color: #800000;">'</span><span style="color: #000000;">],

        data:[
            {value:</span><span style="color: #800080;">335</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">直达</span><span style="color: #800000;">'</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">310</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">邮件营销</span><span style="color: #800000;">'</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">234</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">联盟广告</span><span style="color: #800000;">'</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">135</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">视频广告</span><span style="color: #800000;">'</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">1048</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">百度</span><span style="color: #800000;">'</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">251</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">谷歌</span><span style="color: #800000;">'</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">147</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">必应</span><span style="color: #800000;">'</span><span style="color: #000000;">},
            {value:</span><span style="color: #800080;">102</span>, name:<span style="color: #800000;">'</span><span style="color: #800000;">其他</span><span style="color: #800000;">'</span><span style="color: #000000;">}
        ]
    }
]

};
myChart1.setOption(option1);



View Code

效果


 


(5)表格案例展示


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




<!-- DATA TABLES -->
<div class="row">
&lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">col-md-6</span><span style="color: #800000;">"</span>&gt;
    &lt;!-- BOX --&gt;
    &lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">box border green</span><span style="color: #800000;">"</span>&gt;
        &lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">box-title</span><span style="color: #800000;">"</span>&gt;
            &lt;h4&gt;&lt;i <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">fa fa-table</span><span style="color: #800000;">"</span>&gt;&lt;/i&gt;动态数据表格&lt;/h4&gt;
            &lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">tools hidden-xs</span><span style="color: #800000;">"</span>&gt;
                &lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">javascript:;</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">reload</span><span style="color: #800000;">"</span>&gt;
                    &lt;i <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">fa fa-refresh</span><span style="color: #800000;">"</span>&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">javascript:;</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">collapse</span><span style="color: #800000;">"</span>&gt;
                    &lt;i <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">fa fa-chevron-up</span><span style="color: #800000;">"</span>&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">javascript:;</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">remove</span><span style="color: #800000;">"</span>&gt;
                    &lt;i <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">fa fa-times</span><span style="color: #800000;">"</span>&gt;&lt;/i&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">box-body</span><span style="color: #800000;">"</span>&gt;
            &lt;table id=<span style="color: #800000;">"</span><span style="color: #800000;">datatable1</span><span style="color: #800000;">"</span> cellpadding=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> cellspacing=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> border=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">datatable table table-striped table-bordered table-hover</span><span style="color: #800000;">"</span>&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;!-- hidden-lg/md/xs/sm --&gt;
                        &lt;th <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;用户名&lt;/th&gt;
                        &lt;th <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;密码&lt;/th&gt;
                        &lt;th <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;邮箱&lt;/th&gt;
                        &lt;th <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;权限&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody id=<span style="color: #800000;">"</span><span style="color: #800000;">tbody</span><span style="color: #800000;">"</span>&gt;<span style="color: #000000;">
                    {</span>%  <span style="color: #0000ff;">for</span> user <span style="color: #0000ff;">in</span> data %<span style="color: #000000;">}
                    </span>&lt;tr <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">gradeB</span><span style="color: #800000;">"</span>&gt;
                        &lt;td <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;{{ user.username }}&lt;/td&gt;
                        &lt;td <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;{{ user.userpass }}&lt;/td&gt;
                        &lt;td <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;{{ user.useremail }}&lt;/td&gt;
                        &lt;td <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;{{ user.usertype }}&lt;/td&gt;
                    &lt;/tr&gt;<span style="color: #000000;">
                    {</span>% endfor %<span style="color: #000000;">}
                </span>&lt;/tbody&gt;
                &lt;tfoot&gt;
                    &lt;tr&gt;
                        &lt;th <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;用户名&lt;/th&gt;
                        &lt;th <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;密码&lt;/th&gt;
                        &lt;th <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;邮箱&lt;/th&gt;
                        &lt;th <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">center</span><span style="color: #800000;">"</span>&gt;权限&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/tfoot&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /BOX --&gt;
&lt;/div&gt;

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


 


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

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
7月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
166 2
|
7月前
|
存储 安全 网络协议
Python 教程之 Django(9)对模型中的字段进行验证
Python 教程之 Django(9)对模型中的字段进行验证
63 0
Python 教程之 Django(9)对模型中的字段进行验证
|
7月前
|
API 数据库 Python
Python 教程之 Django(8)在 Django 管理界面中渲染模型
Python 教程之 Django(8)在 Django 管理界面中渲染模型
51 0
Python 教程之 Django(8)在 Django 管理界面中渲染模型
|
7月前
|
SQL 前端开发 JavaScript
Python 教程之 Django(10)模板
Python 教程之 Django(10)模板
67 0
|
7月前
|
SQL 存储 API
Python 教程之 Django(7)Django 模型
Python 教程之 Django(7)Django 模型
86 1
Python 教程之 Django(7)Django 模型
|
4月前
|
前端开发 JavaScript 数据库
python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
|
4月前
|
SQL Shell API
python Django教程 之 模型(数据库)、自定义Field、数据表更改、QuerySet API
python Django教程 之 模型(数据库)、自定义Field、数据表更改、QuerySet API
|
4月前
|
Linux Shell 数据库
python Django教程 之 安装、基本命令、视图与网站
python Django教程 之 安装、基本命令、视图与网站
|
6月前
|
SQL 前端开发 关系型数据库
28. Python Web 编程:Django 基础教程
28. Python Web 编程:Django 基础教程
54 2
|
7月前
|
存储 中间件 数据安全/隐私保护
Django教程第3章 | Web开发实战-登录
登录案例、Djiango中间件【2月更文挑战第23天】
133 2
Django教程第3章 | Web开发实战-登录