django使用bootstrap一般有如下两种：
1.cdn
2.配置静态文件
为了快速出现效果，在这里使用cdn实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.account{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="account">
<h1>注册</h1>
<form>
{% for filed in from %}
<div class="form-group">
<label for={{ filed.id_for_label }}>{{ filed.label }}</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
美化效果：
image.png
加一个属性，以便于获取它生成好看的表单：
image.png
使用后台代码美化：
password = forms.CharField(label='密码', widget=forms.PasswordInput(attrs={'class': 'form-control',
'placeholder':'请输入密码'}))
# 修改插件，使得密码密文显示 password与models一致！
confrim_password = forms.CharField(label='重复输入密码', widget=forms.PasswordInput(attrs={'class': 'form-control',
'placeholder' :'重复输入密码'}))
# 新增加一个重复密码的表单项，ModelFrom机制：重复则覆盖，不重复添加
code = forms.CharField(label='验证码',widget=forms.TextInput(attrs={'class': 'form-control',
'placeholder' :'请输入验证码'}))
效果：
image.png
这样一个一个的加太麻烦，考虑重写init方法全局配置
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)#调用父类init方法
for name, filed in self.fields.items():#name：是model表里面的字段 filed是每一个forms.CharField对象
filed.widget.attrs['class'] = 'form-control'#每一次创建forms.CharField对象就会调用这个方法
filed.widget.attrs['placeholder'] = '请输入%s'% filed.label#filed.label拿到label
效果：
image.png
全部代码
from django.shortcuts import render, HttpResponse
from Utils.tencent.sms import send_sms_single#导入发信息的文件即可
import random
from django.conf import settings #导入settings配置
def send_sms(request):
'''
发送短信
如果？type=login -> xxx1
如果？type=register -> xxx2
'''
tpl = request.GET.get('tpl')#字符串，也就是在输入地址的时候在英文条件下输入?tpl='xxx'我就可以获取到
print('tpl:%s'%tpl)
template_id = settings.TENCENT_SMS_TEMPLATE.get(tpl)#拿到模板Id
if not template_id:
return HttpResponse('发送信息的模板不存在！')
code = random.randrange(1000, 9999)#产生随机四位数
res = send_sms_single('1398549603611111', template_id, [code, ])
print(res)
# 为0 证明发送正确！
if (res['result'] == 0):
return HttpResponse('注册成功！')
# 反之，打印错误结果！
else:
return HttpResponse(res['errmsg'])
#导入django内置的表单配置
from django import forms
from app01 import models
from django.core.validators import RegexValidator
from django.core.exceptions import ValidationError
class RegisterModelForm(forms.ModelForm):
mobile_phone = forms.CharField(label='手机',
validators=[RegexValidator(r'^(1[3|4|5|6|7|8|9])\d{9}$', '手机号格式错误'), ]
)
# 默认的django没有支持手机号的校验
# 手动添加正则表达式使用validators 两个参数：1.匹配的正则表达式；2.匹配错误报错信息
# 记得在前面导包：
# from django.core.validators import RegexValidator
# from django.core.exceptions import ValidationError
password = forms.CharField(label='密码',
widget=forms.PasswordInput(attrs={'class': 'form-control'}))
# 修改插件，使得密码密文显示 password与models一致！
confrim_password = forms.CharField(label='重复输入密码',
widget=forms.PasswordInput(attrs={'class': 'form-control'}))
# 新增加一个重复密码的表单项，ModelFrom机制：重复则覆盖，不重复添加
code = forms.CharField(label='验证码',
widget=forms.TextInput(attrs={'class': 'form-control'}))
class Meta:
model = models.UserInfo#对应的表模型
fields = "__all__"#
# fields 用于控制展示的字段 __all__代表全部， 如果想展示多个，就放在列表中
# fields = ['title', 'price']
# exclude用于控制排除的字段
# exclude = ['title']
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)#调用父类init方法
for name, filed in self.fields.items():#name：是model表里面的字段 filed是每一个forms.CharField对象
filed.widget.attrs['class'] = 'form-control'#每一次创建forms.CharField对象就会调用这个方法
filed.widget.attrs['placeholder'] = '请输入%s'% (filed.label,)#filed.label拿到label
# 该部分是ModelForm详细介绍
'''
# 详细介绍！！！！！！！！！！！！！！！！！
class BookList(ModelForm):
# 创建Meta类，在Meta类中可以定义属性
class Meta:
# 对应的表模型
model = models.Book
# fields 用于控制展示的字段 __all__代表全部， 如果想展示多个，就放在列表中
fields = '__all__'
# fields = ['title', 'price']
# exclude用于控制排除的字段
exclude = ['title']
# error_message用于展示报错信息时不同字段对应不同的信息
error_messages = {
'title': {
'required': '标题不能为空',
'invalid': '格式错误'
},
# 'price'.... 每个字段需要添加错误信息都可以在这个地方添加
}
# 当我们想要给对应的输入框加入属性时，widgets可以帮我们实现
# 首先要从forms中导入widgets，这里因为和下面的关键字名字一样， 所以需要起别名
from django.forms import widgets as wid
widgets = {
'title': wid.TextInput(attrs={'class':'form-control'}),
'price': wid.TextInput(attrs={'class':'form-control'})
}
# labels 自定义在前端显示的名字，如果我们不指定，就会自动取字段中查找设置的verbose_name的值
# 如果我们没有设置verbose_name,就会使用字段名对应的小写
labels = {
'title': '标题',
'price': '价格'
}
'''
def register(request):
form = RegisterModelForm()#生成一个frommodel对象
return render(request, 'register.html', {'from': form})#返回一个页面，并且把from返回给前端
完整HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.account{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="account">
<h1 style="text-align: center">注册</h1>
<form>
{% for filed in from %}
{% if filed.name == "code" %}
<div class="form-group">
<label for={{ filed.id_for_label }}>{{ filed.label }}</label>
<div class="clearfix">
{# #消除左浮动#}
<div class="col-md-6" style="padding-left: 0"> {{ filed }}</div>
{# padding-left: 0 使得边距对齐#}
<div class="col-md-6"><button type="submit" class="btn btn-primary">点击获取验证码</button></div>
</div>
</div>
{% else %}
<div class="form-group">
<label for={{ filed.id_for_label }}>{{ filed.label }}</label>
{{ filed }}
</div>
{% endif %}
{% endfor %}
<button type="submit" class="btn btn-primary">注册</button>
</form>
</div>
</body>
</html>
image.png
调整顺序，使得手机号和验证码在一起
"all"默认先按照model里面的顺序在按照自己加的
fields = ['username', "email", "password", "confrim_password", "mobile_phone", "code"]
image.png
完结！！！
网友评论