simpleui

一、simpleui

一、simpleui

之前公司里，做项目前后端结合，要使用权限，要快速搭建后台管理，使用djagno的admin直接搭建，django的admin界面不好

因此有了第三方美化

#第三方的美化：
    -xadmin：作者弃坑了（通常是bug太多了），基于bootstrap+jq编写的 
    -simpleui： 基于vue编写的，界面更好看

现在阶段，一般前后端分离比较多：django+vue

因此需要一块带权限的前后端分离的快速开发框架，我们目前有两个选择
    -使用django-vue-admin（李强学长写的）
    -自己写

ps：如果刷新页面没有变化，就重启项目

1.1 使用步骤

1、安装

pip install django-simpleui

2、在app中注册(必须注册在最上面)

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

这时候就可以去admin后台界面看效果了

登陆界面：

目前我们没有添加别的表，为了方便后面的测试，我们需要导入之前图书管理系统用到的表

models.py

from django.db import models

# Create your models here.
class UserInfo(models.Model):
    username = models.CharField(max_length=32)
    password = models.CharField(max_length=32)



class Book(models.Model):
    nid = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32,verbose_name='图书名字',help_text='这里填图书名')
    price = models.DecimalField(max_digits=5, decimal_places=2, verbose_name='价格')
    publish_date = models.DateField(verbose_name='出版日期')

    publish = models.ForeignKey(to='Publish', to_field='nid', on_delete=models.CASCADE, verbose_name='出版社')
    authors = models.ManyToManyField(to='Author', verbose_name='作者')

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = '书籍'
        verbose_name_plural = verbose_name


class Author(models.Model):
    nid = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32, verbose_name='作者名')
    age = models.IntegerField(verbose_name='年龄')
    author_detail = models.OneToOneField(to='AuthorDetail', to_field='nid', unique=True, on_delete=models.CASCADE, verbose_name='作者信息的一对一外键')

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = '作者'
        verbose_name_plural = verbose_name


class AuthorDetail(models.Model):
    nid = models.AutoField(primary_key=True)
    telephone = models.BigIntegerField(verbose_name='手机号')
    birthday = models.DateField(verbose_name='生日')
    addr = models.CharField(max_length=64, verbose_name='住址')

    class Meta:
        verbose_name = '作者详情'
        verbose_name_plural = verbose_name


class Publish(models.Model):
    nid = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32, verbose_name='出版社名称')
    city = models.CharField(max_length=32, verbose_name='城市')
    email = models.EmailField(verbose_name='邮箱')

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = '出版社'
        verbose_name_plural = verbose_name

ps：

当我们在admin中进行注册后我们会发现admin后台管理界面上显示的这四张表的内容是定义时候的类名，这时候我们就需要在模型层中添加Meta类来定义他的名称。

这里我们用来两行代码来定义，之所以这么些是因为在只使用verbose_name来定义的时候，名称后面会多出一个s，这不太好看，因此需要使用第二种方式verbose_name_plural来命名，这种方式就不会在末尾出现s

数据库迁移后我们回顾一下编写bbs项目时的操作步骤，如果想让表在admin界面显示出来，时需要去admin.py进行注册的，这里也是一样

admin.py

from django.contrib import admin
from .models import Book, Publish, Author, AuthorDetail
# Register your models here.

admin.site.register(Book)
admin.site.register(Publish)
admin.site.register(Author)
admin.site.register(AuthorDetail)

添加完注册信息后，我们刷新网页就能看到这些表已经出现在admin后台管理界面上了，但是这时候我们可以看到虽然表中的字段的名称已经被我们更改掉了，但是我们使用的app的名称也看着不美观。

这时候我们就要去应用的apps.py文件中添加一条属性

apps.py

from django.apps import AppConfig


class App01Config(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'app01'
    verbose_name = '图书管理系统'

这个时候我们就会看到所有的地方都已经被我们替换成了中文

这时候我们点击左侧的书籍，开始添加数据

点击蓝色的增加按钮就会进入添加数据的界面

1.2 功能介绍

更多功能请去浏览官方文档：https://simpleui.72wo.com/docs/simpleui/quick.html#目录

部分功能讲解

自定义菜单

当我们需要使用simpleui的自定义菜单栏时，需要修改admin中注册的方式

这里我们以书籍表（book）为例子，先把原来的注册信息注释掉，然后再写上新的注册内容

admin.py

# admin.site.register(Book)

@admin.register(Book)
class BookAdmin(admin.ModelAdmin):
    list_display = ('nid', 'name', 'price', 'publish_date', 'publish')
    '模型层中有哪些字段，这里我们就要写上哪些字段名，多对多的字段不用写（他本质上是一张表）'

用新的方式注册了图书表后界面就会发生更改（更好看）

菜单栏中添加按钮

在上面的基础上，我们在admin.py文件中可以配置自定义按钮

admin.py

from django.contrib import admin
from .models import Book, Publish, Author, AuthorDetail
# Register your models here.

# admin.site.register(Book)
admin.site.register(Publish)
admin.site.register(Author)
admin.site.register(AuthorDetail)

@admin.register(Book)
class BookAdmin(admin.ModelAdmin):
    list_display = ('nid', 'name', 'price', 'publish_date', 'publish')

    # 增加自定义按钮
    actions = ['custom_button']

    def custom_button(self, request, queryset):
        print(queryset)
        '这是定义按钮作用的函数可以自行编写功能，这里只是简单的打印'

    custom_button.confirm = '你是否执意要点击这个按钮？'
    '这是点击了按钮之后出现的弹窗中的提示信息'
    # 显示的文本，与django admin一致
    custom_button.short_description = '测试按钮'
    '这是按钮的名称'

    # icon，参考element-ui icon与https://fontawesome.com
    # custom_button.icon = 'fas fa-audio-description'
    '这里是定义按钮前面的图标的'

    # # 指定element-ui的按钮类型，参考https://element.eleme.cn/#/zh-CN/component/button
    custom_button.type = 'danger'
    '这是更改按钮类型的配置'

    # # 给按钮追加自定义的颜色
    # custom_button.style = 'color:black;'

效果展示

调整左侧导航栏（自定义菜单）

这个功能需要我们在项目的配置文件中添加配置

#######simpleui---->左侧菜单栏
import time

SIMPLEUI_CONFIG = {
    'system_keep': False,
    'menu_display': ['图书管理', '权限认证', '张红测试'],  # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示，同时这里就是左侧菜单栏显示的内容.
    'dynamic': True,  # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
    'menus': [
        {
            'name': '图书管理',
            'app': 'app01',
            'icon': 'fas fa-code',
            'models': [
                {
                    'name': '图书',
                    'icon': 'fa fa-user',
                    'url': 'app01/book/'
                },
                {
                    'name': '出版社',
                    'icon': 'fa fa-user',
                    'url': 'app01/publish/'
                },
                {
                    'name': '作者',
                    'icon': 'fa fa-user',
                    'url': 'app01/author/'
                },
                {
                    'name': '作者详情',
                    'icon': 'fa fa-user',
                    'url': 'app01/authordetail/'
                },
            ]
        },
        {
            'app': 'auth',
            'name': '权限认证',
            'icon': 'fas fa-user-shield',
            'models': [
                {
                    'name': '用户',
                    'icon': 'fa fa-user',
                    'url': 'auth/user/'
                },
                {
                    'name': '组',
                    'icon': 'fa fa-user',
                    'url': 'auth/group/'
                },
            ]
        },
        {

            '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': '/show/',
                    'icon': 'fab fa-github'
                }]
        }
    ]
}

1、menu_display对应menus的name属性

2、这里的menus可以进行三次嵌套（可以写到三级菜单），但是在使用的时候需要分清楚指向的内容，如果是给项目的app定义菜单栏，就需要在menus中添加app属性

3、然后menus中我们需要填入url，这个url一开始我们可能不知道，但是我们访问一个错误的内部网址的然后他的网页上就会显示出目前有的内部的url，或是我们手动设置对应的路由。同时我们也可以填写一些外网的url进行访问。icon属性是设置图标

效果如下：

其他功能

这些功能都是在配置文件（settings.py）中添加配置信息来实现功能的

登录页面动态粒子效果

SIMPLEUI_LOGIN_PARTICLES = False  #登录页面动态粒子效果

默认图标替换

SIMPLEUI_LOGO = 'https://avatars2.githubusercontent.com/u/13655483?s=60&v=4'

登陆成功后admin界面首页右上方的github等信息窗口开关(服务器信息)

SIMPLEUI_HOME_INFO = False  #首页右侧github提示

快捷操作

SIMPLEUI_HOME_QUICK = False #快捷操作

1.3 展示大屏

我们在很多大型场馆，经常会看到一块大屏幕，上面动态实时展示着一些内容，看上去十分炫酷，这些其实也是很简单的。

我们直接去github或是gitee上搜展示大屏，找一个自己喜欢的下载下来或是直接用地址获取内容

# 监控大屏展示
	-https://search.gitee.com/?skin=rec&type=repository&q=%E5%B1%95%E7%A4%BA%E5%A4%A7%E5%B1%8F
        
    -就是前后端混合项目，js，css，图片对应好，就可以使用了

下载后的内容打开是这样的

我们把对应的js，css，图片下载下来存到我们自己项目的静态文件目录中（static），然后把他的html文件拷贝到templates目录内，再把对应的路径修改一下就可以使用了，需要用到什么变量的时候我们直接用模板语法写上去即可

posted @ 2023-05-11 17:08 致丶幻阅读(79) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Django

· web应用模式、API接口、接口测试工具postman、restful规范

· simpleui的使用

· 后台admin应用SimpleUI实战

· Simple UI快速上手

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）

公告

昵称：致丶幻
园龄： 2年7个月
粉丝： 27
关注： 31

+加关注

2025年3月

日

一

二

三

四

五

六

zhihuanzzh

simpleui

一、simpleui

1.1 使用步骤

1.2 功能介绍

1.3 展示大屏

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

推荐排行榜