美化后台管理Admin

芋圆社区 > 编程 > Django > 美化后台管理Admin

1754

2022-02-18

2022-10-17

Hey、小怪兽

安装SimpleUI

• Simpleui 是Django Admin的一个主题是一个基于Element-ui+Vue开发，重写和优化90%以上的页面
• 安装：
```
pip install django-simpleui
```
• 用pip安装Simpleui后，在自己项目的settings.py文件中INSTALLED_APPS的第一行加入Simpleui

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

• 升级更新Simpleui，我现在的版本是v2022.2.16
```
pip install django-simpleui --upgrade
```
• 安装完毕后进入Admin页面就可以看到了（这里我已经修改了名字和图标，如果未修改显示的是Django管理）

修改Simpleui

• 在settings.py配置图标，就是修改导航栏的Django管理左边的LOGO以及登录页面的LOGO

SIMPLEUI_LOGO = 'https://inhami.com/static/images/taro-48.png'

• 在随便一个包下的admin.py配置，header就是修改Django管理的文字，title就是修改页签的文字

admin.site.site_header = '芋圆社区后台管理'
admin.site.site_title = '芋圆社区后台管理'

• 配置好如下：
• 再回到settings.py，配置版本信息
```
SIMPLEUI_HOME_INFO = False
```
• 这个就是首页的Simpeui版本的信息，默认是True，我这里表示隐藏
• 配置快捷操作
```
SIMPLEUI_HOME_QUICK = False
```
• 也是首页的一个模块，默认为True
• 最近动作也是这样配置，默认为True
```
SIMPLEUI_HOME_ACTION = False
```
• 配置使用分析（官方描述默认开启，统计分析信息只是为了更好的帮助Simpleui改进，并不会读取敏感信息。并且分析数据不会分享至任何第三方）
• 如果使用分析为True，会收集分析，一天只上报一次分析数据
• 如果为False，则不收集分析信息
• 关闭Loading遮罩层（在2.1.5或以上的版本中生效），一般不需要修改
```
SIMPLEUI_LOADING = False
```
• 配置左侧导航栏，最多可以3级，目前是2级，第3级就继续加models就可以了，这里需要注意：
- system_keep，保留系统菜单，该字段用于告诉simpleui，是否需要保留系统默认的菜单，默认为False，不保留。如果改为True，自定义和系统菜单将会并存
- menu_display，过滤显示菜单和排序功能，该字段用于告诉simpleui，是否需要开启过滤显示菜单和排序功能，默认可以不用填写，开启认为传一个列表，如果列表为空，则什么也不显示。列表中的每个元素要对应到menus里面的name字段
- dynamic，开启动态菜单功能，该字段用于告诉simpleui，是否需要开启动态菜单功能，默认可以不用填写，开启为True，开启后，每次用户登陆都会刷新左侧菜单配置，需要注意的是：开启后每次访问admin都会重读配置文件，所以会带来额外的消耗
- name需要和model的name一样，比如我在models.py的user代码是这样的，那么如果我在配置SimpleUI的时候把name改成社区用户就不行了

class Meta:
    verbose_name = '用户'
    verbose_name_plural = verbose_name
    ordering = ['id']

- url需要填写正确，我这里url填写的是/admin/townbase/user/，如果你不知道你的url是啥，可以先不配置，点击原版的去看看，比如我点击原版的就是这样（admin固定的，townbase就是我的包名称，user就是我的model名）：

http://127.0.0.1:8000/admin/#/admin/townbase/user/

- icon的配置，'fab fa-github'这个其实是一个图标库FontAwesome里面的图标，可以点进官网去看看其他图标的代码修改就可以了

SIMPLEUI_CONFIG = {
    'system_keep': False,
    'menu_display': ['用户'],  # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
    'dynamic': True,  # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
    'menus': [
        {
            'name': '用户',
            'icon': 'fa fa-file',
            'models': [{
                'name': '用户',
                'url': '/admin/townbase/user/',
                'icon': 'fab fa-github'
            }]
        }]
}

• 我这样配置的话，就可以得到：

自定义Admin

• 基础的Admin页面是这样的（以我的追番Model为例子）：
• 这样的页面太简单了，有几点不够方便的点：
- 修改麻烦，我想修改奇蛋物语的内容，想简单地改追番的时间，那么我还得进去修改内容保存
- 没有搜索功能，我想搜一下我有没有看过侦探已死这部番，我需要得一个一个找过来，容易看漏
- 无法对比，无法比较青春波纹和奇蛋物语的信息
- 页面只显示100条，但是我想显示500甚至1000条
........
• 所以我们需要修改成能够满足我们需求的页面：
• 这里我们来到我们包的admin.py，我的是townbase-admin.py，在里面修改我的追番页面
• 首先导入需要的数据：

from django.contrib import admin
from .models import *

• 这里一条一条解决，先定义一个class，因为我的model是追番Anime，这里就定义一个AnimeAdmin：
```
class AnimeAdmin(admin.ModelAdmin):
```
• 最重要的一点！！！需要注册我的Anime和AnimeAdmin，这个网上的教程都没怎么提到，如果不注册就看不到效果：
```
admin.site.register(Anime, AnimeAdmin)
```
• 首先解决显示条数，显示500条数据：
```
list_per_page = 500
```
• 解决对比，list_display里的会显示在页面，这里的'name'，'role'，'type'都是model里的信息：

list_display = ['name', 'role', 'type', 'rank', 'num', 'allNum', 'times', 'date', 'tag']

# townbase-models.py
# 追番
class Anime(models.Model):
    name = models.CharField(max_length=40, verbose_name='名称')
    image = models.ImageField(upload_to='anime/%Y%m%d/', blank=True, verbose_name='图片')
    introduce = models.TextField(max_length=1000, verbose_name='备注')
    type = models.CharField(max_length=20, verbose_name='类型')
    rank = models.FloatField(verbose_name='评分')
    date = models.DateField(verbose_name='时间')
    role = models.CharField(max_length=40, verbose_name='主角')
    num = models.PositiveIntegerField(default=0, verbose_name='观看集数')
    allNum = models.PositiveIntegerField(default=0, verbose_name='总集数')
    times = models.PositiveIntegerField(default=0, verbose_name='次数')
    tag = models.PositiveIntegerField(default=0, verbose_name='标签')

    class Meta:
        verbose_name_plural = u'追番'

    def __str__(self):
        return self.name

• list_display_links可以像名称一样，点击可以进入编辑页面，默认第一个有这个属性：
```
list_display_links = ['name']
```
• list_editable可以选择要修改的字段：

list_editable = ['role', 'type', 'rank', 'num', 'allNum', 'times', 'date', 'tag']

• 可以直接在这个页面进行修改，修改后点击保存即可：
• search_field表示根据字段名进行搜索，这里我写了name，就是搜索会根据name来搜索：
```
search_fields = ['name']
```
• list_filter表示筛选，也是搜索筛选，但是和search_field不大一样，这个相当于下拉框选择，比方我添加了type和times，我就可以根据番的类型和看的次数筛选了：
```
list_filter = ['type', 'times']
```
• 完整代码如下：

# coding=UTF-8
from django.contrib import admin
from .models import *

# 之前上面的修改header，title的代码写在这里
admin.site.site_header = '芋圆社区后台管理'
admin.site.site_title = '芋圆社区后台管理'

class AnimeAdmin(admin.ModelAdmin):
    list_per_page = 100
    search_fields = ['name']
    list_filter = ['type', 'times']
    list_editable = ['role', 'type', 'rank', 'num', 'allNum', 'times', 'date', 'tag']
    list_display = ['name', 'role', 'type', 'rank', 'num', 'allNum', 'times', 'date', 'tag']


admin.site.register(Anime, AnimeAdmin)

拓展修改Simpleui

• 可以直接去修改Simpleui的代码，需要一定的Django基础，不然改不动
• 我的Simpleui在External Libraries的Lib的site-packages的simpleui里
• 还有一些其他action的修改，可以自己增加layer文件上传，弹窗等等，可以去Simpleui官网看
• 关于插件支持：
- django-import-export，simpleui对数据导入导出插件也做了支持
- admindoc，admindoc需要simpleui 3.3+ 版本
......

上一篇：Django使用Less

下一篇：FBV 和 CBV

美化后台管理Admin

安装SimpleUI

修改Simpleui

自定义Admin

拓展修改Simpleui

回复