Pycharm搭建一个Django项目

File->new project

点击create，等待一下即可

查看安装 Django 版本：

在 Pycharm 底部选择 Terminal 然后在里面输入：python -m django --version

启动项目：

在 Terminal 里面输入: python manage.py runserver

查看文件目录结构，这些目录和文件的用处如下图所示：

本文的项目容器是DevelopmentProject，项目名称是BroadcastMonitorReceiver

编写第一个视图

打开 BroadcastMonitorReceiver/views.py，把下面这些 Python 代码输入进去：

from django.http import HttpResponse
def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")

如果想看见效果，我们需要将一个 URL 映射到它——这就是我们需要 URLconf 的原因了。为了创建 URLconf，请在 BroadcastMonitorReceiver目录里新建一个 urls.py 文件。

/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

下一步是要在根 URLconf 文件中指定我们创建的 BroadcastMonitorReceiver.urls 模块。在容器配置 DevelopmentProject/urls.py 文件的 urlpatterns 列表里插入一个 include()，如下：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('DevelopmentProject/', include('DevelopmentProject.urls')),
    path('admin/', admin.site.urls),
]

数据库配置

例如你创建了一个数据库如下图所示：

需要将数据库的逻辑结构与Django的model对应起来，我们可以使用其反向生成模型的原理进行操作。

使用命令：python manage.py inspectdb

会生成如下代码：

class Tasktable(models.Model):
    t_id = models.IntegerField(primary_key=True)
    c_date = models.DateTimeField(blank=True, null=True)
    c_time = models.TimeField(blank=True, null=True)
    uid = models.CharField(max_length=30, blank=True, null=True)
    username = models.CharField(max_length=50, blank=True, null=True)
    c_squence = models.CharField(max_length=255, blank=True, null=True)
    bandwidth = models.IntegerField(blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'tasktable'


class View(models.Model):
    v_id = models.CharField(primary_key=True, max_length=26)
    c_squence = models.CharField(max_length=255, blank=True, null=True)
    c_date = models.DateTimeField(blank=True, null=True)
    c_time = models.TimeField(blank=True, null=True)
    full_img_path = models.CharField(max_length=255, blank=True, null=True)
    fix_img_path = models.CharField(max_length=255, blank=True, null=True)
    rudio_img_path = models.CharField(max_length=255, blank=True, null=True)
    audio_path = models.CharField(max_length=255, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'view'

这些概念可以通过一个 Python 类来描述。利用上面生成代码去编辑 DevelopmentProject/models.py 文件

接下来我们主要的任务是：使用Django架构，写一个web的网络页面，其中左边是一个从数据库获取数据的导航栏表格，右边是表格每行对应的图片（要求图片实时去访问数据库，更新页面图片），点击表格的某一行，会将右边显示的图片放大。

创建视图函数和模板

base.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  {% block style %}{% endblock %}
</head>
<body>
  <div class="container">
    {% block content %}{% endblock %}
  </div>

  <div class="modal fade" id="itemDetailModal" tabindex="-1" role="dialog" aria-labelledby="itemDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  {% block script %}{% endblock %}
</body>
</html>

/index.htmlcontent

index.html

{% extends 'radiomonitor/base.html' %}
{% load static %}
{% block content %}
<h2>多信道广播检测</h2>
    <div class="row">
        <div class="col-md-3">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">频率</th>
                    </tr>
                </thead>
{#            显示数据#}
                <tbody>
                    {% for item in items %}
                    <tr data-id="{{ item.v_id }}">
                        <td>{{ forloop.counter }}</td>
                        <td>{{ item.c_squence }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="col-md-9">
            {% for item in items %}
                <tr data-id="{{ item.v_id }}">
            {#      <td>{{ item.c_squence }}</td>#}
                    <img src="{%  static "/1.png" %}" class="img-fluid mx-auto d-block">
                </tr>

            {% endfor %}
{#            <img src="" id="preview" class="img-fluid mx-auto d-block">#}
        </div>
    </div>


{#<table>#}
{#  <thead>#}
{#    <tr>#}
{#        <th>序号</th>#}
{#      <th>频率</th>#}
{#    </tr>#}
{#  </thead>#}
{#  <tbody>#}
{#    {% for item in items %}#}
{#    <tr data-id="{{ item.v_id }}">#}
{#        <td>{{ forloop.counter }}</td>#}
{#      <td>{{ item.c_squence }}</td>#}
{#    </tr>#}
{#    {% endfor %}#}
{#  </tbody>#}
{#</table>#}

{#{% endblock %}#}
{##}
{#{% block right %}#}
{#    <tbody>#}
{#    {% for item in items %}#}
{#    <tr data-id="{{ item.v_id }}">#}
{#      <td>{{ item.c_squence }}</td>#}
{#    <img src="{%  static "/1.png" %}">#}
{#    </tr>#}
{#    {% endfor %}#}
{#  </tbody>#}

{% endblock %}

{% block script %}
<script>
  // 发送 Ajax 请求获取 item_detail 页面的内容并在弹窗中显示
  function showItemDetail(item_id) {
    $.ajax({
      url: '/BroadcastMonitorReceiver/' + item_id + '/',
      success: function(data) {
        $('#itemDetailModal .modal-content').html(data);
        $('#itemDetailModal').modal('show');
      }
    });
  }

  $(function() {
    // 点击行时显示相应的 item_detail 内容
    $('tbody tr').click(function() {
      var item_id = $(this).data('id');
      showItemDetail(item_id);
    });
  });
</script>
{% endblock %}

在这个页面中，左边是一个表格，使用Bootstrap的table类来定义，然后在tbody中使用Django模板语言的循环语句来生成表格数据。每一行的<tr>标签设置了一个data-id属性，用于保存对应的图片ID。右边是一个<img>标签，用于显示图片。在页面加载完成后，通过jQuery来绑定表格行的click事件，点击时会将图片的src属性设置为对应图片的URL。

index/views.py

def index(request):
    template = loader.get_template('radiomonitor/index.html')
    items = View.objects.all()
    image_path = os.path.join(settings.BASE_DIR, 'static', 'images', '1.png')
    context = {
        'items': items,
    }
    return HttpResponse(template.render(context, request))

Viewcontextrender()render()/index.htmlcontext

现在，我们已经完成了使用Django实现这个web页面的所有步骤。最后，我们需要运行Django开发服务器来查看页面。可以使用以下命令启动开发服务器：

python manage.py runserver

显示的结果如下：

我们会发现图片的显示时一列，不太美观，希望把它弄成3xN这样子的排列。

这个可以使用forloop.counter|divisibleby:3方式实现，代码如如下：

<div class="image-grid">
                    {% for item in items %}
                        <img src="{%  static "/1.png" %}" class="img-fluid mx-auto d-block">
                        {% if forloop.counter|divisibleby:3 and not forloop.last %}
                            <div class="empty-container"></div>
                        {% endif %}
                    {% endfor %}
            </div>

添加css样式：

{% block style %}
  <style>
    .image-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: -10px;
    }

    .image-container {
      width: calc(33.33% - 20px);
      margin: 10px;
    }

    .image-container img {
      width: 100%;
    }

    .empty-container {
      width: calc(100% - 20px);
      margin: 5px;
    }
  </style>
{% endblock %}

这样就达到了排列效果：

接下来我们希望去实时更新这些动态的图片，

20230224

我们接到一个新的需求，就将文件图片的读取和展现方式进行调整，在电脑上建一个文件夹，将其设置为共享状态，然后可以通过file:\\LAPTOP-JEHT2L9G\cop网络访问如图所示。

注：这个是本地获取文件的操作，我们需要将其关键字段解耦，比如主机可以自己设置，可以是本地，也可以是另一台主机上面的共享文件夹。

接下来页面中的所有图片内容都通过先访问数据库，获取路径，在通过共享文件夹获取内容的方式展现在web端。

实现方式：

需要在Django中访问另一台计算机上的共享文件夹内的图像文件，可以使用Python的pySMB库来实现。pySMB库允许您使用SMB协议访问Windows共享文件夹。以下是使用pySMB库在Django中访问共享文件夹的步骤：

pySMB

pip install pysmb

遇到一个很恼火的问题是，页面的<img>标签的src为file://laptop-jeht2l9g/cop/1.png，然后浏览器可以正常访问，但web端渲染不出来。