Django：models.py数据库交互&网页端直接echarts展示数据库已有内容

最新推荐文章于 2024-09-01 21:19:09 发布

超级无敌会学习

最新推荐文章于 2024-09-01 21:19:09 发布

阅读量703

点赞数 6

文章标签：数据库 django python

本文链接：https://blog.csdn.net/qq_57612497/article/details/138078816

版权

#Django

Django项目中新建一个应用程序（例：start app01），在app01的文件夹中会有一个默认生成的models.py文件，这个文件和数据库的操作相关，通过执行数据库迁移，便于网页端和数据库端的交互操作。

1.model.py操作数据库

1.1连接数据库

首先，在项目根目录的settings.py文件配置数据库连接，代码如下。

1.2创建实例

在models.py综创建一个Model实例。

对应于数据库，图中创建了一个名为app01_Department的表格，包含名为title的列，CharField定义此列数据类型，verbose_name='标题'无实际意义，仅用于对此列的文字说明，max_length=32限定数据长度。

根据所需数据库表格结构设计，编写完模型类之后，需要在终端执行命令进行数据库的迁移，在数据库中创建所需的表。

生成迁移文件

python manage.py makemigrations

同步到数据库中

python manage.py migrate

数据库迁移成功后，会在数据库中生成多个django开头和app01开头的表。每次执行操作后，表django_migrations中会记录每一次数据迁移记录，删掉此行记录，相当于撤销本次迁移。

接着在视图函数或是其他编写的函数中，可以对数据库中的app01开头的表内容进行增改删查。

2.直接读取已有内容

因为连接的数据库，在我的django项目开始编写前本身有一部分内容，这里希望直接查询并展示在网页上，使用模型类文件编写代码，数据库迁移形成的表名因为带有app01这个前缀，和已有的表格不对应，所以直接编写了查询函数（django有一个可以根据数据库已有内容反向生成model.py的class文件的命令，但我由于psycopg2版本问题，执行这个命令会报错，后面有机会再研究）。

2.1编写函数直接查询

这里给出的是编写函数读取数据库一个已有表格的内容，通过echarts绘制折线图在网页上。

数据库表格结构与表内容如图：

编写函数内容如下：

from django.shortcuts import render

def test2(request):
    with connection.cursor() as cursor:
        cursor.execute("SELECT 姓名, 身高 FROM table_20240322")  # 查询学生的姓名和身高
        result = cursor.fetchall()

    names = [row[0] for row in result]  # 学生姓名
    heights = [float(row[1]) for row in result]  # 学生身高

    # 将列表转换为JSON格式的字符串
    import json
    names_json = json.dumps(names)
    heights_json = json.dumps(heights)

    return render(request, 'test2.html', {
        'names': names_json,
        'heights': heights_json
    })

上述代码读取了数据库table1表中的“time1”和“数值”两列数据内容，并将其转换为html文件可用的json数据格式，并将数据传入test2.html文件进行后续处理。

然后新建一个test2.html文件，注意将其放置在settings.py中规定的模版文件位置，一般是应用文件app01中的templates目录下。

test2.html内容如下：

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <script src="{% static 'lib/echarts/chart/echarts.js' %}"></script>
</head>
<body>
<h1>这是大标题</h1>
<div id="main" style="width: 1200px; height: 600px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    // 从 Django 模板获取 names 和 heights 数据
    var names = {{ names|safe }};
    var heights = {{ heights|safe }};

    var option = {
        title: {
            text: '这是主标题',
            textStyle: {color: '#a125d9'},
            subtext: '副标题',
            subtextStyle: {color: '#125454'},
        },
        tooltip: {
            trigger: 'axis'
        },
        {#工具栏组件toolbox#}
        toolbox: {
            show: true,
            {#left: 'right',//左侧显示#}
            feature: {
                mark: {show: true},// 布尔型，默认为true，只有false时才是不显示这个工具配置项
                dataView: {show: true, readOnly: false},// 看到底层数据
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},// 还原查看时的状态
                saveAsImage: {show: true}// 保存到本地
            }
        },
        {#legend图例#}
        legend: {
            data: ['Height']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: names  // 学生姓名数组
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: 'Height',
                type: 'line',
                data: heights // 身高数据数组
            }
        ],
        dataZoom: [{  // 添加 dataZoom 组件来实现缩放滑动
            type: 'slider',  // 使用 'slider' 类型
            xAxisIndex: [0],  // 表明这个 dataZoom 组件控制哪个轴（0 表示第一个 xAxis）
            start: 0,  // 数据窗口的起始百分比
            end: 50,  // 数据窗口的结束百分比
            height: 50,  // 设置 dataZoom 的高度
        }]
    };

    myChart.setOption(option);
</script>
</body>
</html>

运行项目，输入urls.py文件中设定的地址，网页显示如图，数据查询成功。