Django动态Admin Panel搭建指引：无需代码修改产品及网站内容

一、先把核心Model搞对（这是Admin的基础） #

你需要两个Model分别对应产品和网站通用内容，直接在models.py里写：

1. 产品模型（管理产品图片+详情）

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=200, verbose_name="产品名称")
    # 产品主图，upload_to指定存储路径，需先配置MEDIA相关设置
    main_image = models.ImageField(upload_to="product_images/", verbose_name="产品主图")
    # 详情用TextField，后续可替换为富文本字段支持格式编辑
    details = models.TextField(verbose_name="产品详情")
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

2. 网站通用内容模型（管理任意段落/文本）

用slug字段做唯一标识，方便前端定位调用，无需修改模板即可替换内容：

class SiteContent(models.Model):
    # 示例："homepage_hero_text"、"about_us_paragraph"，用于模板定位
    slug = models.SlugField(unique=True, verbose_name="内容标识（唯一）")
    title = models.CharField(max_length=200, verbose_name="内容标题（可选）")
    content = models.TextField(verbose_name="内容正文")
    # 支持添加配套图片，比如首页横幅图
    content_image = models.ImageField(upload_to="site_images/", blank=True, null=True, verbose_name="配套图片")

    def __str__(self):
        return self.title or self.slug

二、配置媒体文件存储（解决图片上传问题） #

在settings.py中添加以下配置：

MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'

再在项目根目录的urls.py中补充：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的其他路由，比如path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

三、注册模型到Django Admin（自动生成管理界面） #

在admin.py中注册两个模型，Django会自动生成完整的增删改查界面：

from django.contrib import admin
from .models import Product, SiteContent

# 基础注册，满足核心功能需求
admin.site.register(Product)
admin.site.register(SiteContent)

四、优化Admin界面（更贴近无代码的直观操作） #

不用写前端，简单配置就能让界面更易用：

1. 产品列表添加图片预览

from django.utils.safestring import mark_safe

class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'main_image_preview')
    
    def main_image_preview(self, obj):
        if obj.main_image:
            return mark_safe(f'<img src="{obj.main_image.url}" width="50" height="50" />')
        return "无图片"
    main_image_preview.short_description = "图片预览"

admin.site.register(Product, ProductAdmin)

2. 自动生成内容标识（slug）

避免手动输入，系统根据标题自动生成唯一标识：

class SiteContentAdmin(admin.ModelAdmin):
    prepopulated_fields = {'slug': ('title',)}  # 输入标题时自动生成slug
    list_display = ('slug', 'title')

admin.site.register(SiteContent, SiteContentAdmin)

3. 接入富文本编辑器（可选，让内容编辑更直观）

安装django-ckeditor（执行pip install django-ckeditor），在settings.py的INSTALLED_APPS中添加'ckeditor'，然后修改Model字段：

from ckeditor.fields import RichTextField

class Product(models.Model):
    # 替换原TextField为富文本字段
    details = RichTextField(verbose_name="产品详情")

class SiteContent(models.Model):
    content = RichTextField(verbose_name="内容正文")

此时Admin中的内容编辑框会支持加粗、换行、插入图片，完全无需手写代码。

五、前端模板调用数据（实现修改后自动同步） #

1. 产品详情页示例

# 假设视图已将Product对象传入模板，变量名为product
<h1>{{ product.name }}</h1>
<img src="{{ product.main_image.url }}" alt="{{ product.name }}">
<div>{{ product.details|safe }}</div>

2. 通用段落调用示例

比如首页介绍段落在Admin中创建的slug为homepage_intro，模板中这样调用：

{% load static %}
{% get_object_or_404 SiteContent, slug="homepage_intro" as intro_content %}
<h2>{{ intro_content.title }}</h2>
{% if intro_content.content_image %}
<img src="{{ intro_content.content_image.url }}" alt="">
{% endif %}
<div>{{ intro_content.content|safe }}</div>

六、测试使用流程 #

1. 创建超级用户：执行python manage.py createsuperuser
2. 启动服务器：执行python manage.py runserver
3. 访问/admin登录，即可直接在界面中添加/修改产品、网站内容，前端会自动同步更新。

内容的提问来源于stack exchange，提问作者Jemin Ajudiya