python 爬虫 第四周:django搭建网站

1、安装django

2、在虚拟环境中创建Django项目

3、Django的设置与管理

pip3 install django

pycharm新建的话,只有专业版本才能在虚拟环境创建,

inherit glob 是否继承全局配置

location 修改最后的名字为test_jango

点开moresetting 里面填上ceshi,点击创建

另外一种是命令创建,不做赘述

manage.py是django的命令行工具

python manage.py command

或者 python manage.py help

下面我们使用manage.py启动服务器

terminal 直接到路径

python manage.py migrate

python manage.py runserver

打开输入localhost:8000即可

如果改动文件,需要重新运行

python manage.py runserver

2)把django app加入设置,

每一个django project里面有很多django apps,这里的app不是手机app,而是application应用

根据功能分成不同app

比如facebook网站有这样apps。 accounts 账号 friends 好友 时间线管理 timeline 时间线 news 动态消息

这样里面的app可以重复使用,ceshi就是这样的一个app

在test_django里面打开setting,找到installed_app 把测试添加进去

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ceshi.apps.CeshiConfig',
]

上面的是自动添加的

设置Django管理后台, 默认以app形式存在叫做Django Admin

在pycharm的terminal里面输入

python manage.py createsuperuser

会弹出让输入用户名、邮件、密码要记住

然后就可以访问localhost:8000/admin

一、理解MTV

request response

url ===views 视图 ===models 托管数据 ==templates 模板

MTV  vs  MVC 基于后者

可以自己创建一个env,然后设置名称 路径 是否继承整体环境

template 模板 里面什么都没有

manage创建 

python manage.py startapp django_web 手动查看

倒推法

template里面新建html  index

view.py里面

# Create your views here.
def index(request):
    return render(request,'index.html')

urls.py 里面重写url_patterns

from django.contrib import admin
from django.urls import path
from ceshi.views import index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', index)
]
# 类似于?page=1 可以^index 结尾

python manage.py runserver

配置完上面那之后,默认的界面消失,只能访问index和admin

引入CSS:

1、新建static平行于template

2、查看setting

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

添加下面一行 可以帮助解析文件路径

3、在html页面首行添加

{#{}{}{}.formate(1,2,3)#}
{% load static %}
{% comment %}获取所有静态文件
new_blash.css
更改为 {% static 'new_blash.css' %}
{% endcomment %}

<link rel="stylesheet" type="text/css" href="{% static 'css/ceshi.css' %}">

Django project  下面下辖需要app,他有自己的模板语言

###使用分页符列表页 分页展示

1、理解上下文

2、使用模板语言

3、制作分页器

render(request,x.html,context)

 context 将数据库映射到网页上

# Create your views here.
# def index(request):
#     return render(request,'index.html')
def index(request):
    context = {
        'title':'just a title',
        'desc':'just a desc',
        'score':'1.0'
    }
    return render(request,'index.html',context)

改造模板

{#{}{}{}.formate(1,2,3)#}
{% load static %}
{% comment %}获取所有静态文件
new_blash.css
更改为 {% static 'new_blash.css' %}
{% endcomment %}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/ceshi.css' %}">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <ul>
        <li>
            <div>
                <h1>{{ title }}</h1>
                <p>{{ desc }}</p>
            </div>
            <div>{{ score }}</div>
        </li>
    </ul>
</div>
</body>
</html>

db.sqllite3可以用

配置setting

from mongoengine import connect
connect('ceshi', host='127.0.0.1', port=27017,username='root', password='root',authentication_source='admin',)

model.py

# Create your models here.
from mongoengine import *
from mongoengine import connect
# connect(db='ceshi',alias='default',host='127.0.0.1', port=27017,username='root', password='root',authentication_source='admin',)
connect('ceshi',host='127.0.0.1', port=27017,username='root', password='root',authentication_source='admin',)
# 必须有host 因为有 db alias host 三个字段,他无法自动识别
# pmongo是mongodb开发的
# ORM django开发了mongoengine
class ArtiInfo(Document):
    # 驼峰计算法,后面是继承
    # doucumen必须包含所有的字段,而且字段必须严格一致,否则会报错
    person = StringField()
    # des等同数据库的表
    title = StringField()
    date = StringField()
    price = StringField()
    url = StringField()
    area = ListField(StringField())

    # desc = StringField()
    # title = StringField()
    # scores = StringField()
    # tags = ListField(StringField())

    meta = {
        'collection': 'item_info_copy1'
    }
    # meta仅限于数据库已经存在,取数据

for i in ArtiInfo.objects[:10]:
    # : 10取10个
    print(i.url, i.area)

view.py

from django.shortcuts import render

# def index(request):
#     return render(request,'index.html')
from ceshi.models import ArtiInfo


# def index(request):
#     context = {
#         'title':'just a title',
#         'desc':'just a desc',
#         'score':'1.0'
#     }
#     return render(request,'index.html',context)

def index(request):
    arti_info = ArtiInfo.objects[:1]
    context = {
        'title': arti_info[0].title,
        'desc': arti_info[0].person,
        'score': arti_info[0].date
    }
    return render(request,'index.html',context)

index.html不变即可

下一步开始分页

view.py

from django.shortcuts import render

# def index(request):
#     return render(request,'index.html')
from ceshi.models import ArtiInfo
from django.core.paginator import Paginator

# def index(request):
#     context = {
#         'title':'just a title',
#         'desc':'just a desc',
#         'score':'1.0'
#     }
#     return render(request,'index.html',context)

# def index(request):
#     arti_info = ArtiInfo.objects[:1]
#     context = {
#         'title': arti_info[0].title,
#         'desc': arti_info[0].person,
#         'score': arti_info[0].date
#     }
#     return render(request,'index.html',context)

# iter = 'abcdefghijklmn'
# paginator = Paginator(iter,4)
# #print(paginator.page(1))
# #<Page 1 of 4>
# page1 = paginator.get_page(1)
# print(page1.object_list)
# page1.has_next()
# page1.number
# page1.paginator.num_pages

def index(request):
    limit = 4
    arti_info = ArtiInfo.objects[:10]
    paginatior = Paginator(arti_info,limit)
    page = request.GET.get('page',1)
    # print(request)
    # print(request.GET)
    # < WSGIRequest: GET '/index/' >
    # < QueryDict: {} >
    # < WSGIRequest: GET    '/index/?page=3' >
    # < QueryDict: {'page': ['3']} >
    #用request 变成一个页面,然后把这个数字输入loader
    loaded = paginatior.page(page)
    context = {
        'ArtiInfo':loaded
    }
    return render(request,'index.html',context)

改造index.html

{#{}{}{}.formate(1,2,3)#}
{% load static %}
{% comment %}获取所有静态文件
new_blash.css
更改为 {% static 'new_blash.css' %}
{% endcomment %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/ceshi.css' %}">
</head>
<body>
<div>
    <ul>
        {% for item in ArtiInfo %}
            <li>
                <div>
                    <h1>{{ item.title }}</h1>
                    <p>
                        {% for j in item.area %}
                            {{ j }}
                            {% endfor %}
                    </p>
                    <p>{{ item.person }}</p>
                </div>
                <div>{{ item.date }}</div>
            </li>
        {% endfor %}
    </ul>
    <div>
        {% if ArtiInfo.has_previous %}
        <a href="?page={{ ArtiInfo.previous_page_number }}">Pre</a>
    {% endif %}
        <span> {{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }}</span>
        {% if ArtiInfo.has_next %}
        <a href="?page={{ ArtiInfo.next_page_number }}">Next</a>
        {% endif %}
    </div>
</div>
</body>
</body>
</html>

加分页完毕

Semantic  UI 

 有别于bootstrap web基本是全面的

https://semantic-ui.com/ 好慢的说

当用到font时,可以搜搜font-face,修改src

url("themes/default/assets/fonts/icons.eot

修改为../fonts/  替换所有

其他的就是已下载2.4的最新版本包,引入ide,代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/semantic.min.css' %}">
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    {# jquery一要在前面 #}
    <script src="{% static 'js/semantic.min.js' %}"></script>
</head>
<body>
<div class="ui  thin left sidebar inverted vertical menu">
    {# inverted表示反色 visible 表示可见与hide组队 和toggle相反#}
    <div class="header item">
        <img src="imaes/logo2.png">
    </div>
    <div class="item">
        Document
        <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">
    {# pusher 是sidebar的需要 推出来的东西 #}
    <div class="ui menu">
        <div class="header item" id="menu">Menu
            <i class="content icon"></i>
        </div>
        <div class="item">
            abous us
        </div>
        <div class="item">
            location
        </div>
        <div class="item">
            others
        </div>
    </div>
    {#        <div class="ui text container segment">#}
    <div class="ui  container ">
        <div class="ui divided items">
            {#            divides 横线#}
            {% for item in ArtiInfo %}
                <div class="item">
                    <div class="content">
                        <div class="header">
                            {{ item.title }}
                        </div>
                        <div class="meta">
                            {% for area0 in item.area %}
                                <span class="ui label">{{ area0 }}</span>
                            {% endfor %}
                        </div>
                        <div class="description">
                            <p>
                                {{ item.person }}
                            </p>
                        </div>
                        <div class="extra">
                            {% for area0 in item.area %}
                                <div class="ui label">{{ area0 }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="ui pagination menu">
            {% if ArtiInfo.has_previous %}
                <a class="item" href="?page={{ ArtiInfo.previous_page_number }}">
                    {#            active item激活 表示属于上一层#}
                    <i class="left arrow icon"></i>
                </a>
            {% endif %}
            <div class="disabled item">
                {{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }}
            </div>
            {% if ArtiInfo.has_next %}
                <a class="item" href="?page={{ ArtiInfo.next_page_number }}">
                <i class="right arrow icon"></i>
                </a>
            {% endif %}
        </div>
    </div>
</div>
<script>
    {#$('.header.item').click(function () {#}
    $('#menu').click(function () {
        $('.ui.sidebar').sidebar('toggle');
        {#$('.ui.sidebar').sidebar('hide');#}
    })
</script>
</body>
</html>

前后对比

##########################################

便携起来如此顺畅,真实牛逼,可惜中文网站木有了,点赞,单轮灵活,这个是真tmd好使

制作页面和图表

1、使用和grid进行网站布局

2、使用jquery生成图标

3、使用模板继承减少重复代码

grid 比例 约束距离 分成行和列

equal with 都是等距的

<div class="ui equal width grid " style="width: 60%;margin: 5px 5px 5px 5px;">
        <div class="row">
            <div class="column">
                 <div class="ui red segment">
                   One
                 </div>
            </div>
            <div class="column">
                 <div class="ui blue segment">
                   Two
                 </div>
            </div>
        </div>
         <div class="row">
                <div class="column">
                 <div class="ui segment">
                   Listview
                 </div>
            </div>
        </div>
    </div>

很牛批的功能

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/semantic.min.css' %}">
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    {# jquery一要在前面 #}
    <script src="{% static 'js/semantic.min.js' %}"></script>
    <script src="{% static 'js/highcharts/exporting.js' %}"></script>
    <script src="{% static 'js/highcharts/highcharts.js' %}"></script>
    <script src="{% static 'js/highcharts/highcharts-zh_CN.js' %}"></script>
    <script src="{% static 'js/highcharts/oldie.js' %}"></script>
    <script src="{% static 'js/highcharts/series-label.js' %}"></script>
</head>
<body>
<div class="ui  thin left sidebar inverted vertical menu">
    {# inverted表示反色 visible 表示可见与hide组队 和toggle相反#}
    <div class="header item">
        <img src="imaes/logo2.png">
    </div>
    <div class="item">
        Document
        <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">
    {# pusher 是sidebar的需要 推出来的东西 #}
    <div class="ui menu">
        <div class="header item" id="menu">Menu
            <i class="content icon"></i>
        </div>
        <div class="item">
            abous us
        </div>
        <div class="item">
            location
        </div>
        <div class="item">
            others
        </div>
    </div>
    {#        <div class="ui text container segment">#}
    <div class="ui  container ">
        <div class="ui divided items">
            {#            divides 横线#}
            {% for item in ArtiInfo %}
                <div class="item">
                    <div class="content">
                        <div class="header">
                            {{ item.title }}
                        </div>
                        <div class="meta">
                            {% for area0 in item.area %}
                                <span class="ui label">{{ area0 }}</span>
                            {% endfor %}
                        </div>
                        <div class="description">
                            <p>
                                {{ item.person }}
                            </p>
                        </div>
                        <div class="extra">
                            {% for area0 in item.area %}
                                <div class="ui label">{{ area0 }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="ui pagination menu">
            {% if ArtiInfo.has_previous %}
                <a class="item" href="?page={{ ArtiInfo.previous_page_number }}">
                    {#            active item激活 表示属于上一层#}
                    <i class="left arrow icon"></i>
                </a>
            {% endif %}
            <div class="disabled item">
                {{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }}
            </div>
            {% if ArtiInfo.has_next %}
                <a class="item" href="?page={{ ArtiInfo.next_page_number }}">
                    <i class="right arrow icon"></i>
                </a>
            {% endif %}
        </div>
    </div>
    <div class="ui equal width grid " style="width: 60%;margin: 5px 0 5px 0;">
        <div class="row">
            <div class="column">
                <div class="ui red segment">
                    <div class="ui statistic">
                        <div class="value">
                            50,000
                        </div>
                        <div class="label">
                            Documents
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="ui blue segment">
                    <div class="ui statistic">
                        <div class="value">
                            2,000
                        </div>
                        <div class="label">
                            Views
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="column">
                <div class="ui segment">
                    <div class="ui divided items">
                        <div class="item">
                            <div class="content">
                                <div class="header">
                                    title
                                </div>
                                <div class="description">
                                    say sth
                                </div>
                                <div class="extra">
                                    <div class=" ui label ">
                                        tag1
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui divider"></div>
    <div class="ui equal width grid" style="width: 60%;margin: 5px 0 5px 0;">
        <div class="row">
            <div class="column">
                <div class="ui container segment">
                    <div class="ui compact menu">
                        <div class="ui simple dropdown item">
                            Area
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item" id="CY">朝阳</div>
                                <div class="item" id="HD">海淀</div>
                                <div class="item" id="TZ">通州</div>
                            </div>
                        </div>
                    </div>
                    <div class="ui container" id="container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    {#$('.header.item').click(function () {#}
    $('#menu').click(function () {
        $('.ui.sidebar').sidebar('toggle');
        {#$('.ui.sidebar').sidebar('hide');#}
    })
</script>
<script>
{#var chart = Highcharts.chart('container', {#}
$('#CY').click(function() {
    Highcharts.chart('container', {
        title: {
            text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
        },
        subtitle: {
            text: '数据来源:thesolarfoundation.com'
        },
        yAxis: {
            title: {
                text: '就业人数'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series: [{
            name: '安装,实施人员',
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
            name: '工人',
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
            name: '销售',
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
            name: '项目开发',
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
            name: '其他',
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
});
</script>
</body>
</html>

highcharts官网

https://www.highcharts.com.cn/demo/highcharts/line-basic 抄代码

copy进script 代码抄进去,运行,ok,记得要把container这个id给加到div上,才可以加到对应的位置

dropdown这个需要用id外加click的方法才能把其他的script纳进去,如上

#################################3

模板继承

拆分index,注意block的用法,从哪里拆走,就要从哪里继承,

index.html

 {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/semantic.min.css' %}">
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    {# jquery一要在前面 #}
    <script src="{% static 'js/semantic.min.js' %}"></script>
    <script src="{% static 'js/highcharts/exporting.js' %}"></script>
    <script src="{% static 'js/highcharts/highcharts.js' %}"></script>
    <script src="{% static 'js/highcharts/highcharts-zh_CN.js' %}"></script>
    <script src="{% static 'js/highcharts/oldie.js' %}"></script>
    <script src="{% static 'js/highcharts/series-label.js' %}"></script>
</head>
<body>
<div class="ui  thin left sidebar inverted vertical menu">
    {# inverted表示反色 visible 表示可见与hide组队 和toggle相反#}
    <div class="header item">
        <img src="imaes/logo2.png">
    </div>
    <div class="item">
        Document
        <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">
    {# pusher 是sidebar的需要 推出来的东西 #}
    <div class="ui menu">
        <div class="header item" id="menu">Menu
            <i class="content icon"></i>
        </div>
        <div class="item">
            abous us
        </div>
        <div class="item">
            location
        </div>
        <div class="item">
            others
        </div>
    </div>
    {#        <div class="ui text container segment">#}
    {% block content %}

    {% endblock %}
</div>
<script>
    {#$('.header.item').click(function () {#}
    $('#menu').click(function () {
        $('.ui.sidebar').sidebar('toggle');
        {#$('.ui.sidebar').sidebar('hide');#}
    })
</script>
{% block chartjs %}

{% endblock %}}
</body>
</html>

index_data.html

{% extends 'index.html' %}
{% block content %}
    <div class="ui equal width grid " style="width: 70%;margin: 5px 0 5px 0;">
        <div class="row">
            <div class="column">
                <div class="ui red segment">
                    <div class="ui statistic">
                        <div class="value">
                            {{counts}}
                        </div>
                        <div class="label">
                            Documents
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="ui blue segment">
                    <div class="ui statistic">
                        <div class="value">
                            2,000
                        </div>
                        <div class="label">
                            Views
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="column">
                <div class="ui container segment">
                    <div class="ui divided items">
                        {% for item in ArtiInfo %}
                            <div class="item">
                                <div class="content">
                                    <div class="header">
                                        {{ item.title }}
                                    </div>
                                    <div class="description">
                                        {{ item.person }}
                                    </div>
                                    <div class="extra">
                                        {% for area0 in item.area %}
                                            <div class=" ui label ">
                                                {{ area0 }}
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="ui sanll pagination menu">
                        {% if ArtiInfo.has_previous %}
                            <a class="icon item" href="?page={{ ArtiInfo.previous_page_number }}">
                                <i class="icon left arrow"></i>
                            </a>
                        {% endif %}
                        <div class="disabled item">{{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }}</div>
                        {% if ArtiInfo.has_next %}
                            <a class="icon item" href="?page={{ ArtiInfo.next_page_number }}">
                                <i class="icon right arrow"></i>
                            </a>
                        {% endif %}
                    </div>

                </div>
            </div>
        </div>
    </div>
    {#   <div class="ui divider"></div>#}
{% endblock %}

index_chart.html

{% extends 'index.html' %}
{% block content  %}
<div class="ui equal width grid" style="width: 60%;margin: 5px 0 5px 0;">
        <div class="row">
            <div class="column">
                <div class="ui container segment">
                    <div class="ui compact menu">
                        <div class="ui simple dropdown item">
                            Area
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item" id="CY">朝阳</div>
                                <div class="item" id="HD">海淀</div>
                                <div class="item" id="TZ">通州</div>
                            </div>
                        </div>
                    </div>
                    <div class="ui container" id="container"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block chartjs %}
    <script>
{#var chart = Highcharts.chart('container', {#}
$('#CY').click(function() {
    Highcharts.chart('container', {
        credits:{
            enabled:false
        },
        title: {
            text: '朝阳细分'
        },
        subtitle: {
            text: '数据来源:thesolarfoundation.com'
        },
        yAxis: {
            title: {
                text: '就业人数'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series:{{ chart_cy|safe }},
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
});</script>
    <script>
$('#TZ').click(function() {
    Highcharts.chart('container', {
        credits:{
            enabled:false
        },
        title: {
            text: '通州细分'
        },
        subtitle: {
            text: '数据来源:thesolarfoundation.com'
        },
        yAxis: {
            title: {
                text: '就业人数'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series:{{ chart_tz|safe }},
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
});</script>
    <script>
$('#HD').click(function() {
    Highcharts.chart('container', {
        credits:{
            enabled:false
        },
        title: {
            text: '海淀细分'
        },
        subtitle: {
            text: '数据来源:thesolarfoundation.com'
        },
        yAxis: {
            title: {
                text: '就业人数'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series:{{ chart_hd|safe }},
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
});
</script>
{% endblock %}

view.py 重写def index def chart 读数

from django.shortcuts import render

# def index(request):
#     return render(request,'index.html')
from ceshi.models import ArtiInfo
from django.core.paginator import Paginator

# def index(request):
#     context = {
#         'title':'just a title',
#         'desc':'just a desc',
#         'score':'1.0'
#     }
#     return render(request,'index.html',context)

# def index(request):
#     arti_info = ArtiInfo.objects[:1]
#     context = {
#         'title': arti_info[0].title,
#         'desc': arti_info[0].person,
#         'score': arti_info[0].date
#     }
#     return render(request,'index.html',context)

# iter = 'abcdefghijklmn'
# paginator = Paginator(iter,4)
# #print(paginator.page(1))
# #<Page 1 of 4>
# page1 = paginator.get_page(1)
# print(page1.object_list)
# page1.has_next()
# page1.number
# page1.paginator.num_pages

def index_data(request):
    limit = 4
    # arti_info = ArtiInfo.objects[:10]
    arti_info = ArtiInfo.objects
    # print(len(arti_info))
    paginatior = Paginator(arti_info,limit)
    page = request.GET.get('page',1)
    # print(request)
    # print(request.GET)
    # < WSGIRequest: GET '/index/' >
    # < QueryDict: {} >
    # < WSGIRequest: GET    '/index/?page=3' >
    # < QueryDict: {'page': ['3']} >
    # print(paginatior.page(3))
    #用request 变成一个页面,然后把这个数字输入loader
    loaded = paginatior.page(page)
    context = {
        'ArtiInfo':loaded
    }
    return render(request,'index.html',context)

def index(request):
    limit = 4
    # arti_info = ArtiInfo.objects[:10]
    arti_info = ArtiInfo.objects
    # print(len(arti_info))
    paginatior = Paginator(arti_info,limit)
    page = request.GET.get('page',1)
    # print(request)
    # print(request.GET)
    # < WSGIRequest: GET '/index/' >
    # < QueryDict: {} >
    # < WSGIRequest: GET    '/index/?page=3' >
    # < QueryDict: {'page': ['3']} >
    # print(paginatior.page(3))
    #用request 变成一个页面,然后把这个数字输入loader
    loaded = paginatior.page(page)
    context = {
        'ArtiInfo':loaded,
        'counts':arti_info.count(),
        'last_time':arti_info.order_by('-date').limit(1),
    }
    return render(request,'index_data.html',context)

def topx(date1,date2,area,limit):
    options = {
        'chart':{'zoomType':'xy'},
        'title':{'text':'测试'},
        'subtitle':{'text':'子标题'},
        'yAxis':{'title':{'text':'数量'}}
    }
    pipeline = [
        {'$match':{'$and':[{'date':{'$gte':date1,'$lte':date2}},{'area':{'$all':area}}]}},
        {'$group':{'_id':{'$slice':['$area',1,1]},'counts':{'$sum':1}}},
        {'$limit':limit},
        {'$sort':{'counts':-1}}
    ]
    for i in ArtiInfo._get_collection().aggregate(pipeline):
        data = {
            'name':i['_id'][0],
            'data':[i['counts']],
            'type':'column'
        }
        yield data
series_cy = [i for i in topx('2019-10-01','2020-02-02',['朝阳'],5)]
#print(series_cy)
series_tz = [i for i in topx('2019-10-01','2020-02-02',['通州'],5)]
series_hd = [i for i in topx('2019-10-01','2020-02-02',['海淀'],5)]
#print(series_hd)

def chart(request):
    context = {
        'chart_cy' : series_cy,
        'chart_hd' : series_hd,
        'chart_tz' : series_tz
    }
    return render(request,'index_chart.html',context)

model 如果你改动了就改改,我一直用的爬取数据,不用动

urls

from django.contrib import admin
from django.urls import path
from ceshi.views import index, chart

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', index),
    path('chart/', chart)
]

最后结果绽放

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值