form组件和自定义分页

FORM组件

不利用form组件实现一个简陋的功能

需求

1.注册功能
用户输入的用户名中 不能包含'违规信息'
如果包含了 就提示用户 输入的内容不符合社会主义核心价值观
用户输入的密码 不能小于三位
如果密码少于三位  提示用户 密码太短了
(******) 
校验数据通常是前后端都有校验
但是前端校验可有可无 哪怕再牛逼
后端也必须要有校验   反正一句话 前端可有不校验 后端必须校验!!!      

思路

1.搭建前端页面                                >>>                  渲染页面
2.获取前端用户提交的数据校验                     >>>                  校验数据
3.对数据的校验的结果 展示到前端页面给用户查看       >>>                展示错误信息

# 后端
def reg(request):
    back_dic = {"username":'','password':''}
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        if '违规信息' in username:
            # 提示信息
            back_dic['username'] = '不符合社会主义核心价值观'
        if len(password) < 3:
            # 提示信息
            back_dic['password'] = '密码不能少于三位'
    return render(request,'reg.html',locals())


# 前端
<form action="" method="post">
    <p>username:
        <input type="text" name="username">
        <span style="color: red">{{ back_dic.username }}</span>
    </p>
    <p>password:<input type="text" name="password">
    <span style="color: red">{{ back_dic.password }}</span>
    </p>
    <input type="submit">
</form>

使用form组件

  1. 定义一个类继承django 中的forms.Form类

    在类中创建form组件字段

username = forms.CharField(min_length=3,max_length=8,max_length='用户名',
error_messages={
'min_length':'用户名最短三位',
'max_length':'用户名最长八位',
'required':'用户名不能为空'
},initial='我是初始值',required=False, widget=forms.widgets.TextInput(attrs={'class':'class值'})
)


# min_length  char字段的最短长度
# max_length  char字段的最长长度
# label  对象.字段.label获得的值,默认是首字母大写的字段名
# error_messages  错误信息的字典
	{
        'min_length':'不满足最短长度的错误信息',
        'max_length':'不满足最长长度的错误信息',
        'required':'文本框为空是的错误信息',
        'invalid':'邮箱格式不正确时的展示信息',
    }

# initial   设置文本框初始值,即前端的value
# required  默认为True,当为False时,意味着这个字段不传也可以通过,is_valid()也可以为True。但是只要你传了,就要校验

关于widget字段
# widget=forms.widgets.TextInput(attrs={'class':'class值'})  
	# 值一定为forms.widgets
    # TextInput  规定里input的类型是text,还可以是其他
    # attrs为这个input框添加属性,可以是类id样式js任意
如何改变input框的type属性值
	widget= widgets.TextInput()
	widget=widgets.PasswordInput()
如何让forms组件渲染出来的input框有form-control类属性
	widget= widgets.TextInput(attrs={'class':'form-control others'})  # 如果有多个类属性 空格隔开
	widget=widgets.PasswordInput(attrs={'class':'form-control others'})
        

MyRegForm对象的属性和方法

from app01 import views
# 1.给自定义的类传一个字典
obj = views.MyRegForm({'username':'Mark','password':'12','email':'123'})
# 2.判断数据是否全部合法
obj.is_valid()  # 只有数据全部符合要求才会是True
	# False
# 3.查看符合校验规则的数据
obj.cleaned_data  #  {'username': 'Mark'}
# 4.查看不符合条件的数据以及不符合的原因是什么
obj.errors  # {'password': ['Ensure this value has at least 3 characters (it has 2).'],'email': ['Enter a valid email address.']}

# 5.校验数据的时候 默认情况下类里面所有的字段都必须传值
	# 因为校验时是拿着类中的字段取字典中匹对的
obj = views.MyRegForm({'username':'Mark', 'password':'123'})
obj.is_valid()  #  False
obj.errors  # {'email': ['This field is required.']}
# 6.当字典里的数据满足了所有类字段,其余数据并不会看
obj = views.MyRegForm({'username':'Mark', 'password':'1233', 'email':'123@qq.com', 'xxx':'ooo'})

obj.is_valid() # True

注意:

  1. 生成MyRegForm对象,里面传字典
  2. is_valid() 当类中的每一个字段都满足了约束,返回值为True
  3. cleaned_data 满足了字段条件的数据会以字典的形式放入这个属性中
  4. errors 不满足字段条件的数据会以字典的形式放入这个属性中,值为列表 套多个 错误信息字符串

前端页面使用的三种方式

forms组件只会帮你渲染获取用户输入(输入,选择,下拉框...)的标签提交按钮需要你自己手动写

方式一   
	第一种渲染前端页面的方式:封装程度太高了 标签样式及参数不方便调整 可扩展性差(不推荐使用)
	{{ MyRegForm对象.as_p }} ——将类中的所有字段生成input框并分别放在p标签中
	{{ MyRegForm对象.as_ul }}——将类中的所有字段生成input框并构建无需列表
	
方式二   
	扩展性较高 不足之处在于 需要你手写的代码量比较多(不推荐使用)
	<p>{{ MyRegForm对象.username.label }}{{ MyRegForm对象.username }}</p>
    <p>{{ MyRegForm对象.password.label }}{{ MyRegForm对象.password }}</p>
    <p>{{ MyRegForm对象.email.label }}{{ MyRegForm对象.email }}</p>
  	手动将对象中的属性放入自定义格式中  
	MyRegForm对象.字段.label 可以获得字段的label值


方式三
	代码量和扩展性都很高(推荐使用)

    {% for foo in form_obj %}
        <p>{{ foo.label }}{{ foo }}</p>
    {% endfor %}


PS:前端获得的几个数据
	MyRegForm对象.字段.label 可以获得字段的label值
	MyRegForm对象.字段   生成对应的input框
	MyRegForm对象.字段.errors[0]  获得该字段的错误信息
	对MyRegForm对象进行for循环,循环出的是MyRegForm对象.字段

form组件之钩子函数

钩子函数可以对字段做额外的规则校验

当你只需要对某一个字段添加校验时,使用局部钩子

def clean_字段名(self):
    例username = self.cleanes_data.get('字段名')
    if 规则判断:
        self.add_error('字段名','错误信息')
    return username

当你需要对多个字段添加校验时,使用全局钩子

def clean(self):
    password = self.cleaned_data.get('字段一')
    confirm_password = self.cleaned_data.get('字段二')
    if not password == confirm_password:
        self.add_error('字段名','两次密码不一致')
    return self.cleaned_data

使用钩子函数后要有返回值,如果是局部钩子返回钩住的数据即可

如果是全局钩子,要返回 self.cleaned_data

在字段中利用正则添加校验规则

# 1.导入django中的正则
from django.core.validators import RegexValidator

# 2.在字段中添加关键字参数validators
class MyForm(Form):
    user = forms.CharField(
        validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), RegexValidator(r'^159[0-9]+$', '数字必须以159开头')],)

validators 对应的值是列表,可以放多个正则,RegexValidator(r'正则表达式', '报错信息'),

其他form组件字段

email = forms.EmailField(label='邮箱',error_messages={
        'required':'邮箱不能为空',
        'invalid':'邮箱格式不正确'
},required=False,widget=widgets.EmailInput(attrs={'class':'form-control'}))

phone = forms.CharField(label='手机号',validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), RegexValidator(r'^159[0-9]+$', '数字必须以159开头')])



"""下面的是了解知识点 你只需要整理到你的博客中 到时候需要用 直接来拷贝即可"""

gender = forms.ChoiceField(
    choices=((1, "男"), (2, "女"), (3, "保密")),
    label="性别",
    initial=3,
    widget=widgets.RadioSelect()
)




hobby = forms.ChoiceField(
    choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
    label="爱好",
    initial=3,
    widget=widgets.Select()
)

hobby1 = forms.MultipleChoiceField(
    choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
    label="爱好",
    initial=[1, 3],
    widget=widgets.SelectMultiple()
)

keep = forms.ChoiceField(
    label="是否记住密码",
    initial="checked",
    widget=forms.widgets.CheckboxInput()
)

hobby2 = forms.MultipleChoiceField(
    choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
    label="爱好",
    initial=[1, 3],
    widget=forms.widgets.CheckboxSelectMultiple()
)

总结:添加校验的三种方式

  1. 字段
  2. 钩子函数
  3. 字段中添加正则

自定义分页器

书写一个类,位置不限,一般放在utils文件夹的py文件中

class Pagination(object):
    def __init__(self,current_page,all_count,per_page_num=2,pager_count=11):
        """
        封装分页相关数据
        :param current_page: 当前页
        :param all_count:    数据库中的数据总条数
        :param per_page_num: 每页显示的数据条数
        :param pager_count:  最多显示的页码个数
        
        用法:
        queryset = model.objects.all()
        page_obj = Pagination(current_page,all_count)
        page_data = queryset[page_obj.start:page_obj.end]
        获取数据用page_data而不再使用原始的queryset
        获取前端分页样式用page_obj.page_html
        """
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1

        if current_page <1:
            current_page = 1

        self.current_page = current_page

        self.all_count = all_count
        self.per_page_num = per_page_num


        # 总页码
        all_pager, tmp = divmod(all_count, per_page_num)
        if tmp:
            all_pager += 1
        self.all_pager = all_pager

        self.pager_count = pager_count
        self.pager_count_half = int((pager_count - 1) / 2)

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_num

    @property
    def end(self):
        return self.current_page * self.per_page_num

    def page_html(self):
        # 如果总页码 < 11个:
        if self.all_pager <= self.pager_count:
            pager_start = 1
            pager_end = self.all_pager + 1
        # 总页码  > 11
        else:
            # 当前页如果<=页面上最多显示11/2个页码
            if self.current_page <= self.pager_count_half:
                pager_start = 1
                pager_end = self.pager_count + 1

            # 当前页大于5
            else:
                # 页码翻到最后
                if (self.current_page + self.pager_count_half) > self.all_pager:
                    pager_end = self.all_pager + 1
                    pager_start = self.all_pager - self.pager_count + 1
                else:
                    pager_start = self.current_page - self.pager_count_half
                    pager_end = self.current_page + self.pager_count_half + 1

        page_html_list = []
        # 添加前面的nav和ul标签
        page_html_list.append('''
                    <nav aria-label='Page navigation>'
                    <ul class='pagination'>
                ''')
        first_page = '<li><a href="?page=%s">首页</a></li>' % (1)
        page_html_list.append(first_page)

        if self.current_page <= 1:
            prev_page = '<li class="disabled"><a href="#">上一页</a></li>'
        else:
            prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)

        page_html_list.append(prev_page)

        for i in range(pager_start, pager_end):
            if i == self.current_page:
                temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)
            else:
                temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)
            page_html_list.append(temp)

        if self.current_page >= self.all_pager:
            next_page = '<li class="disabled"><a href="#">下一页</a></li>'
        else:
            next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)
        page_html_list.append(next_page)

        last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)
        page_html_list.append(last_page)
        # 尾部添加标签
        page_html_list.append('''
                                           </nav>
                                           </ul>
                                       ''')
        return ''.join(page_html_list)

在使用的地方导入

from app01.utils.mypage import Pagination

使用方法

# 后端
def login(request):
    book_queryset = models.Book.objects.all()
    current_page = request.GET.get('page',1)
    all_count = book_queryset.count()
    # 1.实例化产生对象
    page_obj = Pagination(current_page=current_page, all_count=all_count)
    # 2.对真实数据进行切片操作
    page_queryset = book_queryset[page_obj.start:page_obj.end]
    return render(request,'login.html',locals())
            
# 前端
# 获取数据
{% for book_obj in page_queryset %}
	<p>{{ book_obj.title }}</p>
{% endfor %}
# 生成分页
{{ page_obj.page_html|safe }}

分页器设计逻辑

  1. 获得当前页码
  2. 获得展示数据
  3. 将对应页码的数据发送到前端
  4. 页码一些细节——当前页高亮,显示页数固定,页数随着当前页移动
posted @ 2019-10-29 20:05  ~李  阅读(451)  评论(0编辑  收藏  举报