Django网络应用实践（2）-静态资源归类注意事项及后台与前端页面数据传输（Django数据传给js解决方法）+echarts绘图

＇需尽欢'

已于 2023-04-10 20:04:15 修改

阅读量364

点赞数 1

文章标签： django python 后端 echarts

于 2023-04-10 20:00:28 首次发布

本文链接：https://blog.csdn.net/fuyouliyang/article/details/130067765

版权

1、后台直接传输，不需要对数据进行分析整理

一、新建静态资源目录

1、静态页面

在根目录下新建静态页面目录template，并在项目名同名子目录下的settings.py做出如下更改：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],#更改位置
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2、静态资源

在根目录下新建静态资源目录static，主要包含静态页面所用到的所有资源，并在项目名同名子目录下的settings.py做出如下更改：

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

在静态页面代码最前面应添加如下代码;

<!DOCTYPE html>
{% load static %}

二、数据传输

1、后台直接传输，不需要对数据进行分析整理

（1）、后台代码

直接使用Django对数据表进行读取

使用render对页面进行渲染，数据表中的数据封装在messages中，op2是一个标识，用来使页面按钮因点击而做出不同的改动。

def data_fen(res):
    messages = table3.objects.all()  # 获取全部数据
    limit = 20
    paginator = Paginator(messages, limit)  # 按每页10条分页
    page = res.GET.get('page', '1')  # 默认跳转到第一页
    result = paginator.page(page)
    return render(res, 'data_temp.html', {'messages': result,'op2':'active'})

（2）、前端代码

这里涉及到if判断，及for循环，message是后台读取数据表后返回的结果，text等是数据表中的列名称。

 <tbody>
        {% if messages %}
            {% for message in messages %}
                <tr class="{% cycle 'active' 'success' 'warning' 'info' %}">
                    <td>{{ message.id }}</td>
                    <td style="max-width: 500px">{{ message.text }}</td>
                    <td>{{ message.name }}</td>
                    <td>{{ message.dian }}</td>
                    <td>{{ message.time }}</td>
                </tr>
            {% endfor %}
        {% else %}
            <tr>
                <td colspan="4">无数据</td>
            </tr>
        {% endif %}
        </tbody>

（3）、效果图

2、需要对数据进行整理分析再传输

（1）、后台代码

这里使用pandas对数据进行分析整理，再传输到指定的js代码中，这里使用列表进行分装，尝试过其他形式来传输这一组数据，但都行不通，只用使用列表时传输的最佳

db = pymysql.connect(
    host='localhost',
    user='root',
    password='root',
    port=3306,
    database='lybs',
    charset='utf8'
)


def two():
    sql = "select * from weibo_score"
    data = pd.read_sql(sql, db)
    head = data.sort_values(by='score', ascending=False).head(10)
    op = ['id:' + str(x) for x in head['id']]
    return {'dian': [x for x in head['dian']], 'id': op, 'score': [x for x in head['score']]}

（2）、前端代码

代码的作用，主要是使用echarts.js画一个柱状与折线图，在接收完数据后使用js将数据调整为我们需要的样子，然后使用echarts进行绘图

<script>
    var arr = new Array()
    {#将返回的列表数据进行循环遍历#}
    {% for foo in two.id %}
        {#将数据追加至新建的数组中#}
        arr.push('{{ foo }}')
        {#console.log('{{ foo }}')#}
        {#循环结束标志    #}
    {% endfor %}
    var ar = {{ two.dian }}
    var num = getArrMax(ar)
    function getArrMax(arr) { //arr接受一个数组
        var max = arr[0];
        for (var i = 1; i <= arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        return max;
    }
    var max_ = 0
    var min_ = 0
    if(num<50){
        max_ = 50
        min_ = 5
    }else if(num>=50 && num<200){
        max_ = Math.round(num/50)*50;
        min_ = 20
    }else if(num>=200 && num<500){
        max_ = Math.round(num/50)*50;
        min_ = 50
    }else if(num>=500 && num<2000){
        max_ = Math.round(num/50)*50;
        min_ = 200
    }else if(num>=2000){
        max_ = Math.round(num/50)*50;
        min_ = 500
    }
    var ar1={{ two.score }}
    function getArrmin(arr) { //arr接受一个数组
        var max = arr[0];
        for (var i = 1; i <= arr.length; i++) {
            if (arr[i] < max) {
                max = arr[i];
            }
        }
        return max;
    }
    var min1 = getArrmin(ar1)
    var jian=(100-min1)/(max_/min_)
    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    var myChart1 = echarts.init(document.querySelector(".two"));
    var option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        title: {
            text: '情感分析top10点赞数量',
            left: 'center',
            subtext: '情感评分排名 从左到右'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['点赞数量', '情感评分'],
            left: 'left'
        },
        xAxis: [
            {
                type: 'category',
                data: arr,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '点赞数量',
                min: 0,
                max: max_+50,
                interval: min_,
                axisLabel: {
                    formatter: '{value}'
                },
                axisTick: {
                    show: false
                }
            },
            {
                type: 'value',
                name: '情感评分',
                min: min1,
                max: 100,
                interval: jian,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '点赞数量',
                type: 'bar',
                data: {{ two.dian }}
            },

            {
                name: '情感评分',
                type: 'line',
                yAxisIndex: 1,
                lineStyle: {
                    color: "black"
                },
                data: {{ two.score }},
            }
        ]
    };
    myChart1.setOption(option1);
</script>

（3）、效果图

＇需尽欢'

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Django网络应用实践（2）-静态资源归类注意事项及后台与前端页面数据传输（Django数据传给js解决方法）+echarts绘图

这里使用pandas对数据进行分析整理，再传输到指定的js代码中，这里使用列表进行分装，尝试过其他形式来传输这一组数据，但都行不通，只用使用列表时传输的最佳。代码的作用，主要是使用echarts.js画一个柱状与折线图，在接收完数据后使用js将数据调整为我们需要的样子，然后使用echarts进行绘图。使用render对页面进行渲染，数据表中的数据封装在messages中，op2是一个标识，用来使页面按钮因点击而做出不同的改动。在静态页面代码最前面应添加如下代码;直接使用Django对数据表进行读取。
复制链接

扫一扫