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基本是全面的
当用到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)
]
最后结果绽放