小蚂蚁开源，探索、发现、分享主流开源技术框架，搭建开源技术社区，共创美好开源生态！

Layui 是一个模块化前端 UI 框架，以简单、模块化和轻量级而闻名。然而，Django 是一个后端 Web 框架，主要用于处理数据库和逻辑。将 Layui 与 Django 结合使用可以提供一种强大的方式来构建 Web 应用，其中 Django 负责后端逻辑和数据库操作，而 Layui 负责前端 UI 和用户体验。

下面是一个简单的步骤，说明如何将 Layui 与 Django 结合使用：

设置 Django 项目：首先，你需要创建一个 Django 项目并设置好数据库。你可以使用 Django 的命令行工具 django-admin 来创建项目和应用。

创建前端页面：在你的 Django 项目中，你可以创建一个专门存放静态文件的文件夹（例如 static），并在其中创建一个用于存放 Layui 资源的文件夹（例如 layui）。你可以将 Layui 的 CSS、JS 和其他资源文件放在这个文件夹中。

配置 Django：在你的 Django 项目的设置文件中（例如 settings.py），你需要配置静态文件设置，以便 Django 知道在哪里查找你的静态文件。你可以添加以下代码：

"""Django settings for application project.Generated by 'django-admin startproject' using Django 3.2.3.For more information on this file, seehttps://docs.djangoproject.com/en/3.2/topics/settings/For the full list of settings and their values, seehttps://docs.djangoproject.com/en/3.2/ref/settings/"""import os.pathimport sysfrom pathlib import Path# Build paths inside the project like this: BASE_DIR / 'subdir'.from config import envfrom config.env import *BASE_DIR = Path(__file__).resolve().parent.parent# 自定义sys.path.insert(0, BASE_DIR)sys.path.insert(1, os.path.join(BASE_DIR, 'apps'))# Quick-start development settings - unsuitable for production# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/# SECURITY WARNING: keep the secret key used in production secret!SECRET_KEY = 'django-insecure-!kjxf&e0pn4nrl%0&9sqp7n!ld)(gtw7v@i3fwf3sqcsh4ymat'# SECURITY WARNING: don't run with debug turned on in production!DEBUG = True# 使用*通配符默认所有IP均可ALLOWED_HOSTS = ['*']# 设置项是否开启URL访问地址后面不为/跳转至带有/的路径APPEND_SLASH = True# Application definitionINSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    # 创建表、字段注释依赖包    'addcomments',    'application',    # 添加子应用名称    "captcha",    'application.login',    'application.level',    'application.position',    'application.dept',    'application.role',    'application.role_menu',    'application.city',    'application.item',    'application.item_cate',    'application.link',    'application.ad_sort',    'application.ad',    'application.notice',    'application.user',    'application.user_role',    'application.member_level',    'application.member',    'application.dict',    'application.dict_data',    'application.config',    'application.config_data',    'application.menu',    'application.analysis',    'application.config_web',    'application.upload',    'application.login_log',]MIDDLEWARE = [    'django.middleware.security.SecurityMiddleware',    'django.contrib.sessions.middleware.SessionMiddleware',    'django.middleware.common.CommonMiddleware',    # 'django.middleware.csrf.CsrfViewMiddleware',    'django.contrib.auth.middleware.AuthenticationMiddleware',    'django.contrib.messages.middleware.MessageMiddleware',    'django.middleware.clickjacking.XFrameOptionsMiddleware',]# 此配置用于解决弹窗被浏览器劫持问题X_FRAME_OPTIONS = 'SAMEORIGIN'ROOT_URLCONF = 'application.urls'TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        # 其中的BASE_DIR为项目根目录路径        'DIRS': [os.path.join(BASE_DIR, "templates")],        'APP_DIRS': True,        'OPTIONS': {            'context_processors': [                'django.template.context_processors.debug',                'django.template.context_processors.request',                'django.contrib.auth.context_processors.auth',                'django.contrib.messages.context_processors.messages',            ],            'libraries': {  # Adding this section should work around the issue.                # 自定义按钮组件                'widget': 'widget.widget',                # 查询按钮组件                'query': 'widget.query',                # 添加按钮组件                'add': 'widget.add',                # 编辑按钮组件                'edit': 'widget.edit',                # 删除按钮组件                'delete': 'widget.delete',                # 批量删除按钮                'dall': 'widget.dall',                # 添加子级                'addz': 'widget.addz',                # 导入数据组件                'imports': 'widget.imports',                # 导出数据组件                'export': 'widget.export',                # 开关组件                'switch': 'widget.switch',                # 全部展开                'expand': 'widget.expand',                # 全部折叠                'collapse': 'widget.collapse',                # 日期组件                'date': 'widget.date',                # 下拉选择组件                'select': 'widget.select',                # 图标组件                'icon': 'widget.icon',                # 提交按钮组件                'submit': 'widget.submit',                # 富文本组件                'editor': 'widget.editor',                # 单选按钮                'radio': 'widget.radio',                # 复选框组件                'checkbox': 'widget.checkbox',                # 图片上传                'image': 'widget.image',                # 图集上传                'album': 'widget.album',                # 站点栏目组件                'item': 'widget.item',                # 行政区划组件                'city': 'widget.city',                # 穿梭组件                'transfer': 'widget.transfer',                # 格式化字符串                'format': 'widget.format',            },        },    },]WSGI_APPLICATION = 'application.wsgi.application'# Database# https://docs.djangoproject.com/en/3.2/ref/settings/#databasesDATABASES = {    # 'default': {    #     'ENGINE': 'django.db.backends.sqlite3',    #     'NAME': BASE_DIR / 'db.sqlite3',    # }    "default": {        "ENGINE": env.DATABASE_ENGINE,        "NAME": env.DATABASE_NAME,        "USER": env.DATABASE_USER,        "PASSWORD": env.DATABASE_PASSWORD,        "HOST": env.DATABASE_HOST,        "PORT": env.DATABASE_PORT,    }}# Password validation# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validatorsAUTH_PASSWORD_VALIDATORS = [    {        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',    },    {        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',    },    {        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',    },    {        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',    },]# Internationalization# https://docs.djangoproject.com/en/3.2/topics/i18n/LANGUAGE_CODE = 'en-us'TIME_ZONE = 'Asia/Shanghai'USE_I18N = TrueUSE_L10N = TrueUSE_TZ = False# Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/3.2/howto/static-files/STATIC_URL = '/static/'STATICFILES_DIRS = [    os.path.join(BASE_DIR, "public/static"),]# Default primary key field type# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-fieldDEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'# 数据表前缀TABLE_PREFIX = locals().get('TABLE_PREFIX', "")# ======================== 验证码相关配置 ===========================CAPTCHA_IMAGE_SIZE = (200, 60)  # 设置 captcha 图片大小CAPTCHA_LENGTH = 6  # 字符个数CAPTCHA_TIMEOUT = 1  # 超时(minutes)CAPTCHA_OUTPUT_FORMAT = "%(image)s %(text_field)s %(hidden_field)s "CAPTCHA_FONT_SIZE = 40  # 字体大小CAPTCHA_FOREGROUND_COLOR = "#1d953f"  # 前景色CAPTCHA_BACKGROUND_COLOR = "#ffffff"  # 背景色CAPTCHA_NOISE_FUNCTIONS = (    'captcha.helpers.noise_null',    "captcha.helpers.noise_arcs",  # 线    "captcha.helpers.noise_dots",  # 点)# 随机字符验证码CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge'  # 字母验证码# CAPTCHA_CHALLENGE_FUNCT = "captcha.helpers.math_challenge"  # 加减乘除验证码

在前端页面中使用 Layui：在你的 HTML 文件中，你可以通过 <link> 和 <script> 标签来引入 Layui 的 CSS 和 JS 文件。确保这些标签位于 {% block content %} 和 {% endblock %} 之间，这样它们就会在页面内容加载时被包含进去。例如：

<!DOCTYPE html><html><!-- 头部开始 -->{% include "public/header.html" %}<!-- 头部结束 --><body><!-- 主体部分开始 --><div class="layui-fluid">    <div class="layui-card">        <div class="layui-card-body">            <!-- 内容区 -->            {% block content %}            {% endblock %}        </div>    </div></div><!-- 主体部分结束 --><!-- 脚部开始 -->{% include "public/footer.html" %}<!-- 脚部结束 --></body></html>

编写后端代码：在你的 Django 模型、视图和 URL 配置中，你可以编写后端逻辑来处理数据库操作、数据验证和与前端的交互。你可以使用 Django 的 ORM 来定义模型，使用视图函数来处理逻辑，使用 URL 配置来定义路由。

前后端交互：在前端，你可以使用 Layui 的各种组件（例如表单、分页器、弹出框等）来构建用户界面。在后端，你可以编写视图函数来处理用户请求、验证数据和与数据库进行交互。前后端之间可以通过 AJAX 或其他技术进行通信，以实现实时更新或异步操作。

测试和部署：在开发过程中，你应该定期测试你的应用以确保一切正常工作。一旦你完成了开发，你可以使用 Django 的部署工具（例如 Gunicorn 和 Nginx）将你的应用部署到生产环境。

通过以上步骤，你可以将 Layui 与 Django 结合使用，创建一个强大的 Web 应用。请注意，这只是一个基本的指南，具体的实现方式可能会根据你的项目需求和团队偏好而有所不同。

核心组件

+ 单图上传组件```{% image "avatar|头像|90x90|建议上传尺寸450x450|450x450" data.avatar "" 0 %}```+ 多图上传组件```{% album "avatar|图集|90x90|20|建议上传尺寸450x450" "" "png,jpg" 10 %}```+ 下拉选择组件```{% select "gender|1|性别|name|id" "1=男,2=女,3=保密" data.gender %}```+ 单选按钮组件```{% radio "gender|name|id" "1=男,2=女,3=保密" 1 %}```+ 复选框组件```{% checkbox "gender|name|id" "1=男,2=女,3=保密" 1 %}```+ 城市选择组件```{% city data.district_code 3 1 %}```+ 开关组件```{% switch "status" "是|否" data.status|default:1 %}```+ 日期组件```{% date "birthday|1|出生日期|date" data.birthday  %}```+ 图标组件```{{ "icon"|icon:data.icon }}```

案例分享

DjangoAdmin敏捷开发框架