![Uploading Screen Shot 2016-07-27 at 16.46.58_522860.png . . .]
](http://upload-images.jianshu.io/upload_images/1504853-805d329ac707cd16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

代码部分
网页顶栏部分：

    <div class="ui fixed menu" style="height:54px;padding:10px 0px 10px 10px">
      <div class="ui right labeled input">
        <div class="ui basic label" style="padding:2px 0 2px 5px"><i class="red big pinterest icon"> </i></div>
        <input type="text" placeholder="Search..." style="background-color:#dfdfdf;min-width:356px">
        <div class="ui basic label"><i class="sidebar icon"></i></div>
      </div>

      <div class="ui left attached basic button" style="margin:0 0 0 10px">
        <i class="red pin icon"></i>YOUR ACCOUNT
      </div>
      <div class="right attached ui basic button" >
        <i class="right setting icon"></i>
      </div>
    </div>

卡片图片部分

<div class="ui link cards" style="margin:60px 0 0 0px" id='contentor'>
<div class="ui card" style="width:236px">
        <div class="image">
          <img src="{% static 'images/pinpic01.jpg' %}">
        </div>
        <div class="content">
          <div class="header">Matt Giampietro</div>
          <div class="meta">
            <a>Friends</a>
          </div>
          <div class="description">
            Matthew is an interior designer living in New York.
          </div>
        </div>
        <div class="extra content">
          <span class="right floated">
            Joined in 2013
          </span>
          <span>
            <i class="user icon"></i>
            75 Friends
          </span>
        </div>
 </div>
</div>

二手行情网站：

首先在ipython中进行数据清洗整理，再通过pipeline实现：

发帖总量.png

one day.png

一天的cates和areas.png

之后移植到Django中。

views.py

from django.shortcuts import render
from ganji.models import ItemInfo
from django.core.paginator import Paginator

#  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# 不同区域发帖量前5名
def Topx(date1,date2,area,limit):
    pipeline=[
        {'$match':{'$and':[{'pub_date':{'$gte':date1,'$lte':date2}},{'area':{'$all':area}}]}},
        {'$group':{'_id':{'$slice':['$cates',2,1]},'counts':{'$sum':1}}},
        {'$limit':limit},
        {'$sort':{'counts':-1}}
    ]

    for i in ItemInfo._get_collection().aggregate(pipeline):
        data = {
            'name': i['_id'][0],
            'data': [i['counts']],
            'type': 'column'
        }
        yield data

series_CY = [i for i in Topx('2016.01.01','2016.01.07',['朝阳'],5)]
series_TZ = [i for i in Topx('2016.01.01','2016.01.07',['通州'],5)]
series_HD = [i for i in Topx('2016.01.01','2016.01.07',['海淀'],5)]

#  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# 数据中发帖总量柱状图
def total_post():
    pipeline = [
    {'$group':{'_id':{'$slice':['$cates',2,1]},'counts':{'$sum':1}}},
    ]

    for i in ItemInfo._get_collection().aggregate(pipeline):
        data = {
            'name':i['_id'][0],
            'y':i['counts']
        }
        yield data

series_post=[i for i in total_post()]

# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
def one_day_deal_cate():
    pipeline = [
        {'$match':{'$and':[{'pub_date':{'$gte':'2015.12.25','$lte':'2016.01.11'}},{'time':1}]}},
        {'$group':{'_id':{'$slice':['$cates',2,1]},'counts':{'$sum':1}}},
        {'$sort':{'counts':1}}
    ]
    for i in ItemInfo._get_collection().aggregate(pipeline):
        data = {
            'name':i['_id'][0],
            'y':i['counts']
        }
        yield data

def one_day_deal_area():
    pipeline = [
        {'$match':{'$and':[{'pub_date':{'$gte':'2015.12.25','$lte':'2016.01.11'}},{'time':1}]}},
        {'$group':{'_id':{'$slice':['$area',1]},'counts':{'$sum':1}}},
        {'$sort':{'counts':1}}
    ]

    for i in ItemInfo._get_collection().aggregate(pipeline):
        data = {
            'name':i['_id'][0],
            'y':i['counts']
        }
        yield data

pie1_data = [i for i in one_day_deal_cate()]
pie2_data = [i for i in one_day_deal_area()]

#  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


def index(request):
    context = {
        'chart_CY':series_CY,
        'chart_TZ':series_TZ,
        'chart_HD':series_HD,
        'series_post':series_post,
        'pie1_data':pie1_data,
        'pie2_data':pie2_data
    }
    return render(request,'chart2.html',context)

def web(request):
    return render(request,'web.html')

def pin(request):
    return render(request,'pin.html')

# blog
def chart(request):
    limit = 15
    item_info = ItemInfo.objects[:20]
    pageinator = Paginator(item_info, limit)
    page = request.GET.get('page', 1)
    print(request)
    print(request.GET)

    loaded = pageinator.page(page)

    context = {
        'ItemInfo': loaded,
        'counts': item_info.count(),
        'last_time':item_info.order_by('-pub_date').limit(1),
    }
    return render(request,'index_data.html',context)

models.py

from django.db import models

from mongoengine import *

# Create your models here.
class ItemInfo(Document):
    title = StringField()
    url = StringField()
    pub_date = StringField()
    area = ListField(StringField())
    cates = ListField(StringField())
    look = StringField()
    time = StringField()
    price = IntField()
    meta = {'collection':'item_info'}

urls.py

from django.conf.urls import url
from django.contrib import admin
from ganji.views import index,web,pin,chart

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', index),
    url(r'^web/',web),
    url(r'^pin/',pin),
    url(r'^chart/',chart)

]

index_data.html

{% extends "chart.html" %}

{% block grid %}
<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">
                                <i class="plane icon"></i> 5
                            </div>
                            <div class="label">
                                Flights
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <div class="ui container segment">
                        <div class="ui divided items">
                            {% for item in ItemInfo %}
                            <div class="item">
                                <div class="content">
                                    <div class="header">
                                        {{ item.title }}
                                    </div>
                                    <div class="description">
                                        {{ item.area }}
                                    </div>
                                    <div class="extra">
                                        {% for tag in item.cates %}
                                        <div class="ui label">
                                            {{ tag }}
                                        </div>
                                        {% endfor %}
                                    </div>

                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <div class = "ui small pagination menu">
                            {% if ItemInfo.has_previous %}
                                <a class="icon item" href="?page={{ ItemInfo.previous_page_number }}">
                                <i class="icon left arrow"></i>
                                </a>
                            {% endif %}

                            <div class="disabled item">
                                {{ ItemInfo.number }} of {{ ItemInfo.paginator.num_pages }}
                            </div>
                            {% if ItemInfo.has_next %}
                                <a class="icon item" href="?page={{ ItemInfo.next_page_number }}">
                                    <i class="icon right arrow"></i>
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

chart2.html

{% extends 'chart.html' %}

{% block grid %}
<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 class="row">
      <div class="column">
        <div class="ui container segment">
          <div class="ui container" id="pie1"></div>
        </div>
      </div>

      <div class="column">
          <div class="ui container segment">
          <div class="ui container" id="pie2"></div>
        </div>
      </div>
    </div>


    <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="chart1"></div>
        </div>
      </div>
    </div>



</div>

{% endblock %}

{% block chartjs %}

    <script>
    $(function () {
        // Create the chart
        $('#chart2').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '发帖总量柱状图'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '数量'
                }
            },
            legend: {
                enabled: false
            },

            series: [{
                name: 'posts',
                colorByPoint: true,
                data: {{ series_post|safe }}
            }]
        });
    });

    </script>

    <script>
        $('#CY').click(function () {
          $('#chart1').highcharts({
            credits:{
                enabled:false
            },
            title: {
                text: '朝阳二手交易'
            },
            yAxis: {
                title: {
                    text: 'TOP 5'
                }
            },
            series: {{ chart_CY|safe }}
        });
    });
    </script>

    <script>
        $('#HD').click(function () {
          $('#chart1').highcharts({
            credits:{
                enabled:false
            },
            title: {
                text: '海淀二手交易'
            },
            yAxis: {
                title: {
                    text:  'TOP 5'
                }
            },
            series: {{ chart_HD|safe }}
        });
    });
    </script>

    <script>
        $('#TZ').click(function () {
          $('#chart1').highcharts({
            credits:{
                enabled:false
            },
            title: {
                text: '通州二手交易'
            },
            yAxis: {
                title: {
                    text:  'TOP 5'
                }
            },
            series: {{ chart_TZ|safe }}
        });
    });
    </script>

    <script>
    $(function () {
        $('#pie1').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '一天内交易物品种类分布'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: 'Percent',
                colorByPoint: true,
                data: {{ pie1_data|safe }}
            }]
        });
    });
    </script>

    <script>
    $(function () {
        $('#pie2').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '一天内交易物品地区分布'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: 'Percent',
                colorByPoint: true,
                data: {{ pie2_data|safe }}
            }]
        });
    });
    </script>

{% endblock %}

实现效果：

1.png

2.png

3.png

blog.png

总结:

• 进一步学习了Django的框架，后续准备把document好好看看，买了本Python web开发测试驱动方法，准备系统学学。
• 学习了用senmatic模版做网页，下一步需要学习html＋css＋javascript
• 学习了如何搭建简单的网页。
• 初步掌握了利用爬虫抓取数据，并进行网页的数据可视化。

课程结束了，学习才刚开始，继续学习，做些实际的项目，以后继续在博客中记录下来，谢谢老师。