Django 管理后台 使用 simple ui 美化

首先安装 simpleui

pip install django-simpleui

修改默认后台模板为simpleui 

  INSTALLED_APPS = [
      'simpleui',
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      ...
  ]

新建app 

python manage.py startapp testapp

编写模型

# Create your models here.

from django.db import models
from stdimage import StdImageField
from django.utils.safestring import mark_safe
#用户表
class User(models.Model):
    username = models.CharField(verbose_name='用户名',unique=True, max_length=64)
    head_img = StdImageField(upload_to='path/to/', blank=True,delete_orphans=True,
                          verbose_name=u'url')

    class Meta:
        db_table = 'user_info'
        verbose_name = '用户信息'
        verbose_name_plural = '用户信息'

    # 在后台列表显示图片
    def get_image_tag(self):
        if self.head_img:
            return mark_safe('<img src="%s" width="60" height="75" />' % self.head_img.url)
        else:
            return ' '

    get_image_tag.short_description = 'Photo'
    get_image_tag.admin_order_field = 'name'

    def __str__(self):
        return self.username

这里为了在后台列表能显示图片用到了stdimage 首次使用需要安装stdimage

pip install django-simpleui

并注册到INSTALL_APPS

INSTALLED_APPS = [
    'simpleui',
    'stdimage',  #上传图片
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

 在项目的url.py中添加图片路径

from django.contrib import admin

from django.urls import path, include,re_path
from django.views.static import serve

from 项目名.settings import MEDIA_ROOT

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^upload/(?P<path>.*)$', serve, {"document_root": MEDIA_ROOT}),
]

其中的upload是在setting.py设置的MEDIA_ROOT

# 配置 MEDIA_ROOT 作为你上传文件在服务器中的基本路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload')  # 注意此处不要写成列表或元组的形式
# 配置 MEDIA_URL 作为公用 URL，指向上传文件的基本路径
MEDIA_URL = '/upload/'

上传的文件会保存在 项目根目录/upload/path/to/

根据模板生成迁移文件，并迁移到数据库

python manage.py makemigrations testapp

python manage.py migrate testapp

将模型注册到admin.py中才能在管理后台中显示

from django.contrib import admin
from .models import User
# Register your models here.

@admin.register(User)
class User(admin.ModelAdmin):
    # 设置页面可以展示的字段
    # get_image_tag 是在模型中设置的显示图片函数，一定要添加上 不然后台不会显示
    list_display = ('username', 'head_img','get_image_tag')
    # 默认不配置的话，第一个字段会存在链接到记录编辑页面
    # list_display_links = None
    list_display_links = ('username',)

不要忘了将app注册到INSTALL_APPS

INSTALLED_APPS = [
    'simpleui',
    'stdimage',  # 上传图片
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'testapp.apps.TestappConfig', # 注册app
]

创建超级用户

python manage.py createsuperuser

配置数据库，这里用的是mysql数据库 

pip install pymysql

在settings.py中配置

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '数据库名',
        'USER': 'root',
        'PASSWORD': 'root',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}

在项目init.py中设置数据库为mysql

import pymysql
pymysql.install_as_MySQLdb()

然后就可以启动项目了

python manage.py runserver

 

 参考链接

快速上手指南 | Simple UI (72wo.com)

Django+SimpleUI快速开发指南 - 知乎 (zhihu.com)

使用django-simpleui后台主题（包含图片显示） - 简书 (jianshu.com)