Element-Plus开发的Django后台UI框架​

        vue-pure-admin是一款开源完全免费且开箱即用的中后台管理系统模版。完全采用 ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss等主流技术开发.它可以帮助您快速搭建企业级中后台，提供现成的开箱解决方案及丰富的示例。

该框架提供有针对Django的示例，非常适合开发去学习使用。

项目地址：点击前往

前端代码:https://github.com/nineaiyu/xadmin-client后端代码:https://github.com/nineaiyu/xadmin-server预览地址:https://xadmin.dvcloud.xin/(登录用户名：admin 密码：admin123)

安装使用

下载前后端代码，进行本地初始化，即可进行使用。

前端

git clone https://github.com/nineaiyu/xadmin-client.gitnpm install #初始化安装依赖npm dev#启动平台#根目录下的配置文件├── .env  # 全局环境变量配置（当 .env 文件与 .env.development、.env.production、.env.staging 这三个文件之一存在相同的配置 key 时，.env 优先级更低）├── .env.development  # 开发环境变量配置├── .env.production  # 生产环境变量配置├── .env.staging  # 预发布环境变量配置#修改api配置文件.env.production，将 api 域名修改为自己服务器，然后进行构建npm build #打包项目

后端

git clone https://github.com/nineaiyu/xadmin-server.git#将代码下载到本地#进入到server目录#打开配置文件server/settings.py,修改为自己的mysql服务配置DATABASES = {    'default': {        'ENGINE': 'django.db.backends.mysql',        'NAME': 'xadmin',        'USER': 'server',        'PASSWORD': 'KGzKjZpWBp4R4RSa',        'HOST': 'mariadb',        'PORT': 3306,        'CONN_MAX_AGE': 600,        # 设置MySQL的驱动        # 'OPTIONS': {'init_command': 'SET storage_engine=INNODB'},        'OPTIONS': {'init_command': 'SET sql_mode="STRICT_TRANS_TABLES"', 'charset': 'utf8mb4'}    },    # "default": {    #     "ENGINE": "django.db.backends.sqlite3",    #     "NAME": BASE_DIR / "db.sqlite3",    # }}
#生成数据表并迁移python manage.py makemigrationspython manage.py migrate
#创建管理员账户python manage.py createsuperuser
#启动程序python manage.py start all

新应用开发流程
1.通过命令创建应用一个movies的应用

python manage.py startapp movies

2.在应用目录下添加应用配置 config.py，用与系统自动读取配置

from django.urls import path, include
# 路由配置，当添加APP完成时候，会自动注入路由到总服务URLPATTERNS = [    path('api/movies/', include('movies.urls')),]
# 请求白名单，支持正则表达式，可参考settings.py里面的 PERMISSION_WHITE_URLPERMISSION_WHITE_REURL = []

3，若要使用字段权限，则需要继承 BaseModelSerializer 参考 system/utils/serializer.py​​​​​​​

class ModelLabelFieldSerializer(BaseModelSerializer):    class Meta:        model = models.ModelLabelField        fields = ['pk', 'name', 'label', 'parent', 'created_time', 'updated_time', 'field_type_display']        read_only_fields = ['pk', 'name', 'label', 'parent', 'created_time', 'updated_time']
    field_type_display = serializers.CharField(source='get_field_type_display', read_only=True)

看一下效果图

pc端

移动端