• Django之Form应用Bootstrap样式


    应用Bootstrap样式示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
      <title>login</title>
    </head>
    <body>
    <div class="container">
      <div class="row">
        <form action="/login2/" method="post" novalidate class="form-horizontal">
          {% csrf_token %}
          <div class="form-group">
            <label for="{{ form_obj.username.id_for_label }}"
                   class="col-md-2 control-label">{{ form_obj.username.label }}</label>
            <div class="col-md-10">
              {{ form_obj.username }}
              <span class="help-block">{{ form_obj.username.errors.0 }}</span>
            </div>
          </div>
          <div class="form-group">
            <label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>
            <div class="col-md-10">
              {{ form_obj.pwd }}
              <span class="help-block">{{ form_obj.pwd.errors.0 }}</span>
            </div>
          </div>
          <div class="form-group">
          <label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>
            <div class="col-md-10">
              <div class="radio">
                {% for radio in form_obj.gender %}
                  <label for="{{ radio.id_for_label }}">
                    {{ radio.tag }}{{ radio.choice_label }}
                  </label>
                {% endfor %}
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-default">注册</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>
    

    批量添加样式可通过重写form类的init方法来实现

    class LoginForm(forms.Form):
        username = forms.CharField(
            min_length=8,
            label="用户名",
            initial="张三",
            error_messages={
                "required": "不能为空",
                "invalid": "格式错误",
                "min_length": "用户名最短8位"
            }
        ...
    
        def __init__(self, *args, **kwargs):
            super(LoginForm, self).__init__(*args, **kwargs)
            for field in iter(self.fields):
                self.fields[field].widget.attrs.update({
                    'class': 'form-control'
                })
    

    views.py如book表的添加和数据展示

    from django.shortcuts import render,HttpResponse,redirect
    from app01 import models
    from django import forms
    # Create your views here.
    
    class BookForm(forms.Form):
        title = forms.CharField(
            max_length=16,
            label='书名:',
            initial='zhang',
            # widget = forms.widgets.PasswordInput(attrs={'class': 'form-control'},render_value=True),
            widget = forms.widgets.TextInput(attrs={'class': 'form-control'},),
    
        )
        # title2 = forms.CharField(
        #     max_length=16,
        #     label='书名:',
        #     initial='zhang',
        #     # widget = forms.widgets.PasswordInput(attrs={'class': 'form-control'},render_value=True),
        #     widget=forms.widgets.TextInput(attrs={'class': 'form-control'}, ),
        #
        # )
        sex = forms.ChoiceField(
            choices=(
                ('1','男'),
                ('2','女'),
            )
            ,
            label='性别:',
            # widget=forms.widgets.RadioSelect(),
            # widget=forms.widgets.RadioSelect(),
            # widget=forms.widgets.SelectMultiple(attrs={'class':'form-control'}),
            widget=forms.widgets.Select(attrs={'class':'form-control'}),
            # widget=forms.widgets.CheckboxInput(),
            # widget=forms.widgets.CheckboxSelectMultiple(),
        )
        publishDate = forms.DateField(
            label='出版日期:',
            widget=forms.widgets.TextInput(attrs={'type':'date','class':'form-control'}),
        )
        price=forms.DecimalField(
            max_digits=5,
            decimal_places=2,
            label='书籍的价格:',
            widget=forms.widgets.NumberInput(attrs={'class': 'form-control'}
        ))
    
        # publish = forms.ModelChoiceField(
        #     label='出版社:',
        #     queryset=models.Publish.objects.all(),
        #     widget=forms.widgets.Select(attrs={'class': 'form-control'}
        # ))
        publish_id = forms.ChoiceField(
            label='出版社:',
            widget=forms.widgets.Select(attrs={'class': 'form-control'}
        ))
        authors = forms.ModelMultipleChoiceField(
    
            queryset=models.Author.objects.all(),
            widget = forms.widgets.SelectMultiple(attrs={'class': 'form-control'}
        ))
    
        def __init__(self,*args, **kwargs):
            super().__init__(*args, **kwargs)
            self.fields['publish_id'].choices = models.Publish.objects.values_list('pk','name')
    
    
    def index(request):
        if request.method == 'GET':
            form_obj = BookForm()
    
            return render(request,'index.html',{'form_obj':form_obj})
    
        else:
            print(request.POST)
            form_obj = BookForm(request.POST)
            print(form_obj.is_valid())
            print(form_obj.errors)
            if form_obj.is_valid():
                print(form_obj.cleaned_data)
                authors_obj = form_obj.cleaned_data.pop('authors')
                new_book_obj = models.Book.objects.create(**form_obj.cleaned_data)
                new_book_obj.authors.add(*authors_obj)
                return redirect('show')
    
            else:
                print(form_obj.errors)
                return render(request,'index.html',{'form_obj':form_obj})
    
    
    def show(request):
    
        book_objs = models.Book.objects.all()
    
        return render(request,'show.html',{'book_objs':book_objs})
    
    def edit_book(request,n):
    
    
        return HttpResponse('欢迎来到编辑页面')
    
    
    def delete_book(request,n):
        return HttpResponse('欢迎来到删除页面')
    
    内容如下
    

    urls.py

    from django.conf.urls import url
    from django.contrib import admin
    from app01 import views
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^index/', views.index,name='index'),
        url(r'^show/', views.show,name='show'),
        url(r'^edit_book/(d+)/', views.edit_book,name='edit_book'),
        url(r'^delete_book/(d+)/', views.delete_book,name='delete_book'),
    ]
    

    index.html

    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="{% static 'bootstrap-3.3.0-dist/dist/css/bootstrap.min.css' %}">
    </head>
    <body>
    
    <h1>展示页面</h1>
    {#<div>#}
    {#    {{ form_obj.as_p }}#}
    {##}
    {#</div>#}
    
    {#{% for field in form_obj %}#}
    {#    <div>#}
    {#        {{ field }}#}
    {#    </div>#}
    {##}
    {#{% endfor %}#}
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form action="" novalidate method="post">
                    {% for field in form_obj %}
                        <div class="form-group {% if field.errors.0 %}has-error{% endif %}">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }}
                            <span class="text-danger">{{ field.errors.0 }}</span>
                        </div>
                    {% endfor %}
    
    
                    {#                <div class="form-group">#}
                    {#                    <label for="{{ form_obj.sex.id_for_label }}">{{ form_obj.sex.label }}</label>#}
                    {#                    {{ form_obj.sex }}#}
                    {#                    {{ form_obj.sex.errors.0 }}#}
                    {#                </div>#}
                    {#            <div class="form-group">#}
                    {#                    <label for="{{ form_obj.publishDate.id_for_label }}">{{ form_obj.publishDate.label }}</label>#}
                    {#                    {{ form_obj.publishDate }}#}
                    {#                    {{ form_obj.publishDate.errors.0 }}#}
                    {#                </div>#}
                    {#                <div class="form-group">#}
                    {#                    <label for="{{ form_obj.price.id_for_label }}">{{ form_obj.price.label }}</label>#}
                    {#                    {{ form_obj.price }}#}
                    {#                    <span class="text-danger">{{ form_obj.price.errors.0 }}</span>#}
                    {#                </div>#}
                    {#            <div class="form-group">#}
                    {#                    <label for="{{ form_obj.publish.id_for_label }}">{{ form_obj.publish.label }}</label>#}
                    {#                    {{ form_obj.publish }}#}
                    {#                    <span class="text-danger">{{ form_obj.publish.errors.0 }}</span>#}
                    {#                </div>#}
                    {#            <div class="form-group">#}
                    {#                    <label for="{{ form_obj.authors.id_for_label }}">{{ form_obj.authors.label }}</label>#}
                    {#                    {{ form_obj.authors }}#}
                    {#                    <span class="text-danger">{{ form_obj.authors.errors.0 }}</span>#}
                    {#                </div>#}
                    <input type="submit">
                </form>
            </div>
        </div>
    </div>
    
    
    <div>
    
    
    </div>
    
    
    </body>
    <script src="{% static 'bootstrap-3.3.0-dist/dist/jQuery/jquery-3.1.1.js' %}"></script>
    <script src="{% static 'bootstrap-3.3.0-dist/dist/js/bootstrap.min.js' %}"></script>
    </html>
    

    show.html

    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="{% static 'bootstrap-3.3.0-dist/dist/css/bootstrap.min.css' %}">
    </head>
    <body>
    
    <h1>数据展示</h1>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>title</th>
                            <th>性别</th>
                            <th>出版日期</th>
                            <th>出版社</th>
                            <th>作者</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for book_obj in book_objs %}
                             <tr>
                                <td>{{ book_obj.pk }}</td>
                                <td>{{ book_obj.title }}</td>
                                <td>{{ book_obj.get_sex_display }}</td>
                                <td>{{ book_obj.publishDate|date:'Y-d-m' }}</td>
                                <td>{{ book_obj.publish.name }}</td>
                                <td>
                                    {% for author in book_obj.authors.all %}
                                        {{ author.name }}
                                    {% endfor %}
    
                                </td>
                                <td>
                                    <a class="btn btn-warning" href="{% url 'edit_book' book_obj.pk  %}">编辑</a>
                                    <a class="btn btn-danger" href="{% url 'delete_book' book_obj.pk  %}">删除</a>
                                </td>
                             </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    
    </div>
    
    </body>
    <script src="{% static 'bootstrap-3.3.0-dist/dist/jQuery/jquery-3.1.1.js' %}"></script>
    <script src="{% static 'bootstrap-3.3.0-dist/dist/js/bootstrap.min.js' %}"></script>
    </html>
    

    settings.py

    STATIC_URL = '/static/'
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR,'statics'),
    ]
    

    models.py

    from django.db import models
    
    # Create your models here.
    
    
    from django.db import models
    
    # Create your models here.
    
    
    class Author(models.Model):
        nid = models.AutoField(primary_key=True)
        name=models.CharField( max_length=32)
        age=models.IntegerField()
        authorDetail=models.OneToOneField(to="AuthorDetail",to_field="nid")
        def __str__(self):
            return self.name
    class AuthorDetail(models.Model):
    
        nid = models.AutoField(primary_key=True)
        birthday=models.DateField()
        telephone=models.BigIntegerField()
        addr=models.CharField( max_length=64)
    
    class Publish(models.Model):
        nid = models.AutoField(primary_key=True)
        name=models.CharField( max_length=32)
        city=models.CharField( max_length=32)
        email=models.EmailField()
        def __str__(self):
            return self.name
    
    class Book(models.Model):
    
        nid = models.AutoField(primary_key=True)
        title = models.CharField( max_length=32)
        sex_choice = (
            (1,'男'),
            (2,'女'),
        )
        sex = models.IntegerField(choices=sex_choice,default=1)
        publishDate=models.DateField()
        price=models.DecimalField(max_digits=5,decimal_places=2)
        publish=models.ForeignKey(to="Publish",to_field="nid")
        authors=models.ManyToManyField(to='Author',)
        def __str__(self):
            return self.title
    

    在项目下创建一个名为statics的文件夹,将Bookstrap文件和jQuery.js文件放在该文件夹里面

  • 相关阅读:
    餐饮点菜控件
    数据模块池
    关于sqlite数据库
    PHP使用DateTime类做时间日期到字符串转换
    php字符串比较函数
    Xdebug开源PHP程序调试器
    ubuntu chmod 无法更改 文件夹权限 系统提示“不允许的操作 2、linux 如何修改只读文件 3、ubuntu安装
    ubuntu的命令day1
    linux用终端上传文件和文件家到远程的服务器
    Symfony学习--原创。。。。
  • 原文地址:https://www.cnblogs.com/ghh520/p/11979803.html
Copyright © 2020-2023  润新知