当前位置：首页 > news >正文

Pycharm搭建一个Django项目

news 2026/1/5 22:40:57

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 文件。

在 BroadcastMonitorReceiver/urls.py 中，输入如下代码：

from django.urls import pathfrom . import viewsurlpatterns = [path('', views.index, name='index'),
]

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

from django.contrib import admin
from django.urls import include, pathurlpatterns = [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 = Falsedb_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 = Falsedb_table = 'view'

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

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

创建视图函数和模板

首先，我们可以使用Bootstrap来快速构建前端页面，具体可以在base.html中引入（对于Dgango的base模板不了解可以参考官网模板介绍）Bootstrap的CSS和JS文件，例如：

<!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>

接下来，我们需要创建一个名为DevelopmentProject/index.html的模板，用于显示web页面，我们在content区域中设置左右两个区域的布局，以下是一个示例模板：

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。

然后需要创建一个视图函数来显示web页面，该函数应该从数据库中获取数据，并将其传递给模板。假设我们的视图函数名为index，则可以在DevelopmentProject/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))

在上面的视图函数中，我们首先从数据库中获取所有的View对象，然后将其存储在context字典中，并将该字典作为第三个参数传递给render()函数。render()函数使用DevelopmentProject/index.html模板来渲染页面，并将context字典传递给该模板。

现在，我们已经完成了使用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 %}

这样就达到了排列效果：

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

Pycharm搭建一个Django项目

相关文章：

Pycharm搭建一个Django项目

浅析前端工程化中的一部曲——模块化

新版bing(集成ChatGPT)申请通过后在谷歌浏览器(Chrome)上的使用方法

Time-distributed 的理解

matlab 计算矩阵的Moore-Penrose 伪逆

简历制作方面的经验与建议

C语言--static、const、volatile关键字

Rust学习入门--【18】Rust结构体

LeetCode142 环形链表Ⅱ

JavaScript刷LeetCode拿offer-高频链表题

linux系统编程2--网络编程

Allegro如何重命名光绘操作指导

[PMLR 2018] Hyperbolic entailment cones for learning hierarchical embeddings

2023春季露营投影怎么选？轻薄投影极米Z6X Pro值得推荐

收藏，核心期刊的投稿、审稿、出刊流程详解

JVM类加载子系统

摄像头的镜头的几个知识点

分布式-分布式存储笔记

第十三届蓝桥杯国赛 C++ C 组 Java A 组 C 组 Python C 组 E 题——斐波那契数组（三语言代码AC）

多因子模型（MFM）

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

Linux --进程控制

A2A JS SDK 完整教程：快速入门指南

使用LangGraph和LangSmith构建多智能体人工智能系统

Webpack性能优化：构建速度与体积优化策略

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

6.9-QT模拟计算器

echarts使用graphic强行给图增加一个边框（边框根据自己的图形大小设置）- 适用于无法使用dom的样式