把django的admin改造成ajax方式并结合easyui做前端

Question

研究了django算起来也有半年多时间了，django的开发方式非常方便，网上到处说他的orm设计不好，但我感觉是特色呢，结合他的admin功能，让我非常喜欢，只要把model创建好，注册一下，管理界面就出来了。因为不满意他的界面，所以也尝试过用easyui去改造他的界面，虽然功能都能实现了，但是代码还是有点混乱，想问有没有人也做过类似的改造，有好的想法交流交流？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要将 Django 的 Admin 改造成使用 AJAX 和 EasyUI 做前端，首先你需要熟悉 Django、Django Admin 和 EasyUI 的基本概念和语法。下面是一些关键步骤和示例代码：

步骤 1: 安装必要的库

确保你的环境已安装 django-admin-tools, django-extensions, django-bootstrap3, djangorestframework, django-jquery-ui 和 easyui. 如果没有安装这些库，可以使用以下命令进行安装：

pip install django-admin-tools django-extensions django-bootstrap3 djangorestframework django-jquery-ui easyui

步骤 2: 创建模型

首先，你需要定义一个简单的模型来展示如何创建表单和绑定数据。

from django.db import models

class Person(models.Model):
    name = models.CharField(max_length=50)
    email = models.EmailField()
    age = models.IntegerField()

    def __str__(self):
        return self.name

步骤 3: 使用 Django Admin

在 Django 中，可以通过 django-admin.py 来启动 Django 环境，并使用它来配置和运行 Admin。

配置 Django Admin

在 settings.py 文件中，添加 INSTALLED_APPS 到 MIDDLEWARE_CLASSES。

INSTALLED_APPS = [
    # ...
    'django_admin_tools',
]
MIDDLEWARE_CLASSES = [
    # ...
    'django_admin_tools.admin_view.DjangoAdminViewMiddleware',
]

然后，在 models.py 或者任何其他需要设置 Admin 的文件中，通过 Meta 类来配置 Admin 表单。

from django.contrib import admin
from .models import Person

class PersonAdmin(admin.ModelAdmin):
    list_display = ('name', 'email', 'age')
    search_fields = ('name',)
    list_filter = ('age',)

admin.site.register(Person, PersonAdmin)

步骤 4: 使用 EasyUI

接下来，你可以使用 EasyUI 来构建前端界面。这里我们仅提供一个基础的例子，展示如何使用 easyui.widgets.FormPanel 创建表单组件。

<form id="person-form" data-options="model: model, width: 800">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"/>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"/>
    </div>
    <div>
        <label for="age">Age:</label>
        <input type="number" id="age" name="age"/>
    </div>
    <button type="submit">Save</button>
</form>

<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/easyui.all.min.js"></script>
<script>
$(function () {
    $('#person-form').formPanel({
        url: '/admin/person/', // 替换为实际的 URL
        formModel: 'Person',
        onBeforeSubmit: function (data) { // 在提交之前处理数据
            $.ajax({
                url: data.url,
                type: 'POST',
                data: data.formModel,
                success: function (response) {
                    if (response.success) {
                        alert('Form submitted successfully!');
                    } else {
                        alert(response.message);
                    }
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        }
    });
});
</script>

结论

这只是一个基础的示例，你可能需要根据具体需求调整样式、布局和功能。EasyUI 提供了许多灵活的功能，如分页、搜索等，可以帮助你构建更复杂的界面。

如果你对 Django Admin 的使用有任何疑问，或者需要进一步的帮助，请随时提问！