Django的Admin后台快速美化详解
Django 框架的 Admin 后台确实强大，但是界面始终一成不变，而是看起来不太跟得上时代的审美。接下来我给大家介绍一款专业美化 Admin 界面的插件 SimpleUI （基于element-ui+vue开发），安装和配置极其方便，而且无需修改原来的代码。
源码地址：
码云：https://gitee.com/tompeppa/simpleui
Github：https://github.com/newpanjing/simpleui
1. 下载依赖
pip install django-simpleui
2. 配置settings.py
INSTALLED_APPS = [
'simpleui',
'django.contrib.admin',
....
]
重新启动以后你会发现界面已经发生了改变。
3. 自定义页面
对首页和侧边框进行自定义更新，你可以自定义首页展示的内容和侧边框栏目的排序和名称。在 settings.py 文件里面配制以下参数。
SIMPLEUI_INDEX = '/'
SIMPLEUI_HOME_INFO = False
SIMPLEUI_ANALYSIS = False
SIMPLEUI_DEFAULT_ICON = False
SIMPLEUI_CONFIG = {
'system_keep': True,
'dynamic': True,
'menu_display': ['线上服务申请', '服务记录列表', '用户和权限', '客户资料', '数据导入', '管理模块'],
'menus': [
{
'name': '线上服务申请',
'icon': 'fa fa-phone-square',
'models': [
{
'name': '维修服务申请',
'icon': 'fa fa-phone',
'url': '/htgl/app/serviceapply/'
},
{
'name': '保险服务申请',
'icon': 'fa fa-credit-card',
'url': '/htgl/app/insuranceapply/'
},
{
'name': '城市合伙人申请',
'icon': 'fa fa-users',
'url': '/htgl/app/partnerapply/'
},
]
},
{
'name': '服务记录列表',
'icon': 'fa fa-coffee',
'models': [
{
'name': '维修服务',
'url': '/htgl/app/servicerecord/',
'icon': 'fa fa-list-alt'
},
{
'name': '投保记录',
'url': '/htgl/app/insurancerecord/',
'icon': 'fa fa-list'
}
]
},
{
'name': '用户和权限',
'icon': 'fas fa-user-shield',
'models': [
{
'name': '用户',
'icon': 'fa fa-user',
'url': '/htgl/app/wxuser/'
},
{
'name': '权限分组',
'icon': 'fa fa-users-cog',
'url': '/htgl/auth/group/'
},
]
},
{
'name': '客户资料',
'icon': 'fa fa-address-book',
'models': [
{
'name': '客户列表',
'icon': 'fa fa-user',
'url': '/htgl/app/customer/'
},
{
'name': '车辆信息',
'icon': 'fa fa-car',
'url': '/htgl/app/carinfo/'
},
]
},
{
'name': '数据导入',
'icon': 'fa fa-upload',
'models': [
{
'name': '保险业绩数据',
'icon': 'fa fa-user',
'url': '/htgl/app/insurancerecordupload/'
},
]
},
{
'name': '管理模块',
'icon': 'fa fa-cogs',
'models': [
{
'name': '门店信息',
'url': '/htgl/app/storeinfo/',
'icon': 'fa fa-home'
},
{
'name': '保险出单公司',
'url': '/htgl/app/insurancecompany/',
'icon': 'fa fa-university'
},
{
'name': '工作人员',
'url': '/htgl/app/superior/',
'icon': 'fa fa-user-plus'
},
{
'name': '归属渠道',
'url': '/htgl/app/belongto/',
'icon': 'fa fa-paperclip'
},
{
'name': '服务套餐',
'url': '/htgl/app/servicepackage/',
'icon': 'fa fa-object-group'
},
{
'name': '机油套餐',
'url': '/htgl/app/oilpackage/',
'icon': 'fa fa-tint'
},
]
},
]
}
