摘要:如下如下大致就是这样,我们现在开始重写。如下这里没有进行修改,只是在原基础上增加了一个标签。修改一下之前的如下然后在修改如下排除数据库的标签美化可以通过重写传参数自定义标签美化自定义标签美化最后将我们用到的库导入即可。
sass项目视频地址:https://www.bilibili.com/video/BV1uA411b77M
搭建虚拟环境链接:https://blog.csdn.net/weixin_45859193/article/details/115408555
采用django3.2.6版本,以untitled7为根目录创建的项目名为web,在web项目中的view.py编写所有视图,templates文件存放模板标记语言、script存放脚本测试,数据库采用sqlite3, ModelForm美化标签相关操作在form文件中,static存放第三方库及静态文件
urls.py如下:
from django.conf.urls import url, includeurlpatterns = [ url(r"^web/", include("web.urls"))]
web/urls.py如下:
from django.conf.urls import urlfrom web import viewsurlpatterns = [ # ModelForm美化相关 url(r"register/", views.register, name="register"), url(r"radio/", views.radio, name="radio"), # 图片验证码相关 url(r"login/", views.login, name="login"), url(r"image_code/", views.image_code, name="image_code"),]
概述:搭配通过django中自行通过ModelForm渲染标签时使用bootstrap样式。
示例:创建一个用户表结构示例。
models.py如下:
class UserInfo(models.Model): username = models.CharField(verbose_name="用户名", max_length=32) email = models.EmailField(verbose_name="邮箱", max_length=32) phone = models.CharField(verbose_name="手机号", max_length=32) password = models.CharField(verbose_name="密码", max_length=32)
通过sqllite3创建控制台输入:
python manage.py makemigrationspython manage.py migrate
BootStrapForm类(重写django渲染标签样式
)如下:
class BootStrapForm(object): bootstrap_class_exclude = [] # 初始化方法 def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) # 每个字段的字段名和字段值 for name, field in self.fields.items(): if name in self.bootstrap_class_exclude: continue old_class = field.widget.attrs.get("class", "") field.widget.attrs["class"] = "{} form-control".format(old_class) field.widget.attrs["placeholder"] = "请输入{}".format(field.label)
视图函数如下:
from django.shortcuts import renderfrom django.core.validators import RegexValidatorfrom django import formsfrom web import modelsfrom web.form.bootstarp import BootStrapFormclass RegisterModelForm(BootStrapForm, forms.ModelForm): # 这里如果想排除某个字段可以使用 bootstrap_class_exclude = [字段] bootstrap_class_exclude = [] # 重写字段规则 phone = forms.CharField(label="手机号", validators=[RegexValidator(r"^(1[3|5|6|8]/d{9}$)", "手机号格式错误")]) password = forms.CharField(label="密码", widget=forms.PasswordInput()) code = forms.CharField(label="验证码") class Meta: model = models.UserInfo fields = "__all__"def register(request): form = RegisterModelForm() return render(request, "register.html", {"form": form})
html模板如下:
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">head><style> .account { width: 600px; margin: 0 auto; }style><body><div class="account"> <h1>注册h1> {% for field in form %} {% if field.name == "code" %} <div class="form-group"> <label for="{{ field.id_for_label }}">{{ field.label }}label> <div style="display: flex;justify-content: space-between;flex-direction: row-reverse"> <div class="col-xs-5"> <input id="btnSms" class="btn btn-info" type="button" value="获取验证码"> div> <div class="col-xs-5"> {{ field }} <span class="error-msg">span> div> div> div> {% else %} <div class="form-group"> <label for="{{ field.id_for_label }}">{{ field.label }}label> {{ field }} <span class="error-msg">span> div> {% endif %} {% endfor %} <button type="button" class="btn btn-info">登录button>div>body>html>
此时访问路由如下:
概述:对于标签而言是通过django.widgets.forms中通过模板标记语言渲染出来的,但是如果我们想用自己的也可以通过重写的方式修改标签样式,这里拿select、radio标签来展示。
为了方便展示我们创建一个项目表。
models.py如下:
class Project(models.Model): COLOR_CHOICES = ( (1, "#56b8eb"), (2, "#f28033"), (3, "#ebc656"), (4, "#a2d148"), (5, "#20BFA4"), (6, "#7461c2"), (7, "#20bfa3"), ) name = models.CharField(verbose_name="项目名", max_length=32) color = models.SmallIntegerField(verbose_name="颜色", choices=COLOR_CHOICES, default=1) desc = models.CharField(verbose_name="项目描述", max_length=255, null=True, blank=True) priority_choices = ( ("danger", "高"), ("warning", "中"), ("success", "低"), ) priority = models.CharField(verbose_name="优先级", max_length=12, choices=priority_choices, default="danger")
通过sqllite3创建控制台输入:
python manage.py makemigrationspython manage.py migrate
进入django.forms生成的函数RadioSelect源码:
class RadioSelect(ChoiceWidget): input_type = "radio" template_name = "django/forms/widgets/radio.html" option_template_name = "django/forms/widgets/radio_option.html"
模板指向django中template文件夹下的html。
我们先查看radio.html如下:
{% include "django/forms/widgets/multiple_input.html" %}
multiple_input.html如下:
{% with id=widget.attrs.id %}
这些都是django的模板标记语言,大概就是通过widget来生成ul和li标签,如果我们要修改可以根据以上模板标记语言修改。
radio_option.html如下:
{% include "django/forms/widgets/input_option.html" %}
input_option.html如下:
{% if widget.wrap_label %}
大致就是这样,我们现在开始重写。
创建widgets.py如下:
from django.forms import RadioSelectclass ColorRadioSelect(RadioSelect): # template_name = "django/forms/widgets/radio.html" # option_template_name = "django/forms/widgets/radio_option.html" template_name = "widgets/color_radio/radio.html" option_template_name = "widgets/color_radio/radio_option.html"
此时在该项目中的template创建
widgets/color_radio文件夹下的两个radio.html、radio_option.html用于重写。
radio.html如下:
{% with id=widget.attrs.id %}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/118962.html
摘要:而使用预处理器,提供缺失的样式层复用机制减少冗余代码,提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,预处理器有没有解决更大的麻烦。也是成熟的预处理器之一,而且有一个稳定,强大的团队在维护。 这篇文章主要解答以下几个问题,供前端开发者的新手参考。 1、什么是Sass和Less? 2、为什么要使用CSS预处理器? 3、Sass和Less的...
摘要:而使用预处理器,提供缺失的样式层复用机制减少冗余代码,提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,预处理器有没有解决更大的麻烦。也是成熟的预处理器之一,而且有一个稳定,强大的团队在维护。 这篇文章主要解答以下几个问题,供前端开发者的新手参考。 1、什么是Sass和Less? 2、为什么要使用CSS预处理器? 3、Sass和Less的...
摘要:写在前面为了解决后端人员不足又招聘不到的问题,决定用前后端分离的方式写项目,于是尝试用跟搭建一个项目。首先,看一下我搭建的前端跟项目的结构。 写在前面 为了解决后端人员不足又招聘不到的问题,决定用前后端分离的方式写项目,于是尝试用django-rest-framework跟Vue.js搭建一个项目。 基础搭建项目的参考了一下教程使用Django + Vue.js快速而优雅地构建前后端分...
摘要:写在前面为了解决后端人员不足又招聘不到的问题,决定用前后端分离的方式写项目,于是尝试用跟搭建一个项目。首先,看一下我搭建的前端跟项目的结构。 写在前面 为了解决后端人员不足又招聘不到的问题,决定用前后端分离的方式写项目,于是尝试用django-rest-framework跟Vue.js搭建一个项目。 基础搭建项目的参考了一下教程使用Django + Vue.js快速而优雅地构建前后端分...
阅读 2712·2021-11-22 13:54
阅读 2653·2021-10-14 09:42
阅读 3921·2021-09-28 09:47
阅读 2130·2021-09-03 10:28
阅读 1175·2021-07-26 23:38
阅读 2514·2019-08-30 15:54
阅读 2604·2019-08-29 16:35
阅读 1346·2019-08-29 15:42