Simple UI混合开发的必经之路~

Simple UI快速上手

在混合开发的模式下，如果想使用django admin，又嫌弃后台不符合你的审美？Simple UI给你想要的答案，我不是打广告的~

介绍

🚀simpleui 是django admin的一个主题 是一个基于element-ui+vue开发，重写和优化90%以上的页面。 与suit是同类产品。我们是一个更符合国人审美和使用习惯的一个主题

特点

👍 内置28款流行的主题

⚡️ pip闪电安装100%兼容原生admin无需修改代码

✨ 多标签页面，各个模块更加清晰明了

🎯 配置简单，极速上手，在settings.py中加入simpleui后启动立即生效，效率提升 100%！让后端开发得心应手。

☕️ Element-UI + Vue 加持，让古老的django admin 焕然一新。

支持django和python版本

支持的Python版本

支持的Django版本

安装

pip install django-simpleui

在自己项目的settings.py文件中INSTALLED_APPS的第一行加入simpleui

# Application definition

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

模型

from django.db import models

# Create your models here.

class Book(models.Model):
    name = models.CharField(max_length=32,help_text='书名')
    price = models.DecimalField(max_digits=5, decimal_places=2,help_text='价钱')
    author = models.CharField(max_length=32,help_text='作者')

    # 对象描述，显示书名
    def __str__(self):
        return self.name

    # 表名中文解释
    class Meta:
        '''
        verbose_name 顾名思义 起一个复杂点的名称，一般用来作中文解释

        verbose_name_plural 顾名思义是一个复数名称，因中文没有复数
        但django有时又会将用户的驼峰命名拆成单个词，给最后的词加复数，和用户的本义不符，
        因些加了这样一个选项来处理尴尬 比如 Blog Articals 或是 分类管理s
        '''
        # verbose_name = '图书表'
        verbose_name_plural = '图书表'

admin

from django.contrib import admin

from .models import Book

# Register your models here.

class BookAdmin(admin.ModelAdmin):
    # 设置列表可显示的字段
    list_display = ('name', 'price', 'author')
    # 设置过滤选项
    list_filter = ('name', 'price')

admin.site.register(Book, BookAdmin)

登录

主页面

自定义菜单

import time
SIMPLEUI_CONFIG = {
    'system_keep': False,
    'menu_display': ['Simpleui', '测试', '权限认证', '动态菜单测试'],      # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
    'dynamic': True,    # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
    'menus': [{
        'name': 'Simpleui',
        'icon': 'fas fa-code',
        'url': 'https://gitee.com/tompeppa/simpleui'
    }, {
        'app': 'auth',
        'name': '权限认证',
        'icon': 'fas fa-user-shield',
        'models': [{
            'name': '用户',
            'icon': 'fa fa-user',
            'url': 'auth/user/'
        }]
    }, {
        # 自2021.02.01+ 支持多级菜单，models 为子菜单名
        'name': '多级菜单测试',
        'icon': 'fa fa-file',
      	# 二级菜单
        'models': [{
            'name': 'Baidu',
            'icon': 'far fa-surprise',
            # 第三级菜单 ，
            'models': [
                {
                  'name': '爱奇艺',
                  'url': 'https://www.iqiyi.com/dianshiju/'
                  # 第四级就不支持了，element只支持了3级
                }, {
                    'name': '百度问答',
                    'icon': 'far fa-surprise',
                    'url': 'https://zhidao.baidu.com/'
                }
            ]
        }, {
            'name': '内网穿透',
            'url': 'https://www.wezoz.com',
            'icon': 'fab fa-github'
        }]
    }, {
        'name': '动态菜单测试' ,
        'icon': 'fa fa-desktop',
        'models': [{
            'name': time.time(),
            'url': 'http://baidu.com',
            'icon': 'far fa-surprise'
        }]
    }]
}

更多操作参考官网：Simple UI