当前位置：首页 > 行业动态 > 正文

如何在Django中从MySQL数据库读取数据并展示在前端页面？

admin
行业动态
2025-01-24
6

### ，，Django读取Mysql数据并显示在前端的步骤：首先按添加网页的步骤添加网页，如table.html，app名为web，将table.html放到相应目录下，forms.py文件提前写好；然后修改views.py做好视图，再修改url.py添加路径；接着在models.py中创建数据库employee并设置name列，保存并同步数据库；最后在mysql中找到django设置的数据库，插入相应数据，再回到views.py读取数据，到table.html中用循环读取names里面的信息即可。

在现代Web应用开发中，Django作为Python的高级Web框架，以其简洁、高效和强大的特性备受开发者青睐，而MySQL作为流行的关系型数据库管理系统，常被用于存储和管理数据，将Django与MySQL结合使用，可以方便地实现数据的读取和展示，下面将详细介绍如何使用Django读取MySQL中的数据并在前端页面显示：

1、配置Django项目和MySQL数据库连接

首先确保已经安装Django并创建了一个Django项目，在项目的settings.py文件中配置MySQL数据库连接。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name',
        'USER': 'your_username',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

替换your_database_name、your_username和your_password为你的MySQL数据库的相关信息。

2、创建数据库模型

在Django中，通过模型类来定义数据库表的结构和操作，假设我们有一个名为MyModel的模型类，它有一个名为data的字段，用来存储我们要展示的数据，在models.py文件中定义如下：

如何在Django中从MySQL数据库读取数据并展示在前端页面？

from django.db import models
class MyModel(models.Model):
    data = models.CharField(max_length=100)

运行以下命令来创建表：

python manage.py makemigrations
python manage.py migrate

3、编写视图以获取数据

在Django的视图中读取数据库中的数据，并传递给前端页面，在views.py文件中编写如下代码：

from django.shortcuts import render
from .models import MyModel
def my_view(request):
    data_list = MyModel.objects.values_list('data', flat=True)
    return render(request, 'my_template.html', {'data_list': data_list})

4、在模板中传递数据到ECharts（可选）

如何在Django中从MySQL数据库读取数据并展示在前端页面？

如果需要在前端使用ECharts进行数据可视化，可以在模板中将数据传递给ECharts，创建一个名为myapp/templates/myapp/sales_chart.html的模板文件，并在其中引入ECharts库，将数据传递给它：

<!DOCTYPE html>
<html>
<head>
    <title>Sales Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var salesData = {{ sales_data|safe }};  // 将Django传递的sales_data渲染到JavaScript中
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: 'Sales Data'
            },
            xAxis: {
                type: 'category',
                data: salesData.map(data => data.date)  // 将日期数据填入X轴
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: salesData.map(data => data.sales),  // 将销售额数据填入Y轴
                type: 'line'
            }]
        };
        myChart.setOption(option);  // 使用指定的配置项和数据显示图表
    </script>
</body>
</html>

在视图函数中组织好数据格式并传递给模板：

from django.shortcuts import render
from .models import SalesData
def sales_chart(request):
    data = SalesData.objects.all()  # 从数据库中获取所有销售数据
    sales_data = [{'date': d.date, 'sales': d.sales} for d in data]  # 组织数据格式
    return render(request, 'myapp/sales_chart.html', {'sales_data': sales_data})

5、配置URL路由

在urls.py文件中配置URL路由，将对应的URL路径映射到视图函数。

如何在Django中从MySQL数据库读取数据并展示在前端页面？

from django.urls import path
from .views import my_view, sales_chart
urlpatterns = [
    path('my_view/', my_view, name='my_view'),
    path('sales/', sales_chart, name='sales_chart'),
]

6、在前端页面中展示数据

在前端页面中使用模板语言（例如Django模板语言）将数据展示出来，在my_template.html文件中编写如下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Display Data</title>
</head>
<body>
    Data List:
    <ul>
        {% for data in data_list %}
            <li>{{ data }}</li>
        {% endfor %}
    </ul>
</body>
</html>

或者，如果是使用ECharts进行可视化，则按照上述模板中的JavaScript代码进行展示。

通过以上步骤，可以成功地使用Django读取MySQL数据库中的数据，并在前端页面上进行展示，无论是简单的数据列表展示还是复杂的数据可视化，Django都提供了灵活且强大的方式来实现。