Django数据驾驶舱

Django数据驾驶舱

      • 1.项目介绍
      • 2.项目结构
      • 3.库表结构
        • 3.1 appcsdn的models
        • 3.2 appssq的models
        • 3.3 appweather的models
        • 3.4 appweibo的models
      • 4.功能展示
      • 5.解决问题
        • 5.1 路由配置
        • 5.2 后端数据与前端echarts展示
        • 5.3 长图表丝滑滚动条
      • 6.遗留问题
      • 7.资源分享

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博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/734684.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

excel数据透视

excel数据透视

Excel中&#xff0c;数据透视图&#xff08;PivotChart&#xff09;和数据透视表&#xff08;PivotTable&#xff09;是两个紧密相关的工具&#xff0c;用于分析数据。数据透视表是数据透视图的数据源&#xff0c;也就是说&#xff0c;数据透视图是基于数据透视表中的数据创建的…
阅读更多...
判断题无答案22届期末复习

判断题无答案22届期末复习

判断： 1-3.结构体变量不能进行整体输入输出。 1-4.不同类型的结构变量之间也可以直接赋值。 1-5假设结构指针p已定义并正确赋值，其指向的结构变量有一个成员是int型的num，则语句 （*p）.num = 100; 等价于p->num=1…
阅读更多...
Linux下多进程访问同一个共享库处理流程

Linux下多进程访问同一个共享库处理流程

两个测试程序实现调用同一个SO库： ​​​​​​​ #include <stdio.h> #include "a/a.h" #include <unistd.h> int main() { int a = 4,b = 5; sum(a, b); int ret = get(); printf("ret=%d\n", ret); sleep(100)…
阅读更多...
如何用好swoole/webman/workerman/hyperf呢

如何用好swoole/webman/workerman/hyperf呢

Webman框架的依赖 "require": { "php": ">7.2", "workerman/webman-framework": "^1.5.0",// "monolog/monolog": "^2.0" }, 依赖的核心框架也是很久的了 webman-framework的核心依赖 &q…
阅读更多...
Ubuntu下FastDDS的源码编译和简单测试

Ubuntu下FastDDS的源码编译和简单测试

FastDDS是eprosima公司开发的DDS&#xff08;Data Distribution Service&#xff09;库&#xff0c;使用的语言是C&#xff0c;自称是"The Most Complete Open Source DDS Middleware"&#xff0c;其官网是https://eprosima.com/&#xff0c;FastDDS源码在https://gi…
阅读更多...
【面试干货】HashSet 和 TreeSet 的区别

【面试干货】HashSet 和 TreeSet 的区别

【面试干货】HashSet 和 TreeSet 的区别 1、实现方式HashSetTreeSet 2、性能添加、删除和查找操作的时间复杂度HashSetTreeSet 3、元素唯一性4、迭代顺序HashSetTreeSet 5、使用场景HashSetTreeSet 6、示例代码 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不…
阅读更多...
Android 屏幕旋转 处理 AsyncTask 和 ProgressDialog 的最佳方案

Android 屏幕旋转 处理 AsyncTask 和 ProgressDialog 的最佳方案

初始化数据 */ private void initData(Bundle savedInstanceState) { if (savedInstanceState ! null) mDatas savedInstanceState.getStringArrayList(“mDatas”); if (mDatas null) { mLoadingDialog new LoadingDialog(); mLoadingDialog.show(getFragmentMana…
阅读更多...
AI网络爬虫：搜狗图片的时间戳反爬虫应对策略

AI网络爬虫：搜狗图片的时间戳反爬虫应对策略

如何批量爬取下载搜狗图片搜索结果页面的图片&#xff1f;以孙允珠这个关键词的搜索结果为例&#xff1a; https://pic.sogou.com/pics?query%E5%AD%99%E5%85%81%E7%8F%A0&mode2 翻页规律如下&#xff1a; https://pic.sogou.com/napi/pc/searchList?mode2&start38…
阅读更多...
Python: HexBinDecOct

Python: HexBinDecOct

因为&#xff1a; f0b1001110# 十进制 int()a0*2**01*2**11*2**21*2**30*2**40*2**51*2**6print(a)# 八进制 oct()print(78/8,78%8)# 110 001 001 8 116print(1*2**00*2**10*2**2,1*2**00*2**10*2**2,0*2**01*2**11*2**2)#十六进制 hex()#0 100 1110 16 4Eprint(sixteenFoo(0*…
阅读更多...
2024-06-23 编译原理实验5——目标代码生成

2024-06-23 编译原理实验5——目标代码生成

文章目录 一、实验要求二、实验设计三、实验结果四、附完整代码 补录与分享本科实验&#xff0c;以示纪念。 一、实验要求 在词法分析、语法分析、语义分析和中间代码生成程序的基础上&#xff0c;将C−−源代码翻译为MIPS32指令序列&#xff08;可以包含伪指令&#xff09;&…
阅读更多...
Windows程序设计课程作业-3（文件并发下载）

Windows程序设计课程作业-3（文件并发下载）

目录 目录 1.作业内容 2.作业要求 3.主要思路 1&#xff09;窗体和组件初始化 2&#xff09;下载管理器实例化 3&#xff09;按钮点击事件处理 4&#xff09;窗体加载事件处理 5&#xff09;下载消息处理 4.主要难点 1&#xff09;多线程管理&#xff1a; 2&#xff09…
阅读更多...
理解傅里叶变换不同的数学表达形式

理解傅里叶变换不同的数学表达形式

文章目录 前言一、三角函数分解形式推导&#xff1a;1.正交性&#xff1a;2.系数求解&#xff1a;1.A02.an&#xff0c;bn 二、指数形式1.推导与三角形式的对应关系&#xff1a; 2.信号与系统中的概念1.|Cn|是第n次谐波的幅度2.φn是第n次谐波的相位3.谐波分量 文章来源 前言 …
阅读更多...
OPENCV中0x00007FFE5F35F39C发生异常

OPENCV中0x00007FFE5F35F39C发生异常

原因&#xff1a;读取图片时已经为灰度图像&#xff0c;又进行了一次灰度处理cvtColor 解决方法&#xff1a;如上图所示&#xff0c;将cv::imread的第二个参数改为cv::IMREAD_COLOR&#xff1b;或者保留cv::IMREAD_GRAYSCALE&#xff0c;删去后面的cv::cvtColor
阅读更多...
Flutter开发环境搭建和调试

Flutter开发环境搭建和调试

[你的Flutter文件夹路径]\flutter\bin 这样我们的Flutter SDK的环境变量就配置完毕了。接下来在命令提示符窗口中输入命令&#xff1a; flutter doctor 它可以帮助我们检查Flutter环境变量是否设置成功&#xff0c;Android SDK是否下载以及配置好环境变量等等。如果有相关的…
阅读更多...
centos7系统上安装MySQL8.4图文教程

centos7系统上安装MySQL8.4图文教程

本章教程&#xff0c;主要记录如何在CentOS7系统上安装MySQL8.4的详细步骤。 一、查看当前系统版本 cat /etc/centos-release二、安装步骤 1、创建mysql目录 cd /usr/local && mkdir mysql && cd mysql2、安装rpm包 yum install https://repo.mysql.com//m…
阅读更多...
[FreeRTOS 内部实现] 互斥访问与回环队列

[FreeRTOS 内部实现] 互斥访问与回环队列

文章目录 基础知识队列结构体创建队列 xQueueCreate 解析队列读数据 xQueueReceive 解析队列写数据 xQueueGenericSend 解析互斥访问与回环队列 内部实现框图 基础知识 [FreeRTOS 基础知识] 互斥访问与回环队列 概念 队列结构体 typedef struct QueueDefinition {int8_t *pcH…
阅读更多...
Golang三色标记法

Golang三色标记法

简介 在JVM中&#xff0c;GC采用可达性分析法来判断对象是否死亡&#xff1b;在python虚拟机中&#xff0c;GC采用引用计数法加循环检测器来判断对象是否死亡&#xff0c;而在golang中&#xff0c;使用的是三色表记法来判断对象是否死亡。 什么是三色抽象 总所周知在GC时&am…
阅读更多...
keepalived高可用，nginx+keepalived+apache架构的实现

keepalived高可用，nginx+keepalived+apache架构的实现

目 录 一、概述&#xff1a; 二、实验架构图如图所示&#xff1a; 三、实验环境&#xff1a; 四、实现效果&#xff1a; 五、实验解析及步骤&#xff1a; 六、具体实现&#xff1a; 6.1 先关闭防火墙和核心防护&#xff1a;两条命令&#xff1a; 6.2 后端apache服务…
阅读更多...
2024最新1小时零基础编写uniapp和小程序管理后台，基于uniadmin和vue3实现uniapp小程序的网页管理后台

2024最新1小时零基础编写uniapp和小程序管理后台，基于uniadmin和vue3实现uniapp小程序的网页管理后台

一&#xff0c;创建uniAdmin项目 打开开发者工具Hbuilder,然后点击左上角的文件&#xff0c;点新建&#xff0c;点项目。如下图。 选择uniadmin&#xff0c;编写项目名&#xff0c;然后使用vue3 记得选用阿里云服务器&#xff0c;因为最便宜 点击创建&#xff0c;等待项目创…
阅读更多...
53【场景作图】纵深感

53【场景作图】纵深感

1 想清楚什么是前 什么是后 如果背景虚化，就不要处理地很平面，如果很平面，就留一个清晰的边缘 2 重叠 遮挡 被遮挡的物体会更远
阅读更多...
最新文章

Copyright @ 2022~2023