Element-Plus开发的Django后台UI框架vue-pure-admin

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

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

![图片](http://banmag.cn:8089/i/2024/06/28/667e566d59a68.webp)

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

其官方文档比较全面，安装、开发、打包、具体使用指南等比较全面，还有配套有视频教程。

![图片](http://banmag.cn:8089/i/2024/06/28/667e566fc88bf.gif)

**安装使用**

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

前端

```

git clone https://github.com/nineaiyu/xadmin-client.git
npm 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 makemigrations
python 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_URL
PERMISSION_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端**![图片](http://banmag.cn:8089/i/2024/06/28/667e566d67676.webp)

![图片](http://banmag.cn:8089/i/2024/06/28/667e566d721c0.webp)

![图片](http://banmag.cn:8089/i/2024/06/28/667e566d70ee1.webp)

移动端

![图片](http://banmag.cn:8089/i/2024/06/28/667e566d77128.webp)

参考链接

```
官方文档：https://yiming_chang.gitee.io/pure-admin-doc/pages/introduction/
项目github：https://github.com/pure-admin/vue-pure-admin
视频教程：https://www.bilibili.com/video/BV1kg411v7QT/
```

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

Element-Plus开发的Django后台UI框架vue-pure-admin