Django4.1 Web项目开发，simpleui 后台主题框架安装以及使用

󰃭 2022-09-13

1. 简介

  1. simpleui 是使用Element-UI + Vue实现的，基于django后台管理的主题
  2. 漂亮、简洁增强django内置的后台管理界面
  3. 内置多种主题可以选择
  4. pip 快速安装，配置简单
  5. 多标签页面，使用更方便

2. 创建项目环境

# 创建python虚拟环境
$ python -m venv photoenv

# 进入虚拟环境
$ source photoenv/bin/activate

# 安装 Django4
$ pip install django

# 安装 simpleui
$ pip install django-simpleui

3. 创建项目

# 创建项目
$ django-admin startproject AIPhoto

# 创建子应用
$ django-admin startapp AIPhotoApp

# 测试网站运行
$ cd AIPhoto
$ python manage.py runserver

用浏览器打开 http://127.0.0.1:8000/ 可以看到Django的页面

4. 项目配置 simpleui

4.1 使用编辑器编辑 settings.py 文件，加入simpleui

# 增加 simpleui 应用
INSTALLED_APPS = [
    'simpleui',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

# 修改数据库配置
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'aiphoto',
        'USER': 'root',
        'PASSWORD': '1234haha',
        'HOST': '127.0.0.1',
        'PORT': '33306',
    }
}

4.2. 配置完成后，创建数据库，并且重新启动服务

# 创建admin相关的表
$ python manage.py migrate

# 创建超级管理员，这个用户和密码信息要记住，登录管理平台需要用到
$ python manage.py createsuperuser

# 重新启动服务,
$ python manage.py runserver

4.2 浏览器访问 https://127.0.0.1:8000/admin，使用超级管理员的用户和密码登录

5. 配置 simpleui 的 admin 管理界面

5.1 修改 settings.py 的基本配置

# 设置中文
LANGUAGE_CODE = 'zh-hans'

# 设置上海时区 
TIME_ZONE = 'Asia/Shanghai'

# 设置 simpleui logo
SIMPLEUI_LOGO = '/static/image/aiphoto.png'

# 设置查找静态资源
STATICFILES_DIRS = [
      os.path.join(BASE_DIR, "static"),
]

# 移除左侧广告
SIMPLEUI_HOME_INFO = False
SIMPLEUI_ANALYSIS = False

# 配置左侧菜单
SIMPLEUI_CONFIG = {
    'system_keep': False,
    'menu_display': ['权限认证', 'ai绘图'],      # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
    'dynamic': True,    # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
    'menus': [
        {
            'app': 'auth',
            'name': '权限认证',
            'icon': 'fas fa-user-shield',
            'models': [{
                'name': '管理员列表',
                'icon': 'fa fa-user-secret',
                'url': 'auth/user/'
            }]
        },
        {
            'app': 'aiphotoapp',
            'name': 'ai绘图',
            'icon': 'fa fa-user-md',
            'models': [
                {
                    'name': '活动用户表',
                    'icon': 'fa fa-user',
                    'url': '/admin/aiphotoapp/users/'
                },
                {
                    'name': 'ai密钥',
                    'icon': 'fa fa-key',
                    'url': '/admin/aiphotoapp/stability_keys/'
                }
            ]
        }
    ]
}

5.2 设置管理后台的标题，打开一个应用的 admin.py 文件

admin.site.site_header = 'AI绘画管理后台'
admin.site.site_title = 'AI绘画管理后台'
admin.site.index_header = 'AI绘画管理后台'

5.3 浏览器访问 https://127.0.0.1:8000/admin，使用超级管理员的用户和密码登录