您的位置:威尼斯官方网站 > 威尼斯正规官网 > 【威尼斯官方网站】这个例子会显示如何从mong

【威尼斯官方网站】这个例子会显示如何从mong

发布时间:2019-09-02 14:50编辑:威尼斯正规官网浏览(124)

    django的基本用法,django用法

    1、项目创建

    # 新建一个文件夹DjangoProjects
    # 切换到需要的文件夹创建虚拟环境
    C:ProjectsDjangoProjects>python -m venv test_venv
    
    # 激活虚拟环境
    C:ProjectsDjangoProjects>test_venvScriptsactivate.bat
    # 激活后会在前面添加虚拟环境作为前缀,如下所示
    (test_venv) C:ProjectsDjangoProjects>
    
    # 安装django,会安装到虚拟环境的site-packages中
    (test_venv) C:ProjectsDjangoProjects>pip3 install django
    
    # 新建项目
    (test_venv) C:ProjectsDjangoProjects>django-admin.py startproject testsite
    
    # 这时就可以启动开发服务器了,注意先切换到项目文件夹
    (test_venv) C:ProjectsDjangoProjects>cd testsite
    (test_venv) C:ProjectsDjangoProjectstestsite>python manage.py runserver
    
    # 创建应用
    (test_venv) C:ProjectsDjangoProjectstestsite>python manage.py startapp testblog
    

    2、添加常用文件夹

    一般名称为static与templates,在新版本中需要手动添加,static用于静态资源,templates用于存放模板文件。以下是创建好之后的目录,注意在新建的项目testsite目录(上面创建时使用的名称)下面,还会有一个testsite文件夹。

    威尼斯官方网站 1

    3、一个用于说明如何使用django的例子

     结合上面创建的目录和应用,这个例子会显示如何从mongodb中提取数据,并在前端怎样使用highcharts将数据呈现出来。

    django的用法比较简单,理解关键的文件是重点。

    1> settings.py文件

    顾名思义,这是django的设置文件对于这个例子来说,位于testsite目录所包含的testsite文件夹中。

    STATIC_URL = '/static/' # 说明使用static文件夹作为静态资源的文件夹
    STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),) # 如何找到static文件夹,这个必须有,要不然Django是找不到文件夹的位置的
    
    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            # 添加,如何找到templates文件夹
            'DIRS': [os.path.join(BASE_DIR, 'templates')],
             # 从略...
        },
    
    
    from mongoengine import connect
    # 第一个参数是数据库
    connect('test', host='192.168.1.108', port=27017)
    # 如需验证和指定主机名
    # connect('blog', host='192.168.125.1', username='root', password='12345')
    

    以上给出了部分代码,注意上面蓝色显示的部分,一方面,表明了上面创建的static与templates文件夹是如何使用的,另一方面表明了连接mongodb的一种方式。
    注意使用mongoengine需要先进行安装: pip3 install mongoengine

    2> urls.py

    路由在这个文件中设置,文件位于testsite目录所包含的testsite文件夹中。

    from django.conf.urls import url
    from django.contrib import admin
    # 注意这两种写法
    from testblog import views
    from testblog.views import house, chart
    
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^index/', views.index),
        url(r'^house/', house),
        url(r'^chart/', chart),
    ]
    

    在上面的url中,前面一个是正则表达式,后面一个是views.py(下面介绍)中的函数。

    例如,当我们访问 127.0.0.1:8000/chart/ 这个页面时,django会通过views.py中设置的自定义的chart函数来处理请求。

    3> views.py

    这个文件用来封装处理请求的各种函数,本项目系统会自动创建在位于testblog文件目录下面,testblog是上面创建的应用名称。

    from django.shortcuts import render
    from django.core.paginator import Paginator
    from testblog.models import SalesInfo
    # Create your views here.
    
    # 地区销售总额
    # 因为要构建highcharts需要的数据,地区要有固定的顺序,需要排序
    # x轴:地区 
    # y轴:销售额 
    def area_sales(cate):
        pipeline = [
        {'$match': {'$and': [{'category': {'$in':cate}}, {'province': {'$in': ['山东','浙江','江苏','河北','辽宁']}}]}},
        {'$group': { '_id': '$province',  'sum_sales': {'$sum': {'$multiply': ['$price', '$quantity'] }}}},
        {'$sort': {'_id': 1}}
        ]
        # SalesInfo在models中设置
        for i in SalesInfo._get_collection().aggregate(pipeline):
            print(i)
            data = {
                'name': i['_id'],
                'y': i['sum_sales']
            }
            yield data
    
    # 对于各地区的排序,与种类无关,此处传了参数“粮食”,使用其他种类是一样的        
    c=[i['name'] for i in area_sales(['粮食'])]
    # 也可以使用下面的方式获取排序
    cate = ['山东','浙江','江苏','河北','辽宁']
    b = sorted(cate)
    
    # 用于y轴的数据
    sg_sales = [i for i in area_sales(['水果'])]
    ls_sales = [i for i in area_sales(['粮食'])]
    sc_sales = [i for i in area_sales(['蔬菜'])]
    
    
    def chart(request):
        context = {        
            'sg_sales': sg_sales,
            'ls_sales': ls_sales,
            'sc_sales': sc_sales,
            'area': c
        }
        return render(request,'charts.html',context)
    

    上面是关键部分的代码,主要是chart函数,这个自定义的函数通过render函数将请求“request”,页面(所谓的模板)“charts.html”,数据“context”连接起来。

    毫无疑问,render函数是关键的一环(来源:from django.shortcuts import render)

    area_sales这个生成器函数用于产生y轴需要的数据,仅是为了说明如何构造highcharts图表所需要的数据。里面用到的SalesInfo是在models.py文件中设置的。

    4> models.py

    用于设置一些ORM对象模型,位于testblog文件目录下面

    from django.db import models
    from mongoengine import *
    
    # Create your models here.
    # 数据来源于mongodb,需要继承自Document
    class SalesInfo(Document):
        _id = StringField()
        name = StringField()
        category = StringField()
        province = StringField()
        description = StringField()
        price = FloatField()
        quantity = IntField()
        unit = StringField()
        saledate = StringField()
        # 对应数据库中的数据表
        meta = {'collection':'salesnew'}
    

    5> 模板

    一系列的html页面,统一放置在templates文件目录下面,页面所需要的js、图片、css样式则存放到static文件夹下面。可以将页面中一些公用的元素拿出来作为主模板,方便重用。

    A、主模板base.html

    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="{% static 'css/semantic.css' %} ">
        <script src="{% static 'js/jquery-3.1.1.js' %}"></script>
        <script src="{% static 'js/semantic.js' %}"></script>
        <!--<script src="{% static 'js/exporting.js' %}"></script>-->
        <script src="{% static 'js/highcharts.js' %}"></script>
        <script src="{% static 'js/highcharts-more.js' %}"></script>
    </head>
    <body>
    <div class="ui thin visible left sidebar inverted vertical menu">
        <div class="header item">
            <img src="../static/themes/default/assets/images/logo2.png">
        </div>
    
        <div class="item">
            Documents
            <i class="browser icon"></i>
        </div>
        <div class="item">
            Charts
            <i class="bar chart icon"></i>
        </div>
        <div class="item">
            Others
            <i class="idea icon"></i>
        </div>
    </div>
    <div class="pusher">
        <div class="ui menu">
            <div class="header item" id="menu">
                Menu
                <i class="content icon"></i>
            </div>
            <div class="item">About us</div>
            <div class="item">Location</div>
            <div class="item">Others</div>
        </div>
    
        {% block area %}{% endblock %}
    
        </div>
    </div>
    
    
    <script>
        $('#menu').click(function(){
            $('.ui.sidebar').sidebar('toggle');
        })
    </script>
    
    {% block script %}{% endblock %}
    
    </body>
    </html>
    

    如上,{% load static %} 用来标识会加载static文件目录中的内容

    <link rel="stylesheet" href="{% static 'css/semantic.css' %} ">、script src="{% static 'js/highcharts.js' %}"></script> 、<script src="{% static 'js/highcharts-more.js' %}"></script> 表明了django中加载资源的方式 highcharts.js与highcharts-more.js是使用hightcharts图表所需要的,可以到hightcharts官网下载。

    {% block area %}{% endblock %}来标识如何使用部件,可以看作是占位符。其中area是自定义的名称。

    B、页面 charts.html

    {% extends 'base.html' %}
    {% block area %}
    <div class="ui equal width grid" style="margin:5px 0 5px 0;width:70%">
       <div class="row">
          <div class="column">
            <div class="ui container segment">
              <div class="ui container" id="chart2"></div>
            </div>
          </div>
        </div>
    </div>
    {% endblock %}
    
    {% block script %}
        <script>
            $(function () {
            // Create the chart
             $('#chart2').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '各地区销售情况'
                    },
                    subtitle: {
                        text: 'Source: WorldSales'
                    },
                    xAxis: {
                        categories: {{area|safe}},
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '金额 (元)'
                        }
                    },
                    tooltip: {
                        headerFormat: '',
                        pointFormat: '<tr><td>'  
                        '<td>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        name: '水果',
                        data: {{ sg_sales|safe }}
                    }, {
                        name: '粮食',
                        data: {{ ls_sales|safe }}
                    }, {
                        name: '蔬菜',
                        data: {{ sc_sales|safe }}
                    }]
                });
        });
        </script>
    {% endblock %}
    

    {% extends 'base.html' %}表明继承自base.html

    {% block area %}{% endblock %}包含了页面的主要代码

    {% block script %}{% endblock %}包含了highcharts图表用到的代码,这个可以直接从highcharts官方网站复制。

    需要做的只是改变js中的数据源,主要的,如用于x轴的 categories: {{area|safe}},用于y轴的 data: {{ ls_sales|safe }},注意{{变量名}}是django在模板中加载变量的方式。当然,也可以换种方式,用js来填充数据,这个可以参考highcharts官网的文档。

    6> 结果

    在控制台中运行

    (test_venv) C:ProjectsDjangoProjectstestsite>python manage.py runserver

    会开启开发服务器,并得到一个网址127.0.0.1:8000威尼斯官方网站,,访问 127.0.0.1:8000/chart/ 会看到下面的结果:

     

    威尼斯官方网站 2

    当然,数据的可视化也可使用百度的echarts。参见

    总结

    以上简要的介绍了django的使用方法,包括环境的搭建,以及一个具体的例子。  

    1、项目创建 # 新建一个文件夹 DjangoProjects # 切换到需要的文件夹创建虚拟环境C:ProjectsDjangoProjects python - m ve...

    本文由威尼斯官方网站发布于威尼斯正规官网,转载请注明出处:【威尼斯官方网站】这个例子会显示如何从mong

    关键词:

上一篇:value能够接纳任性等级次序 2

下一篇:没有了