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

selfimpr 發布于2021-09-03 10:28 / 2161人閱讀

摘要：如下如下大致就是這樣，我們現在開始重寫。如下這里沒有進行修改，只是在原基礎上增加了一個標簽。修改一下之前的如下然后在修改如下排除數據庫的標簽美化可以通過重寫傳參數自定義標簽美化自定義標簽美化最后將我們用到的庫導入即可。

文章目錄

前言
一、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" %} ">    <


            
                     
                 
                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               部署django項目
                                                                                                           阿里云部署django項目
                                                                                                           云服務器部署django項目
                                                                                                           java框架項目
                                                         
                 
               
              
             
               
                    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   轉載請注明本文地址：http://specialneedsforspecialkids.com/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的文章
                          閱讀更多
                    
                      
                                                  游戲開發商如何租用合適穩定的游戲服務器？
                            閱讀 2751·2021-11-22 13:54
                                                       “云”上醫療｜云計算加速醫療數字化轉型升級_云資訊
                            閱讀 2688·2021-10-14 09:42
                                                       華納云(hncloud)，中國香港/美國云服務器，低至3折，384元/年起，OpenStack+CN
                            閱讀 3987·2021-09-28 09:47
                                                       django框架 之sass項目中用到的工具 (1)
                            閱讀 2162·2021-09-03 10:28
                                                       青果網絡-618阿里云，騰訊云特惠優惠折上折！
                            閱讀 1203·2021-07-26 23:38
                                                       CSS魔法堂：display:none與visibility:hidden的恩怨情仇
                            閱讀 2557·2019-08-30 15:54
                                                       JavaScript面向對象初步認識
                            閱讀 2639·2019-08-29 16:35
                                                       618購物節來襲，電商陪你浪浪浪
                            閱讀 1425·2019-08-29 15:42
                                                
                      
                

                   
              
  
                  最新活動

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

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