django已连接数据库，但是前端不显示任何信息（包括数据标题和数据内容）

Question

问题遇到的现象和发生背景

设计一个部门使用，用于管理书籍，手机的网页.基于django，通过使用pycharm编写+mySQL数据库（navicat管理数据），目前碰到的问题是，网页无法显示数据库信息（包括数据标题和数据内容），不知道问题出在哪里
django导航视图

urls.py代码如下

from django.urls import path
from app01 import views

urlpatterns = [
    path(r'', views.home),
    path(r'login/', views.login),
    path(r'lib/list/', views.lib_list),
    path(r'lib/list/<int:nid>/borrow/', views.lib_borrow),
    path(r'lib/return/', views.lib_return),
    path(r'phone/list/', views.phone_list, name='phone_list')

views.py代码如下

def phone_list(request):
    data_dict = {}
    value = request.GET.get("q")
    if value:
        data_dict["Brand__contains"] = value
    page = int(request.GET.get('page', 1))
    page_size = 10
    start = (page - 1) * page_size
    end = page * page_size
    queryset = models.PhoneInfo.objects.filter(**data_dict)[start:end]
    for phone in queryset:
    print(phone.id, phone.Tnum, phone.DeviceName, phone.DeviceType, phone.DeviceCateGory, phone.Brand, phone.Model, phone.Market, phone.Picture, phone.Location, phone.LaunchDate, phone.IMEI, phone.SN, phone.WLANMac, phone.ArrivalDate, phone.Firmware, phone.OS, phone.OSVersion, phone.Network, phone.Operator, phone.Parameter, phone.BTVersion, phone.DeviceOwner, phone.DeviceStatus, phone.UsageStatus, phone.AssetDef, phone.AssetNum, phone.AssetValue, phone.DualSIM, phone.ExMemSupport, phone.MemSize, phone.USBVersion, phone.PortType, phone.CANSpeed, phone.MenuLink, phone.Comments)

    total_count = models.PhoneInfo.objects.filter(**data_dict).count()
    total_page_count, div = divmod(total_count, page_size)
    if div:
        total_page_count += 1

    if total_page_count <= 2 * 10 + 1:
        start_page = 1
        end_page = total_page_count
    else:
        start_page = page - 5
        end_page = page + 5

    page_str_list = []
    for i in range(start_page, end_page + 1):
        if i == page:
            ele = '<li class="page-item active"><a class="page-link" href="?page={}">{}</a></li>'.format(i, i)
        else:
            ele = '<li class="page-item"><a class="page-link" href="?page={}">{}</a></li>'.format(i, i)
        page_str_list.append(ele)
    page_string = mark_safe("".join(page_str_list))

    return render(request, 'phone_list.html', {"queryset": queryset, "page_string": page_string})

models代码如下

class PhoneInfo(models.Model):
    Tnum = models.CharField(verbose_name='Tnum', max_length=6)
    DeviceName = models.CharField(verbose_name="DeviceName", max_length=50)
    DeviceType = models.CharField(verbose_name="DeviceType", max_length=50)
    DeviceCategory = models.CharField(verbose_name="DeviceCategory", max_length=50)
    Brand = models.CharField(verbose_name="Brand", max_length=50)
    Model = models.CharField(verbose_name="Model", max_length=50)
    Market = models.CharField(verbose_name='Market', max_length=50)
    Picture = models.CharField(verbose_name='Picture', max_length=50)
    Location = models.CharField(verbose_name='Location', max_length=50)
    LaunchDate = models.DateField(verbose_name='LaunchDate', blank=True, null=True)
    IMEI = models.CharField(verbose_name="IMEI", max_length=50)
    SN = models.CharField(verbose_name="SN", max_length=50)
    WLANMac = models.CharField(verbose_name="WLANMac", max_length=50)
    ArrivalDate = models.DateField(verbose_name='ArrivalDate', blank=True, null=True)
    Firmware = models.CharField(verbose_name="Firmware", max_length=50)
    OS = models.CharField(verbose_name="OS", max_length=10)
    OSVersion = models.CharField(verbose_name='OSVersion', max_length=10)
    Network = models.CharField(verbose_name='Network', max_length=10)
    Operator = models.CharField(verbose_name='Operator', max_length=10)
    Parameter = models.CharField(verbose_name="Parameter", max_length=50)
    BTVersion = models.CharField(verbose_name="BTVersion", max_length=5)
    DeviceOwner = models.CharField(verbose_name='DeviceOwner', max_length=50)
    DeviceStatus = models.CharField(verbose_name='DeviceStatus', max_length=10)
    UsageStatus = models.CharField(verbose_name='UsageStatus', max_length=50)
    AssetDef = models.CharField(verbose_name="AssetDef", max_length=5)
    AssetNum = models.CharField(verbose_name="AssetNum", max_length=20)
    AssetValue = models.CharField(verbose_name='AssetValue', max_length=5)
    DualSIM = models.CharField(verbose_name='DualSIM', max_length=5)
    ExMemSupport = models.CharField(verbose_name="ExMemSupport", max_length=5)
    MemSize = models.CharField(verbose_name="MemSize", max_length=20)
    USBVersion = models.CharField(verbose_name='USBVersion', max_length=50)
    PortType = models.CharField(verbose_name='PortType', max_length=50)
    CANSpeed = models.CharField(verbose_name="CANSpeed", max_length=50)
    MenuLink = models.CharField(verbose_name='MenuLink', max_length=50)
    Comments = models.CharField(verbose_name='Comments', max_length=128)

HTML脚本如下

{%load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
{#    <link rel="stylesheet" href="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.css' %}">#}




    <style>
        .navbar{
            border-radius: 0;
        }

        .container-fluid
        {
            margin-top: 10px;

        }

    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg " style="background-color: #e3f2fd;">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">资产管理系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
      </ul>
    <ul class="navbar-nav  navbar-right">
        <li class="nav-item">
          <a class="nav-link" href="#">登陆</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            设置
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">个人资料</a></li>
            <li><a class="dropdown-item" href="#">我的信息</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">注销</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>




<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-link" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="false">图书管理系统</a>
    <a class="nav-link active" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="true">手机管理系统</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <div class="container-fluid">
        <div style="margin-bottom: 18px" class="clearfix">
            <div style="float: left;width: 400px;margin-bottom: 10px">
                <form method="get">
                    <div class="input-group">
                        <label>
                            <input type="text" name="q" class="form-control" placeholder="Serch for...">
                        </label>
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit">搜索</button>
                        </span>
                    </div>
                </form>

            </div>
        <table class="table table-bordered  table-hover table-condensed table-sm align-middle ">
                <thead class="table-light">
                    <tr>
                      <th>ID</th>
                      <th>Tnum</th>
                      <th>DeviceName</th>
                      <th>DeviceType</th>
                      <th>DeviceCategory</th>
                      <th>Brand</th>
                      <th>Model</th>
                      <th>Market</th>
                      <th>Picture</th>
                      <th>Location</th>
                      <th>LaunchDate</th>
                      <th>IMEI</th>
                      <th>SN</th>
                      <th>WLANMac</th>
                      <th>ArrivalDate</th>
                      <th>Firmware</th>
                      <th>OS</th>
                      <th>OSVersion</th>
                      <th>Network</th>
                      <th>Operator</th>
                      <th>Parameter</th>
                      <th>BTVersion</th>
                      <th>DeviceOwner</th>
                      <th>DeviceStatus</th>
                      <th>UsageStatus</th>
                      <th>AssetDef</th>
                      <th>AssetNum</th>
                      <th>AssetValue</th>
                      <th>DualSIM</th>
                      <th>ExMemSupport</th>
                      <th>MemSize</th>
                      <th>USBVersion</th>
                      <th>PortType</th>
                      <th>CANSpeed</th>
                      <th>MenuLink</th>
                      <th>Comments</th>
                    </tr>
                </thead>
                <tbody>
                {% for phone in queryset %}
                    <tr class="align-bottom">
                      <td>{{ phone.id }}</td>
                      <td>{{ phone.Tnum }}</td>
                      <td>{{ phone.DeviceName }}</td>
                      <td>{{ phone.DeviceType }}</td>
                      <td>{{ phone.DeviceCategory }}</td>
                      <td>{{ phone.Brand }}</td>
                      <td>{{ phone.Model }}</td>
                      <td>{{ phone.Market }}</td>
                      <td>{{ phone.Picture }}</td>
                      <td>{{ phone.Location }}</td>
                      <td>{{ phone.LaunchDate|date:"Y-m-d" }}</td>
                      <td>{{ phone.IMEI }}</td>
                      <td>{{ phone.SN }}</td>
                      <td>{{ phone.WLANMac }}</td>
                      <td>{{ phone.ArrivalDate|date:"Y-m-d" }}</td>
                      <td>{{ phone.Firmware }}</td>
                      <td>{{ phone.OS }}</td>
                      <td>{{ phone.OSVersion }}</td>
                      <td>{{ phone.Network }}</td>
                      <td>{{ phone.Operator }}</td>
                      <td>{{ phone.Parameter }}</td>
                      <td>{{ phone.BTVersion }}</td>
                      <td>{{ phone.DeviceOwner }}</td>
                      <td>{{ phone.DeviceStatus }}</td>
                      <td>{{ phone.UsageStatus }}</td>
                      <td>{{ phone.AssetDef }}</td>
                      <td>{{ phone.AssetNum }}</td>
                      <td>{{ phone.AssetValue }}</td>
                      <td>{{ phone.DualSIM }}</td>
                      <td>{{ phone.ExMemSupport }}</td>
                      <td>{{ phone.MemSize }}</td>
                      <td>{{ phone.USBVersion }}</td>
                      <td>{{ phone.PortType }}</td>
                      <td>{{ phone.CANSpeed }}</td>
                      <td>{{ phone.MenuLink }}</td>
                      <td>{{ phone.Comments }}</td>
                    </tr>
                {% endfor %}
                </tbody>
        </table>

        </div>
    </div>
    <ul class="pagination">
        {{ page_string }}
    </ul>
  </div>
</div>


<script type="text/javascript" src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'plugins/bootstrap/js/bootstrap.bundle.js' %}"></script>
</body>


</html>

期望的结果如下，手机管理系统希望打开也是和图书管理系统类似，可以有显示，但是目前内容空

Answer 1

引自免费微信小程序：皆我百晓生

看起来您的项目结构、URL配置、视图函数以及HTML模板都没有明显错误。为了解决问题，我们可以从以下几个方面排查：

1. 确保数据库中有数据。
2. 检查模型字段是否正确映射到HTML模板中的变量。
3. 确认查询结果是否正确传递给模板。

首先，确保您在MySQL数据库中已经添加了一些PhoneInfo对象。您可以使用Navicat或其他工具查看数据。

接下来，检查视图函数phone_list()，确保它正在获取正确的数据并将其传递给模板。您可以尝试将查询结果打印到控制台，看看是否有数据返回：

def phone_list(request):
    ...
    queryset = models.PhoneInfo.objects.filter(**data_dict)[start:end]
    
    # 打印查询结果以确认是否有数据
    print(queryset)

    for phone in queryset:
        ...

    ...

然后，在浏览器开发者工具的网络面板中，检查请求响应的数据是否包含预期的数据。这可以通过访问http://your_domain/phone/list/?page=1这样的URL来完成。确保响应体包含了电话设备的信息。

如果以上步骤都正常，那么问题可能在于HTML模板。为了进一步排查，可以简化模板，仅显示数据列表的一部分，例如只显示DeviceName字段，以确认数据是否成功渲染：

{% for phone in queryset %}
    <p>{{ phone.DeviceName }}</p>
{% endfor %}

如果仍然没有数据显示，那可能是CSS样式或Bootstrap的问题导致表格不可见。确保静态文件路径设置正确，并且在浏览器中检查元素以确保表格元素存在并且没有被隐藏。

如果您仍然遇到问题，请提供更详细的反馈，比如是否有错误消息，或者检查上述建议后是否有任何变化。这样我们才能继续深入排查。