Django数据驾驶舱

1.项目介绍

这里介绍本人最近进行的数据展示项目，该项目由7个部分组成：CSDN统计、福彩信息、天气预报、股指信息、AI绘图、数据库监控。这些都是笔者感兴趣的数据，组建而成的模块。

项目的技术栈为：Django框架、jQuery前端、mysql数据库、python编码

github项目地址：见文末

2.项目结构

该项目，对于大屏中的板块，分别创建了4个应用：appcsdn、appssq、appweather、appweibo；

项目静态信息存放在static目录下；html网页资源存放在templates中；

controlCabin文件夹则包含：配置文件settings.py、路由文件urls.py等

3.库表结构

3.1 appcsdn的models

应用appcsdn中的models.py

from django.db import models
# cdsn类
class csdnInfo(models.Model):
    id = models.IntegerField(verbose_name='id主键', primary_key=True)
    csdn_reader = models.CharField(verbose_name='总访问量', max_length=32)
    csdn_arcticles = models.CharField(verbose_name='文章数', max_length=16)
    csdn_order = models.CharField(verbose_name='总排名', max_length=16)
    csdn_fans = models.CharField(verbose_name='粉丝数', max_length=16)
    csdn_tfans = models.CharField(verbose_name='铁粉数', max_length=16)
    csdn_good = models.CharField(verbose_name='获赞数', max_length=16)
    csdn_comment = models.CharField(verbose_name='评论数', max_length=16)
    csdn_collect = models.CharField(verbose_name='被收藏数', max_length=16)
    csdn_share = models.CharField(verbose_name='名片分享数', max_length=16)
    record_time = models.CharField(verbose_name='记录时间', max_length=32)

    class Meta:
        db_table = 'csdnInfo'  # 指明数据库表名

    verbose_name = 'csdn统计'  # 在admin站点中显示的名称
    verbose_name_plural = verbose_name  # 显示的复数名称
    get_latest_by = 'record_time'
    ordering = ['record_time']  # 按彩票期数降序排列，-表示降序

3.2 appssq的models

应用appssq中的models.py

from django.db import models
# ssq的类
class ssqInfo(models.Model):
    id = models.IntegerField(verbose_name='id主键', primary_key=True)
    ssq_code = models.CharField(verbose_name='彩票期数', max_length=16)
    ssq_date = models.CharField(verbose_name='出奖日期', max_length=32)
    ssq_red = models.CharField(verbose_name='红球号码', max_length=32)
    ssq_blue = models.CharField(verbose_name='蓝球号码', max_length=6)
    ssq_poolmoney = models.CharField(verbose_name='奖池金额', max_length=16)
    ssq_content = models.CharField(verbose_name='中奖分布信息', max_length=255)

    class Meta:
        db_table = 'ssqInfo'  # 指明数据库表名
        verbose_name = '福彩信息'  # 在admin站点中显示的名称
        verbose_name_plural = verbose_name  # 显示的复数名称
        ordering = ['-ssq_code']  # 按彩票期数降序排列，-表示降序

3.3 appweather的models

应用appweather中的models.py

from django.db import models
# weather类
class weatherInfo(models.Model):
    id = models.IntegerField(verbose_name='id主键', primary_key=True)
    nation = models.CharField(verbose_name='国家', max_length=32)
    province = models.CharField(verbose_name='省份', max_length=32)
    city_name = models.CharField(verbose_name='城市', max_length=32)
    city_id = models.CharField(verbose_name='城市id', max_length=32)
    today_dayText = models.CharField(verbose_name='天气状况', max_length=32)
    today_heat = models.CharField(verbose_name='温度', max_length=32)
    today_wind = models.CharField(verbose_name='风向风力', max_length=32)
    weather_info = models.CharField(verbose_name='7日天气', max_length=3000)
    record_date = models.CharField(verbose_name='记录日期', max_length=32)
    record_time = models.CharField(verbose_name='记录时间', max_length=32)

    class Meta:
        db_table = 'weatherInfo'  # 指明数据库表名

    verbose_name = '天气预报信息'  # 在admin站点中显示的名称
    verbose_name_plural = verbose_name  # 显示的复数名称
    ordering = ['province']  # 按彩票期数降序排列，-表示降序

3.4 appweibo的models

应用appweibo中的models.py

from django.db import models
# weibo类
class weiboInfo(models.Model):
    id = models.IntegerField(verbose_name='id主键', primary_key=True)
    weibo_record_time = models.CharField(verbose_name='记录时间', max_length=32)
    weibo_rank = models.CharField(verbose_name='热搜排名', max_length=32)
    weibo_label = models.CharField(verbose_name='标签', max_length=32)
    weibo_word = models.CharField(verbose_name='热搜词汇', max_length=255)
    weibo_num = models.CharField(verbose_name='热搜量', max_length=32)
    weibo_category = models.CharField(verbose_name='分类', max_length=32)


    class Meta:
        db_table = 'weiboInfo'  # 指明数据库表名

    verbose_name = '微博热搜统计'  # 在admin站点中显示的名称
    verbose_name_plural = verbose_name  # 显示的复数名称
    get_latest_by = 'record_time'
    ordering = ['weibo_rank']  # 按彩票期数降序排列，-表示降序

以上，应用中的models定义好后，可以在命令行运行下面的语句在如mysql等数据库中建表

首次创建Django内置表结构

python manage.py migrate 

让 Django知道我们自定义模型有一些变更,并根据我们自定义app的模型生成创建数据表的脚本

python manage.py makemigrations apphot

通过命令创建apphot模型对应的数据库表 ,命令最后是应用名称

python manage.py makemigrations appcsdn

4.功能展示

5.解决问题

5.1 路由配置

考虑到项目比较简单，没有配置二级路由，这里路由配置主要是数据接口的获取使用

from django.contrib import admin
from django.urls import path
from appssq.views import view_data_ssq,view_web_ssq,view_datacode_url,view_datacode,view_datacontent,view_datacontent_url,view_stock,view_stock_url
from appcsdn.views import view_csdn_url,view_csdn
from appweather.views import view_data_weather,view_weather
from appweibo.views import view_weibo_url,view_weibo

urlpatterns = [
    path('admin/', admin.site.urls),
    # ssq
    path('index.html',view_data_ssq),    # 福彩信息刷新测试1
    path('appssq/datacode_url',view_datacode_url),    # 福彩信息刷新测试2
    path('appssq/datacode',view_datacode),    # 福彩信息刷新测试2
    path('appssq/datacontent_url', view_datacontent_url),  # 福彩信息刷新测试3
    path('appssq/datacontent', view_datacontent),  # 福彩信息刷新测试3
    path('appssq/web_ssq',view_web_ssq),    # 福彩重定向
    # 股票指数
    path('appssq/stock', view_stock),  # 股票刷新测试1
    path('appssq/stock_url', view_stock_url),  # 股票刷新测试1
    # csdn
    path('appcsdn/csdn_url',view_csdn_url),    # csdn统计刷新测试1
    path('appcsdn/csdn',view_csdn),    # csdn统计刷新测试1
    # weather
    path('appweather/date_weather', view_data_weather),  # weather天气信息1
    path('appweather/weather',view_weather),  # weather天气信息
    # weibo
    path('appweibo/weibo_url', view_weibo_url),  # weibor天气信息1
    path('appweibo/weibo', view_weibo),  # weibo天气信息
]

5.2 后端数据与前端echarts展示

在静态资源的map.js中，使用了ajax进行后端数据调用，在调整参数async:false后，前端数据显示正常。

//需要执行的内容:获取ssq_code
var ssq_code = ''; // 全局变量
get_ssq_code = function () {
$.ajax({
    type: "get",
    url: "http://127.0.0.1:8000/appssq/datacode_url",
    async:false,  //值为true表示异步，只为false表示同步
    success: function (real_code) {
    ssq_code = '->'+real_code+'期<-'; //将局部变量赋值给全局变量
    }
  })
}
get_ssq_code();

5.3 长图表丝滑滚动条

在天气预报模块，应用到了滚动条

<div class="boxnav" style="height: 200px; overflow: auto; padding: 0 10px;">
    <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0" >
        <thead style="background: #034481;position: relative;z-index: 2;">
            <tr>
                <th>城市名称</th>
                <th>天气状况</th>
                <th>温度</th>
                <th>风力</th>
            </tr>
        </thead>
        <tbody style="position: relative;">
            <tr> 
                <td>城市名称</td>
                <td><span class='text-w'>天气状况</span></td> 
                <td><span class='text-b'>温度</span></td> 
                <td><div class='text-d'>风力</div></td></tr>
        </tbody>
    </table>
</div>

效果：上下无缝滚动、滚动条隐藏、鼠标进入停止离开恢复

var divTop = 0;
// 天气预报 tr内容表格填充
get_weather = function(){
    $.ajax({
        type: "get",
        url: "http://127.0.0.1:8000/appweather/date_weather",
        async:false,  //值为true表示异步，只为false表示同步
        success: function (weather_list) {
            var td_str = ''
            for (var one in weather_list){
                var province =  weather_list[one]['province'];
                var city_name = weather_list[one]['city_name'];
                var today_dayText = weather_list[one]['today_dayText'];
                var today_heat = weather_list[one]['today_heat'];
                var today_wind = weather_list[one]['today_wind'];
                td_str += "<tr> <td>"+province+" "+city_name+"</td> <td><span class='text-w'>"+today_dayText+"</span></td> <td><span class='text-b'>"+today_heat+"</span></td> <td><div class='text-d'>"+today_wind+"</div></td></tr>";
            }
            // 完全拼接后，再添加标签内
            $("tbody").append(td_str);
            initScroll(weather_list)
        }
    })
}
get_weather();

// 天气预报tbale1-无缝丝滑滚动

function initScroll(list) {
    let tbody = $('.table1 tbody')
    let len = list.length
    tbody.css('top', '0')
    let speed = 50
    let trH = tbody.find('tr').outerHeight()
    let marquee = function () {
        if (divTop <= -trH * len) {
            divTop = 0
        } else {
            divTop -= 1
        }
        tbody.css('top', divTop + 'px')
    }
    if (window.deptCatalogTopTimer) {
        clearInterval(window.deptCatalogTopTimer)
    }
    window.deptCatalogTopTimer = setInterval(marquee, speed)
    $(".table1").hover(function(){
        if (window.deptCatalogTopTimer) {
            clearInterval(window.deptCatalogTopTimer)
        }
    }, function(){
        window.deptCatalogTopTimer = setInterval(marquee, speed)
    })
}

6.遗留问题

由于时间仓促，有些模块的细节没有配置接口，写了固定数据，比如csdn板块的折线图、福彩板块的折线图、词云图、AI图片、数据库监控，不过不影响使用。

7.资源分享

github项目地址：https://github.com/phillip927/controlCabin

下载项目资源后，可以对照着我的这篇文章，进行运行配置：

Django项目开发操作实例_django项目开发实战-CSDN博客