django框架之sass项目中用到的工具 (1)

selfimpr 发布于2021-09-03 10:28 / 1921人阅读

摘要：如下如下大致就是这样，我们现在开始重写。如下这里没有进行修改，只是在原基础上增加了一个标签。修改一下之前的如下然后在修改如下排除数据库的标签美化可以通过重写传参数自定义标签美化自定义标签美化最后将我们用到的库导入即可。

文章目录

前言
一、ModelForm美化
- 1.自定义radio标签样式
- 2.自定义select标签样式
三、django离线脚本
四、pillow生成验证码

前言

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"),]

一、ModelForm美化

概述：搭配通过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

1.自定义radio标签样式

进入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 %}{% for group, options, index in widget.optgroups %}{% if group %}  <li>{{ group }}{% endif %}{% for option in options %}    <li>{% include option.template_name with widget=option %}li>{% endfor %}{% if group %}  ul>li>{% endif %}{% endfor %}ul>{% endwith %}

这些都是django的模板标记语言，大概就是通过widget来生成ul和li标签，如果我们要修改可以根据以上模板标记语言修改。

radio_option.html如下：

{% include "django/forms/widgets/input_option.html" %}

input_option.html如下：

{% if widget.wrap_label %}{% endif %}{% include "django/forms/widgets/input.html" %}{% if widget.wrap_label %} {{ widget.label }}label>{% endif %}

大致就是这样，我们现在开始重写。

创建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 %}            {% for group, options, index in widget.optgroups %}            {% for option in options %}                <label {% if option.attrs.id %} for="{{ option.attrs.id }}"{% endif %} >                    {% include option.template_name with widget=option %}                label>            {% endfor %}        {% endfor %}    div>{% endwith %}

这里将ul和li标签改成了div和label 标签。

radio_option.html如下：

{% include "django/forms/widgets/input.html" %}<span class="cycle" style="background-color:{{ option.label }}">span>

这里没有进行修改，只是在原基础上增加了一个span标签。

自此radio的重写完成，那么现在开始写表单和视图。

结合上面的ModelForm表单美化(BootStrapForm函数：通过bootstarp的样式美化标签)。

project.py如下：

from django import formsfrom web.form.bootstarp import BootStrapFormfrom web import modelsfrom .widgets import ColorRadioSelectclass ProjectModelForm(BootStrapForm, forms.ModelForm):    bootstrap_class_exclude = ["color"]    def __init__(self, request, *args, **kwargs):        super().__init__(*args, **kwargs)        self.request = request    class Meta:        model = models.Project        fields = ["name","color","desc"]        widgets = {            "desc": forms.Textarea,            "color": ColorRadioSelect(attrs={"class": "color-radio"}),        }

通过init函数可以看到，该函数也支持传入request参数，并且这里排除了color(即radio标签，我们用自己的方式)。

view.py如下：

from web.form.project import ProjectModelFormdef radio(request):    form = ProjectModelForm(request)    return render(request, "radio.html", {"form": form})

radio.html如下：

{% load static %}<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="{% static "plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css" %} "></head><style>     .account {        width: 600px;        margin: 0 auto;    }    .color-radio label {            margin-left: 0;            padding-left: 0;        }        .color-radio input[type="radio"] {            display: none;        }        .color-radio input[type="radio"] + .cycle {            display: inline-block;            height: 25px;            width: 25px;            border-radius: 50%;            border: 2px solid #ffffdffffd;        }        .color-radio input[type="radio"]:checked + .cycle {            border: 2px solid black;        }</style><body>    <div class="account">        {% for field in form %}            <div class="form-group">                <label for="{{ field.id_for_label }}">{{ field.label }}</label>                {{ field }}               <span class="error-msg"></span>            </div>        {% endfor %}    </div></body></html>

此时访问重写radio的路由如下：

2.自定义select标签样式

对于select标签而言，我们不能通过样式的形式去修改，所以需要其他库bootstrap-select、font-awesome图标库、jquery。

下载这些库的链接：https://gitee.com/miaojiaxi/s25day01/tree/master/web/static/

bootstrap-select官网：https://www.bootstrapselect.cn/

全部安装完成后，我们进入django.forms生成的标签函数Select查看美化select标签的源码：

class Select(ChoiceWidget):    input_type = "select"    template_name = "django/forms/widgets/select.html"    option_template_name = "django/forms/widgets/select_option.html"    add_id_index = False    checked_attribute = {"selected": True}    option_inherits_attrs = False

因为和radio一样，且内部select.html不用重写，只用将select中的option标签，所以我们只用重写option_template_name即可，那么我们先查看一下源码select_option.html如下：

在widgets/color_radio文件夹下创建select.html用于重写select_option.html如下：

通过bootstrap-select库的帮助用data-content = “标签(font-awesome图标库)”，实现了添加图标，而图标样式则为数据库中表字段。

修改一下之前的widgets.pt如下：

from django.forms import RadioSelect, Selectclass 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"class ColorSelect(Select):    option_template_name = "widgets/color_radio/select.html"

然后在修改project.py如下：

from django import formsfrom web.form.bootstarp import BootStrapFormfrom web import modelsfrom .widgets import ColorRadioSelect, ColorSelectclass ProjectModelForm(BootStrapForm, forms.ModelForm):	# 排除color数据库的标签美化    bootstrap_class_exclude = ["color"]    def __init__(self, request, *args, **kwargs):        super().__init__(*args, **kwargs)        # ModelForm可以通过重写传request参数        self.request = request    class Meta:        model = models.Project        fields = "__all__"        widgets = {            "desc": forms.Textarea,             # 自定义radio标签美化            "color": ColorRadioSelect(attrs={"class": "color-radio"}),             # 自定义select标签美化            "priority": ColorSelect(attrs={"class": "selectpicker", "data-live-search": "true"}),        }

最后将我们用到的库导入即可。

radio.html如下：

{% load static %}DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <link rel="stylesheet" href="{% static "plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css" %} ">    <


            
                     
                 
                                                                                                                    
                         云服务器
                                             
                         混合云
                                                                                                                                                 
                                      
                     
                    
                                                                                               部署django项目
                                                                                                           阿里云部署django项目
                                                                                                           云服务器部署django项目
                                                                                                           java框架项目
                                                         
                 
               
              
             
               
                    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   转载请注明本文地址：https://www.ucloud.cn/yun/118962.html
               
                      
               
                 
                                  上一篇：PostMan详细介绍  
                                                
                                       下一篇：大学浑浑噩噩度过四年；毕业做过行政、人事、绘图等工作；也没呆多久，选择软件测试成功逆袭达到月薪25K


              
                相关文章
                
                             
                                                                                                    
                                                
                          CSS及布局
                                                     摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。

一劳永逸的搞定 flex 布局
寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...
                                                   
                          
                                
                                    jaysun
                                    2019-08-29 14:04
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          关于sass、scss、less的概念性知识汇总
                                                     摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。

这篇文章主要解答以下几个问题，供前端开发者的新手参考。
1、什么是Sass和Less？
2、为什么要使用CSS预处理器？
3、Sass和Less的...
                                                   
                          
                                
                                    HmyBmny
                                    2019-08-29 16:24
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          关于sass、scss、less的概念性知识汇总
                                                     摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。

这篇文章主要解答以下几个问题，供前端开发者的新手参考。
1、什么是Sass和Less？
2、为什么要使用CSS预处理器？
3、Sass和Less的...
                                                   
                          
                                
                                    xuweijian
                                    2019-08-02 11:15
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          使用Django，Vue搭建项目
                                                     摘要：写在前面为了解决后端人员不足又招聘不到的问题，决定用前后端分离的方式写项目，于是尝试用跟搭建一个项目。首先，看一下我搭建的前端跟项目的结构。

写在前面
为了解决后端人员不足又招聘不到的问题，决定用前后端分离的方式写项目，于是尝试用django-rest-framework跟Vue.js搭建一个项目。
基础搭建项目的参考了一下教程使用Django + Vue.js快速而优雅地构建前后端分...
                                                   
                          
                                
                                    ddongjian0000
                                    2019-07-31 12:15
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          使用Django，Vue搭建项目
                                                     摘要：写在前面为了解决后端人员不足又招聘不到的问题，决定用前后端分离的方式写项目，于是尝试用跟搭建一个项目。首先，看一下我搭建的前端跟项目的结构。

写在前面
为了解决后端人员不足又招聘不到的问题，决定用前后端分离的方式写项目，于是尝试用django-rest-framework跟Vue.js搭建一个项目。
基础搭建项目的参考了一下教程使用Django + Vue.js快速而优雅地构建前后端分...
                                                   
                          
                                
                                    henry14
                                    2019-07-31 10:57
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                           
                
              
              
               
                  
                  发表评论
                   
                                      
                      
                        登陆后可评论
                      
                   
               
              
                
                  0条评论


           
               
                
                    
                    selfimpr
                    男|高级讲师
                    
                     
                                                                      我要关注
      
                                                                                        我要私信
                     
                                            
                    
                    
                          TA的文章
                          阅读更多
                    
                      
                                                  游戏开发商如何租用合适稳定的游戏服务器？
                            阅读 2525·2021-11-22 13:54
                                                       “云”上医疗｜云计算加速医疗数字化转型升级_云资讯
                            阅读 2495·2021-10-14 09:42
                                                       华纳云(hncloud)，中国香港/美国云服务器，低至3折，384元/年起，OpenStack+CN
                            阅读 3700·2021-09-28 09:47
                                                       django框架 之sass项目中用到的工具 (1)
                            阅读 1922·2021-09-03 10:28
                                                       青果网络-618阿里云，腾讯云特惠优惠折上折！
                            阅读 1024·2021-07-26 23:38
                                                       CSS魔法堂：display:none与visibility:hidden的恩怨情仇
                            阅读 2365·2019-08-30 15:54
                                                       JavaScript面向对象初步认识
                            阅读 2523·2019-08-29 16:35
                                                       618购物节来袭，电商陪你浪浪浪
                            阅读 1270·2019-08-29 15:42
                                                
                      
                

                   
              
  
                  最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

django框架之sass项目中用到的工具 (1)

文章目录

前言

一、ModelForm美化

1.自定义radio标签样式

2.自定义select标签样式

相关文章

CSS及布局

**关于sass、scss、less的概念性知识汇总**

**关于sass、scss、less的概念性知识汇总**

**使用Django，Vue搭建项目**

**使用Django，Vue搭建项目**

发表评论

0条评论

selfimpr

男|高级讲师

TA的文章

游戏开发商如何租用合适稳定的游戏服务器？

“云”上医疗｜云计算加速医疗数字化转型升级_云资讯

华纳云(hncloud)，中国香港/美国云服务器，低至3折，384元/年起，OpenStack+CN