Python-Django系列—部件
部件是 Django 对 HTML 输入元素的表示。部件处理 HTML 的渲染,以及从对应于部件的 GET/POST 字典中提取数据。
内置部件生成的 HTML 使用 HTML5 语法,目标是 <!DOCTYPE html>
。例如,它使用布尔属性,如 checked
而不是 XHTML 风格的 checked='checked'
。
一、指定部件
每当你在表单中指定一个字段时,Django 会使用一个默认的部件来显示数据类型。要想知道哪个字段使用的是哪个部件,请看 内置 Field 类 的文档。
但是,如果你想为一个字段使用不同的部件,你可以在字段定义中使用 widget 参数。例如:
from django import formsclass CommentForm(forms.Form):name = forms.CharField()url = forms.URLField()comment = forms.CharField(widget=forms.Textarea)
这将指定一个带有注释的表单,该表单使用一个较大的 Textarea 部件,而不是默认的 TextInput 部件。
二、为部件设置参数
许多部件都有可选的额外参数;它们可以在字段上定义部件时进行设置。在下面的例子中, years 属性被设置为 SelectDateWidget:
from django import formsBIRTH_YEAR_CHOICES = ["1980", "1981", "1982"]
FAVORITE_COLORS_CHOICES = {"blue": "Blue","green": "Green","black": "Black",
}class SimpleForm(forms.Form):birth_year = forms.DateField(widget=forms.SelectDateWidget(years=BIRTH_YEAR_CHOICES))favorite_colors = forms.MultipleChoiceField(required=False,widget=forms.CheckboxSelectMultiple,choices=FAVORITE_COLORS_CHOICES,)
三、继承自 Select
部件的部件
继承自 Select 部件的部件处理选择。它们向用户提供了一个可供选择的选项列表。不同的部件以不同的方式呈现这种选择;Select 部件本身使用 <select> HTML 列表表示,而 RadioSelect 使用单选按钮。
ChoiceField 字段默认使用 Select 小部件。小部件上显示的选项从 ChoiceField 继承,并且更改 ChoiceField.choices 将更新 Select.choices。例如:
>>> from django import forms
>>> CHOICES = {"1": "First", "2": "Second"}
>>> choice_field = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES)
>>> choice_field.choices
[('1', 'First'), ('2', 'Second')]
>>> choice_field.widget.choices
[('1', 'First'), ('2', 'Second')]
>>> choice_field.widget.choices = []
>>> choice_field.choices = [("1", "First and only")]
>>> choice_field.widget.choices
[('1', 'First and only')]
然而,提供 chips 属性的部件可以与非基于选择的字段一起使用——例如 CharField——但当选择是模型固有的,而不仅仅是表示部件时,建议使用 ChoiceField 为基础的字段。
四、自定义部件实例
当 Django 将一个部件渲染成 HTML 时,它只渲染了非常少的标记——Django 不会添加类名,或任何其他部件的特定属性。这意味着,例如,所有的 TextInput 部件在你的网页上看起来都是一样的。
有两种方法来定制部件: 每个部件实例 和 每个部件类。
1、样式化部件实例
如果你想让一个部件实例看起来与另一个不同,你需要在实例化部件对象并将其分配给表单字段时指定额外的属性(也许还需要在你的 CSS 文件中添加一些规则)。
例如,采取以下表单:
from django import formsclass CommentForm(forms.Form):name = forms.CharField()url = forms.URLField()comment = forms.CharField()
此表单将包括用于 name 和 comment 字段的 TextInput 小部件,以及用于 url 字段的 URLInput 小部件。每个都有默认的渲染 —— 没有 CSS 类,没有额外的属性:
>>> f = CommentForm(auto_id=False)
>>> print(f)
<div>Name:<input type="text" name="name" required></div>
<div>Url:<input type="url" name="url" required></div>
<div>Comment:<input type="text" name="comment" required></div>
在真实的网页上,你可能想要自定义这些。你可能希望评论的输入元素更大,并且你可能希望 'name' 小部件具有一些特殊的 CSS 类。还可以指定 'type' 属性以使用不同的 HTML5 输入类型。为此,你可以在创建小部件时使用 Widget.attrs 参数:
class CommentForm(forms.Form):name = forms.CharField(widget=forms.TextInput(attrs={"class": "special"}))url = forms.URLField()comment = forms.CharField(widget=forms.TextInput(attrs={"size": "40"}))
你也可以在表单定义中修改一个部件:
class CommentForm(forms.Form):name = forms.CharField()url = forms.URLField()comment = forms.CharField()name.widget.attrs.update({"class": "special"})comment.widget.attrs.update(size="40")
或者如果该字段没有直接在表单上声明(比如模型表单字段),可以使用 Form.fields 属性:
class CommentForm(forms.ModelForm):def __init__(self, *args, **kwargs):super().__init__(*args, **kwargs)self.fields["name"].widget.attrs.update({"class": "special"})self.fields["comment"].widget.attrs.update(size="40")
Django 会将额外的属性包含在渲染的输出中:
>>> f = CommentForm(auto_id=False)
>>> print(f)
<div>Name:<input type="text" name="name" class="special" required></div>
<div>Url:<input type="url" name="url" required></div>
<div>Comment:<input type="text" name="comment" size="40" required></div>
2、样式化部件类
有了部件,就可以添加静态资源(css 和 javascript)并更深入地定制它们的外观和行为。
简而言之,你需要对部件进行子类化,并且 定义一个内部“Media”类 或者 创建一个"media"属性。
这些方法涉及到一些高级的 Python 编程,在 表单静态资源 主题指南中有详细描述。
五、基础部件类
基础部件类 Widget 和 MultiWidget 被所有的 内置部件 子类化,可以作为自定义部件的基础。
1、Widget
class Widget(attrs=None)[source]
这个抽象类不能被渲染,但提供了基本属性 attrs。 你也可以在自定义部件上实现或重写 render() 方法。
attrs
包含要在渲染的部件上设置的 HTML 属性的字典。
>>> from django import forms
>>> name = forms.TextInput(attrs={"size": 10, "title": "Your name"})
>>> name.render("name", "A name")
'<input title="Your name" type="text" name="name" value="A name" size="10">'
如果你将属性赋值为 True
或 False
,它将被渲染为 HTML5 的布尔属性:
>>> name = forms.TextInput(attrs={"required": True})
>>> name.render("name", "A name")
'<input name="name" type="text" value="A name" required>'
>>>
>>> name = forms.TextInput(attrs={"required": False})
>>> name.render("name", "A name")
'<input name="name" type="text" value="A name">'
相关文章:
Python-Django系列—部件
部件是 Django 对 HTML 输入元素的表示。部件处理 HTML 的渲染,以及从对应于部件的 GET/POST 字典中提取数据。 内置部件生成的 HTML 使用 HTML5 语法,目标是 <!DOCTYPE html>。例如,它使用布尔属性,如 checked…...
开发者视角:轻量便捷的AI视觉训推一体机如何实现AI模型快速开发
一、行业背景 1)数据与算力基础夯实:互联网、物联网和移动互联网的普及使得视觉数据呈爆发式增长,为AI视觉训推技术提供了丰富的“燃料”。同时,GPU、TPU等计算芯片的广泛使用,以及云计算的兴起,让计算能力…...
基于Python(Django)+SQLite实现(Web)校园助手
校园助手 本校园助手采用 B/S 架构。并已将其部署到服务器上。在网址上输入 db.uplei.com 即可访问。 使用说明 可使用如下账号体验: 学生界面: 账号1:123 密码1:123 账户2:201805301348 密码2:1 # --------------…...
Django 入门指南:构建强大的 Web 应用程序
什么是 Django? Django 是一个开源的高层次 Python Web 框架,旨在快速开发安全且可维护的网站。它通过简化常见的 Web 开发任务,帮助开发者专注于开发应用的核心功能。Django 实现了“快速开发”和“尽量少的重复”的理念,提供了…...
一文了解相位阵列天线中的真时延
本文要点 真时延是宽带带相位阵列天线的关键元素之一。 真时延透过在整个信号频谱上应用可变相移来消除波束斜视现象。 在相位阵列中使用时延单元或电路板,以提供波束控制和相移。 市场越来越需要更快、更可靠的通讯网络,而宽带通信系统正在努力满…...
LangChain实现PDF中图表文本多模态数据向量化及RAG应用实战指南
如何用LangChain实现PDF多模态数据向量化及RAG应用实战指南 在大模型应用中,PDF文档因包含文本、表格、图片等异构数据,成为RAG(检索增强生成)系统的核心挑战。本文基于LangChain框架,结合多模态处理技术,…...
OkHttp入门
OkHttp 简介与使用示例 OkHttp 是一个高效的 HTTP 客户端,用于 Android、Java 应用程序以及 Kotlin 应用程序。它支持同步阻塞调用和异步调用,同时提供了强大的拦截器和重定向处理功能。OkHttp 由 Square 公司开发,因其高性能和易用性而广受…...
在ARM Linux应用层下驱动MFRC522
文章目录 1、前言2、IC卡 和 IC卡读卡器3、MFRC5223.1、寄存器集3.2、命令集3.3、数据操作3.4、基础函数编写3.4.1、MFRC522接线3.4.2、编写SPI操作函数3.4.3、编写MFRC522基础函数3.4.3.1、完整的mfrc522.h3.4.3.2、写寄存器和读寄存器3.4.3.3、复位引脚操作3.4.3.4、天线操作…...
力扣第446场周赛
有事没赶上, 赛后模拟了一下, 分享一下我的解题思路和做题感受 1.执行指令后的得分 题目链接如下:力扣 给你两个数组:instructions 和 values,数组的长度均为 n。 你需要根据以下规则模拟一个过程: 从下标 i 0 的第一个指令开始…...
close和shutdown
1.shutdown() 控制 TCP 连接的读写方向,不会关闭文件描述符,也不会触发四次挥手。 shutdown(sockfd, SHUT_RD): 关闭套接字的读方向。套接字不能再接收数据。 shutdown(sockfd, SHUT_WR): 关闭套接字的写方向。套接字不能再发送数据。 shutdown(sockfd…...
LeetCode算法题(Go语言实现)_54
题目 给你两个正整数数组 spells 和 potions ,长度分别为 n 和 m ,其中 spells[i] 表示第 i 个咒语的能量强度,potions[j] 表示第 j 瓶药水的能量强度。 同时给你一个整数 success 。一个咒语和药水的能量强度 相乘 如果 大于等于 success &a…...
.NET应用UI框架DevExpress XAF v24.2新版亮点:支持.NET 9
DevExpress XAF是一款强大的现代应用程序框架,允许同时开发ASP.NET和WinForms。DevExpress XAF采用模块化设计,开发人员可以选择内建模块,也可以自行创建,从而以更快的速度和比开发人员当前更强有力的方式创建应用程序。 在DevEx…...
前端通过jenkins和docker打包部署流程
通过jenkins实现镜像打包和上传 1.在jenkins上创建流水线任务 点击新建任务 填写任务名称 选多分支流水线 增加分支源 选git 添加并选择凭据(有项目权限的git账号密码) 填写分支的正则表达式,多分支使用^(分支名|分支名)$ 保存 …...
SpringBoot自定义验证器:企业级参数校验架构设计与实践
一、需求分析与技术选型 在复杂业务场景中,标准校验注解(如@NotBlank、@Pattern)往往无法满足特殊业务规则验证需求。例如: 需要校验字段值在预定义的枚举范围内多字段之间存在关联性校验(如起始时间不能晚于结束时间)需要动态查询数据库进行业务规则校验架构设计原则:…...
4U带屏基于DSP/ARM+FPGA+AI的电力故障录波装置设计方案,支持全国产化
4U带屏DSP/ARMFPGAAI电力故障录波分析仪,支持国产化,含有CPU主控模块,96路模拟量采集,256路开关量,通讯扩展卡等#电力故障录波#4U带屏#新能源#电力监测 主要特点 1)是采用嵌入式图形系统,以及…...
笔试题——第五周
目录 Day1 排序子序列 消减整数 最长上升子序列 Day2 爱吃素 相差不超过k的最多数 最长公共子序列(一) Day3 小红的口罩 春游 数位染色 Day4 素数回文 活动安排 合唱团 Day5 跳台阶扩展问题 包含不超过两种字符的最长子串 字符串的排列 Day6 ISBN号码 k…...
图论-Floyd算法
在搜索中bfs只适合无权图 若是碰到有权图最简单的方法就是用邻接矩阵-二维矩阵存储每个点对之间的权重,然后用floyd 并且邻接矩阵还可以处理重边的问题(用min) INFfloat(inf) ma[[INF]*n for _ in range(n)]for i in range(n):ma[i][i]0for i in rang…...
使用pyinstaller打包fastapi项目的问题记录
文章目录 PyInstaller 相关介绍作用使用方式Spec 文件介绍 FastAPI 相关介绍什么是 FastAPI?使用方式 使用 PyInstaller 打包 FastAPI 项目常见问题与解决方案 PyInstaller 相关介绍 作用 PyInstaller 是一个将 Python 程序打包成独立可执行文件的工具,…...
Java秒杀功能-案例
数据库表设计 CREATE TABLE user (id bigint(20) NOT NULL AUTO_INCREMENT,name varchar(100) NOT NULL,password varchar(100) NOT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8;CREATE TABLE order_info (id bigint(20) NOT NULL AUTO_INCREMENT,user_id bigi…...
Abp发布订阅
在 ABP(AspNet Boilerplate)框架里运用发布 - 订阅模式,有着多方面重要目的,以下为你详细阐述: 实现组件间的解耦 减少直接依赖:在传统的编程方式中,不同组件之间可能存在紧密的耦合关系&…...
docker部署ruoyi-vue-pro前后端详细笔记
docker部署ruoyi-vue-pro前后端详细笔记 参考:YuDaoCloud:Docker 部署 - 那个码农 1.准备工作 1.1 需要准备服务器,安装bt面板方便操作 if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wg…...
软考中级数据库系统工程师学习资料分享
软考中级数据库系统工程师考试对于很多 IT 从业者和计算机专业的大学生来说,是一个重要的职业资格认证。它不仅能够提升个人的专业技能,还能为职业发展增添有力的砝码。今天,我将为大家分享一套全面且实用的学习资料,帮助大家更好…...
RESTful学习笔记(一)
Web发展 一、API 程序硬件接口(Application Programming Interface),是预先定义好的逻辑函数,软件系统不同组成部分衔接的约定,直接调用函数,无序访问代码细节,分为SDK和Web应用接口两类 SDK…...
基于 FFmpeg 的音视频处理基础原理与实验探究
目录 1 基本知识1.1 解封装1.2 AAC和ADTS说明 1.3 H2641.3.1 H264编码结构解析1.3.2 NALU1.3.2 分类 2 实验1 探究音视频信息2.1 重要结构体介绍2.2 相关的API 3 实验二 提取AAC数据4 实验三 提取h264 1 基本知识 1.1 解封装 封装的逆向操作:封装是把音频流、视频流…...
spark和hadoop的区别
一、核心定位与架构差异 Hadoop • 定位:分布式存储与计算的基础框架,核心解决海量数据的存储(HDFS)和离线批处理计算(MapReduce)问题,适合对实时性要求不高的大规模数据离线处理场景。 • 架构…...
vue使用语音识别
vue使用语音识别 使用 Web Speech API 实现语音识别功能 语音转换的原理可以简单概括为以下几个步骤: 声音捕捉:将声波转化为数字信号。特征提取:分析声音中的关键特征。声学模型:将声音特征与音素匹配。语言模型:根据…...
代码随想录算法训练营day8(栈与队列)
华子目录 用栈实现队列思路 用栈实现队列 https://leetcode.cn/problems/implement-queue-using-stacks/description/ push(x) -- 将一个元素放入队列的尾部。 pop() -- 从队列首部移除元素。 peek() -- 返回队列首部的元素。 empty() -- 返回队列是否为空。思路 初始化两个栈…...
GPT,Genini, Claude Llama, DeepSeek,Qwen,Grok,选对LLM大模型真的可以事半功倍!
选对大模型真的可以事半功倍! 基于公开的技术报告、基准测试结果、在线反馈及用户使用情况,深入探讨各模型的特点、擅长领域及典型应用场景,为用户和开发者选择和应用合适的模型提供参考。 1. 引言 大型语言模型(Large Language…...
Unocss 类名基操, tailwindcss 类名
这里只列出 unocss 的可实现类名,tailwindcss 可以拿去试试用 1. 父元素移入,子元素改样式 <!-- 必须是 group 类名 --> <div class"group"><div class"group-hover:color-red">Text</div> </div>2…...
Flowable7.x学习笔记(十)分页查询已部署 BPMN XML 流程
前言 上一篇文章我们已经完成了流程的部署功能,那么下一步就是要激活流程了,但是我们要需要明确的指定具体要激活部署后的哪一条流程,所以我们先把已部署的基础信息以及具体定义信息分页查询出来,本文先把基础代码生成以及完成分页…...
【阿里云大模型高级工程师ACP学习笔记】2.1 用大模型构建新人答疑机器人
学习目标 在备考阿里云大模型高级工程师ACP认证时,学习《2.1用大模型构建新人答疑机器人》这部分内容,主要是为了掌握利用大模型技术构建高效答疑机器人的方法,提升在大模型应用开发领域的专业能力。具体目标如下: 掌握大模型API调用:学会通过API调用通义千问大模型,熟悉…...
设计模式深度总结:概念、实现与框架中的应用
【全网最全】23种设计模式思维导图详解 | 含React/Vue/Spring实战案例 导图概述 本文通过高清思维导图系统梳理了23种设计模式,分为创建型、结构型、行为型三大类,并标注了各模式在主流框架(如React、Vue、Spring)中的典型应用场…...
2025 活体识别+人脸认证工具类【阿里云api,需要先申请试用】
(1)获取活体检测的人脸URL地址和Token。 (2)活体检测成功后,使用Token验证人脸检测结果的一致性。 (3)对于检测结果一致的人脸照片,进行姓名、身份证号和照片的认证流程。 一、活…...
【HDFS】verifyEC命令校验EC数据正确性
verifyEC命令是HDFS里用于验证EC文件正确性的一个工具。这是一个非常实用的工具,能帮助我们确定EC的数据内容是否正确,并且如果不正确的话,还有可能会触发reportBadBlock给NN,让NN进行块的重构。 本文先介绍一下verifyEC命令的使用方法,再描述其实现原理细节。 一、命令…...
【PCIE730】基于PCIe总线架构的4路10G光纤通道适配器
板卡简介 PCIE730是一款基于PCI Express总线架构的4路10G光纤通道适配器,板卡具有4通道SFP万兆光纤接口,x8 PCIE主机接口,具有1组64位DDR3 SDRAM作为高速缓存,可以实现4通道光纤网络数据的高速采集、实时记录和宽带回放。 该板卡还…...
蚂蚁全媒体总编刘鑫炜再添新职,出任共工新闻社新媒体研究院院长
2025年4月18日,共工新闻社正式宣布聘任蚂蚁全媒体总编刘鑫炜为新媒体研究院院长。此次任命标志着刘鑫炜在新媒体领域的专业能力与行业贡献再次获得权威机构认可。 刘鑫炜深耕新媒体领域多年,曾担任中国新闻传媒集团新媒体研究院院长、蚂蚁全媒体总编等职…...
C++11——可调用对象
目录 lambda 表达式语法 捕捉列表 function bind 调整参数个数 参数顺序 lambda 表达式语法 lambda表达式本质上是匿名函数对象,该表达式在语法使用层是没有类型的,一般用auto或模板参数定义的对象去接收它的对象(模板参数定义的对象…...
【上位机——MFC】运行时类信息机制
运行时类信息机制的使用 类必须派生自CObject类内必须添加声明宏DECLARE_DYNAMIC(theClass)3.类外必须添加实现宏 IMPLEMENT_DYNAMIC(theClass,baseClass) 具备上述三个条件后,CObject::IsKindOf函数就可以正确判断对象是否属于某个类。 代码示例 #include <…...
数据中的知识产权问题
首席数据官高鹏律师团队编著 数据中的知识产权问题涉及法律、技术和社会多个层面,其复杂性随着数据价值的提升和数字化发展日益凸显。以下是核心要点的梳理和分析: 一、数据本身的知识产权属性 1. 原始数据(Raw Data) 通常不直…...
若依框架免登陆、页面全屏显示、打开新标签页(看板大屏)
1.免登陆:找到项目目录下src/permission.js,在白名单whiteList中添加上你的看板大屏路由地址,这样就不会校验该路由的token(这里我添加的是/mesBoard/mesqualityboard); 要注意的是此时免登陆进来也会报404…...
算法-策略(递归,二叉搜索)
分而治之 一个大问题不断拆成各种小问题,大问题与小问题的方向要一致。 递归函数(递减) 分析时间函数的两种方法:递归树(跟踪树) ,代换法。 例1 例2 这里的代换法注意,不要轻易的把常数加在一起,加在一起后看不出规…...
unity TEngine学习4
上一篇我们学习了UI部分,这一篇我们学习其他部分,按照老规矩还是先打开官方文档 ResourceModule 在官方文档里介绍了当前加载的设置,但是我们是小白看不懂,那就不管他内部怎么实现的,我们主要看下面的代码给的方法&am…...
掌握常见 HTTP 方法:GET、POST、PUT 到 CONNECT 全面梳理
今天面试还问了除了 get 和 post 方法还有其他请求方法吗,一个都不知道,这里记录下。 🌐 常见 HTTP 请求方法一览 方法作用描述是否幂等是否常用GET获取资源,参数一般拼接在 URL 中✅ 是✅ 常用POST创建资源 / 提交数据ÿ…...
在线查看【免费】 mp3,wav,mp4,flv 等音视频格式文件文件格式网站
可以免费在线查看 .docx/wps/Office/wmf/ psd/ psd/eml/epub/dwg, dxf/ txt/zip, rar/ jpg/mp3 m.gszh.xyz m.gszh.xyz 免费支持以下格式文件在线查看类型 支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx, xlam, xla, pages 等 Office 办…...
部署Kimi-VL-A3B-Instruct视频推理
部署Kimi-VL-A3B-Instruct视频推理 契机 ⚙ 最近国内AI公司月之暗面推出了Kimi-VL开源视觉模型。模型参数16.4B,但是推理时候激活参数2.8B。看了huggingface主页的Full comparison,在多项Benchmark的时候都展示出了不俗的实力。由于业务中使用了qwen-v…...
力扣面试经典150题(第二十四题)
问题 给定一个单词数组 words 和一个长度 maxWidth ,重新排版单词,使其成为每行恰好有 maxWidth 个字符,且左右两端对齐的文本。 你应该使用 “贪心算法” 来放置给定的单词;也就是说,尽可能多地往每行中放置单词。必…...
Electron Demo 的快速编译与启动
前言 本文将带你从零开始,快速搭建并运行一个基于 OpenIMSDK 的 Electron 应用。本项目以 OpenIMSDK 开源版为基础,借助 openim/electron-client-sdk 与 openim/wasm-client-sdk,能够同时构建 Web 端及桌面端(Windows、macOS、Lin…...
Web3核心技术解析:从区块链到C++实践
Web3作为下一代互联网的核心架构,正在通过区块链、智能合约、分布式存储等技术的融合,重塑数字世界的信任与协作模式。本文将从技术原理、应用场景及C实践案例三个维度,深入解析Web3的核心技术体系。 一、Web3的核心技术栈 1. 区块链&#x…...
Elasticsearch中的_source字段讲解
_source 在 Elasticsearch 查询中用于限制返回的字段,类似于 SQL 中的 SELECT 指定列。 代码示例: esSearchResults = es_service.search_documents({"query": {"terms": {"file_id":...
LlamaIndex 生成的本地索引文件和文件夹详解
LlamaIndex 生成的本地索引文件和文件夹详解 LlamaIndex 在生成本地索引时会创建一个 storage 文件夹,并在其中生成多个 JSON 文件。以下是每个文件的详细解释: 1. storage 文件夹结构 1.1 docstore.json 功能:存储文档内容及其相关信息。…...