資訊專欄INFORMATION COLUMN
摘要：如下如下大致就是這樣，我們現(xiàn)在開始重寫。如下這里沒有進(jìn)行修改，只是在原基礎(chǔ)上增加了一個(gè)標(biāo)簽。修改一下之前的如下然后在修改如下排除數(shù)據(jù)庫(kù)的標(biāo)簽美化可以通過重寫傳參數(shù)自定義標(biāo)簽美化自定義標(biāo)簽美化最后將我們用到的庫(kù)導(dǎo)入即可。
sass項(xiàng)目視頻地址：https://www.bilibili.com/video/BV1uA411b77M
搭建虛擬環(huán)境鏈接：https://blog.csdn.net/weixin_45859193/article/details/115408555
采用django3.2.6版本，以u(píng)ntitled7為根目錄創(chuàng)建的項(xiàng)目名為web，在web項(xiàng)目中的view.py編寫所有視圖，templates文件存放模板標(biāo)記語(yǔ)言、script存放腳本測(cè)試，數(shù)據(jù)庫(kù)采用sqlite3， ModelForm美化標(biāo)簽相關(guān)操作在form文件中，static存放第三方庫(kù)及靜態(tài)文件
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美化相關(guān) url(r"register/", views.register, name="register"), url(r"radio/", views.radio, name="radio"), # 圖片驗(yàn)證碼相關(guān) url(r"login/", views.login, name="login"), url(r"image_code/", views.image_code, name="image_code"),]概述：搭配通過django中自行通過ModelForm渲染標(biāo)簽時(shí)使用bootstrap樣式。
示例：創(chuàng)建一個(gè)用戶表結(jié)構(gòu)示例。
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="手機(jī)號(hào)", max_length=32) password = models.CharField(verbose_name="密碼", max_length=32)通過sqllite3創(chuàng)建控制臺(tái)輸入：
python manage.py makemigrationspython manage.py migrateBootStrapForm類(重寫django渲染標(biāo)簽樣式)如下：
class BootStrapForm(object): bootstrap_class_exclude = [] # 初始化方法 def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) # 每個(gè)字段的字段名和字段值 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"] = "請(qǐng)輸入{}".format(field.label)視圖函數(shù)如下：
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): # 這里如果想排除某個(gè)字段可以使用 bootstrap_class_exclude = [字段] bootstrap_class_exclude = [] # 重寫字段規(guī)則 phone = forms.CharField(label="手機(jī)號(hào)", validators=[RegexValidator(r"^(1[3|5|6|8]/d{9}$)", "手機(jī)號(hào)格式錯(cuò)誤")]) password = forms.CharField(label="密碼", widget=forms.PasswordInput()) code = forms.CharField(label="驗(yàn)證碼") 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>注冊(cè)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="獲取驗(yàn)證碼"> 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>此時(shí)訪問路由如下：
概述：對(duì)于標(biāo)簽而言是通過django.widgets.forms中通過模板標(biāo)記語(yǔ)言渲染出來的，但是如果我們想用自己的也可以通過重寫的方式修改標(biāo)簽樣式，這里拿select、radio標(biāo)簽來展示。
為了方便展示我們創(chuàng)建一個(gè)項(xiàng)目表。
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="項(xiàng)目名", max_length=32) color = models.SmallIntegerField(verbose_name="顏色", choices=COLOR_CHOICES, default=1) desc = models.CharField(verbose_name="項(xiàng)目描述", max_length=255, null=True, blank=True) priority_choices = ( ("danger", "高"), ("warning", "中"), ("success", "低"), ) priority = models.CharField(verbose_name="優(yōu)先級(jí)", max_length=12, choices=priority_choices, default="danger")通過sqllite3創(chuàng)建控制臺(tái)輸入：
python manage.py makemigrationspython manage.py migrate進(jìn)入django.forms生成的函數(shù)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的模板標(biāo)記語(yǔ)言，大概就是通過widget來生成ul和li標(biāo)簽，如果我們要修改可以根據(jù)以上模板標(biāo)記語(yǔ)言修改。
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 %} 大致就是這樣，我們現(xiàn)在開始重寫。
創(chuàng)建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"此時(shí)在該項(xiàng)目中的template創(chuàng)建widgets/color_radio文件夾下的兩個(gè)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標(biāo)簽改成了div和label 標(biāo)簽。
radio_option.html如下：
{% include "django/forms/widgets/input.html" %}<span class="cycle" style="background-color:{{ option.label }}">span>這里沒有進(jìn)行修改，只是在原基礎(chǔ)上增加了一個(gè)span標(biāo)簽。
自此radio的重寫完成，那么現(xiàn)在開始寫表單和視圖。
結(jié)合上面的ModelForm表單美化(BootStrapForm函數(shù)：通過bootstarp的樣式美化標(biāo)簽)。
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函數(shù)可以看到，該函數(shù)也支持傳入request參數(shù)，并且這里排除了color(即radio標(biāo)簽，我們用自己的方式)。
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>此時(shí)訪問重寫radio的路由如下：
對(duì)于select標(biāo)簽而言，我們不能通過樣式的形式去修改，所以需要其他庫(kù)bootstrap-select、font-awesome圖標(biāo)庫(kù)、jquery。
下載這些庫(kù)的鏈接：https://gitee.com/miaojiaxi/s25day01/tree/master/web/static/
bootstrap-select官網(wǎng)：https://www.bootstrapselect.cn/
全部安裝完成后，我們進(jìn)入django.forms生成的標(biāo)簽函數(shù)Select查看美化select標(biāo)簽的源碼：
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因?yàn)楹蛂adio一樣，且內(nèi)部select.html不用重寫，只用將select中的option標(biāo)簽，所以我們只用重寫option_template_name即可，那么我們先查看一下源碼select_option.html如下：
在widgets/color_radio文件夾下創(chuàng)建select.html用于重寫select_option.html如下：
通過bootstrap-select庫(kù)的幫助用data-content = “標(biāo)簽(font-awesome圖標(biāo)庫(kù))”，實(shí)現(xiàn)了添加圖標(biāo)，而圖標(biāo)樣式則為數(shù)據(jù)庫(kù)中表字段。
修改一下之前的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數(shù)據(jù)庫(kù)的標(biāo)簽美化 bootstrap_class_exclude = ["color"] def __init__(self, request, *args, **kwargs): super().__init__(*args, **kwargs) # ModelForm可以通過重寫傳request參數(shù) self.request = request class Meta: model = models.Project fields = "__all__" widgets = { "desc": forms.Textarea, # 自定義radio標(biāo)簽美化 "color": ColorRadioSelect(attrs={"class": "color-radio"}), # 自定義select標(biāo)簽美化 "priority": ColorSelect(attrs={"class": "selectpicker", "data-live-search": "true"}), }最后將我們用到的庫(kù)導(dǎo)入即可。
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" %} "> <
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/118962.html
摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...
摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。 這篇文章主要解答以下幾個(gè)問題，供前端開發(fā)者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預(yù)處理器？ 3、Sass和Less的...
摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。 這篇文章主要解答以下幾個(gè)問題，供前端開發(fā)者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預(yù)處理器？ 3、Sass和Less的...
摘要：寫在前面為了解決后端人員不足又招聘不到的問題，決定用前后端分離的方式寫項(xiàng)目，于是嘗試用跟搭建一個(gè)項(xiàng)目。首先，看一下我搭建的前端跟項(xiàng)目的結(jié)構(gòu)。 寫在前面 為了解決后端人員不足又招聘不到的問題，決定用前后端分離的方式寫項(xiàng)目，于是嘗試用django-rest-framework跟Vue.js搭建一個(gè)項(xiàng)目。 基礎(chǔ)搭建項(xiàng)目的參考了一下教程使用Django + Vue.js快速而優(yōu)雅地構(gòu)建前后端分...
摘要：寫在前面為了解決后端人員不足又招聘不到的問題，決定用前后端分離的方式寫項(xiàng)目，于是嘗試用跟搭建一個(gè)項(xiàng)目。首先，看一下我搭建的前端跟項(xiàng)目的結(jié)構(gòu)。 寫在前面 為了解決后端人員不足又招聘不到的問題，決定用前后端分離的方式寫項(xiàng)目，于是嘗試用django-rest-framework跟Vue.js搭建一個(gè)項(xiàng)目。 基礎(chǔ)搭建項(xiàng)目的參考了一下教程使用Django + Vue.js快速而優(yōu)雅地構(gòu)建前后端分...
閱讀 2764·2021-11-22 13:54
閱讀 2701·2021-10-14 09:42
閱讀 4046·2021-09-28 09:47
閱讀 2172·2021-09-03 10:28
閱讀 1217·2021-07-26 23:38
閱讀 2568·2019-08-30 15:54
閱讀 2647·2019-08-29 16:35
閱讀 1437·2019-08-29 15:42
