BBS項目 註冊界面and部分首頁代碼詳解
阿新 • • 發佈：2018-07-03
links span better direct 圖片文件 方法 報錯信息 header models
forms
# 創建註冊form類
class RegForm(forms.Form):
#創建註冊用戶字段
username = forms.CharField(
label=‘用戶名‘,
max_length=16,
min_length=4,
error_messages={
"max_length":"用戶名最長不能超過16位",
"min_length": "用戶名最短不能少於4位",
"required":"用戶名不能為空",
},
widget=forms.widgets.TextInput(attrs={"class":"form-control"})
)
#創建註冊密碼字段
password = forms.CharField(
label=‘密碼‘,
max_length=16,
min_length=6,
error_messages={
"max_length":"密碼最長不能超過16位",
"min_length": "密碼最短不能少於6位",
"required":"密碼不能為空",
},
widget=forms.widgets.PasswordInput(attrs={"class":"form-control"})
)
#創建確認密碼字段
re_password = forms.CharField(
label=‘確認密碼‘,
max_length=16,
min_length=6,
error_messages={
"max_length":"確認密碼最長不能超過16位",
"min_length": "確認密碼最短不能少於6位",
"required":"確認密碼不能為空",
},
widget=forms.widgets.PasswordInput(attrs={"class":"form-control"})
)
#創建手機號字段
phone=forms.CharField(
max_length=11,
min_length=11,
label="手機號碼",
validators=[
RegexValidator(r‘^\d{11}$‘, "手機號必須是11位數字"),
RegexValidator(r‘^1[356789][0-9]{9}$‘, "手機號碼格式不正確")
],
error_messages={
"max_length": "手機號長度為11位",
"min_length": "手機號長度為11位",
"required": "手機號不能為空",
},
widget=forms.widgets.TextInput(attrs={"class": "form-control"})
)
#局部鉤子
def clean_username(self):
#去除username的值
value=self.cleaned_data.get("username")
if ‘JPM‘ in value: #判斷是否包含，包含就返回錯誤
raise ValidationError("不符合社會主義核心價值觀!")
elif models.UserInfo.objects.filter(username=value): #判斷是否能搜索到 能就返回錯誤信息
raise ValidationError("用戶名重復！")
else:
return value #無錯返回原值
#局部鉤子
def clean_phone(self):
#去除username的值
value=self.cleaned_data.get("phone")
if models.UserInfo.objects.filter(phone=value): #判斷是否能搜索到 能就返回錯誤信息
raise ValidationError("手機號重復！")
else:
return value #無錯返回原值
#全局鉤子，一般用於需要調用多個參數時，比如調用密碼和確認密碼
def clean(self):
#取密碼
pwd=self.cleaned_data.get("password")
re_pwd=self.cleaned_data.get("re_password")
#做比較
#判斷re_pwd 或 pwd有沒有空 有的話直接跳錯誤，沒有的再拿pwd和re_pwd比較
if re_pwd and pwd ==re_pwd:
#無錯返回數據
return self.cleaned_data
else:
#有錯返回異常
self.add_error("re_password","兩次輸入的密碼不一樣")
raise ValidationError("兩次輸入的密碼不一樣")
———————————————————————————————————————————————————————————————————————————————
url
from django.conf.urls import url
from django.contrib import admin
from bolg import views
from django.views.static import serve
from django.conf import settings
urlpatterns = [
url(r‘^admin/‘, admin.site.urls),
#主界面
url(r‘^$‘, views.index),
#登錄
url(r‘^login/‘, views.login),
#生成圖片
url(r‘^v_code/‘, views.v_code),
#主界面
url(r‘^index/‘, views.index),
#註冊
url(r‘^reg/‘, views.reg),
#註銷
url(r‘^zhuxiao/‘, views.zhuxiao),
#查詢media路徑下的
url(r‘^media/(?P<path>.*)$‘, serve, {"document_root": settings.MEDIA_ROOT})
]
———————————————————————————————————————————————————————————————————————————————
views
# 註冊界面
def reg(request):
reg_obj = forms.RegForm()
if request.method == "POST":
# 加判斷
ret = {‘code‘: 0}
# 傳值創建對象
reg_obj = forms.RegForm(request.POST)
# 用is_valid驗證數據有沒有問題
if reg_obj.is_valid():
# 取出頭像圖片文件
avatar_obj = request.FILES.get(‘avatar‘)
# 把數據re_password取出，因為表中沒有re_password這個字段，只是用來驗證
reg_obj.cleaned_data.pop(‘re_password‘)
# 創建添加用戶
models.UserInfo.objects.create_user(
# 添加字段對應的值
avatar=avatar_obj,
# 打散字典，值已被cleaned_data轉成字符串
**reg_obj.cleaned_data
)
ret[‘data‘] = ‘/index/‘
else:
ret[‘code‘] = 1
# 把reg_obj返回的錯誤數據放入
ret[‘data‘] = reg_obj.errors
return JsonResponse(ret)
return render(request, ‘reg.html‘, {‘reg_obj‘: reg_obj})
#註銷
#用 auth.logout(request) 將當前請求的session信息會全部清除
def zhuxiao(request):
auth.logout(request)
return redirect(‘/index/‘)
#主界面
def index(request):
#is_authenticated判斷是否以登錄，登錄時必須在login存參數，否則無法生效
if request.user.is_authenticated():
#取出用戶名
usernmae=request.user.username
#根據用戶名拿對象
user_obj=models.UserInfo.objects.filter(username=usernmae)
#把對象傳遞進去
return render(request, ‘index.html‘,{"user_obj":user_obj})
return render(request, ‘index.html‘,{"user_obj":‘‘})
———————————————————————————————————————————————————————————————————————————————
html-reg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>註冊界面</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<style>
#img_tou {
width: 80px;
height: 80px;
}
#ding{
margin-top: 120px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 "id="ding">
{# 面板開始#}
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">BBS註冊界面</h3>
</div>
<div class="panel-body">
{# 註冊界面開始#}
<form class="form-horizontal" autocomplete="off" novalidate>
<div class="form-group">
<label for="{{ reg_obj.username.id_for_label }}"
class="col-sm-2 control-label">{{ reg_obj.username.label }}</label>
<div class="col-sm-10">
{{ reg_obj.username }}
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="{{ reg_obj.password.id_for_label }}"
class="col-sm-2 control-label">{{ reg_obj.password.label }}</label>
<div class="col-sm-10">
{{ reg_obj.password }}
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="{{ reg_obj.re_password.id_for_label }}"
class="col-sm-2 control-label">{{ reg_obj.re_password.label }}</label>
<div class="col-sm-10">
{{ reg_obj.re_password }}
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="{{ reg_obj.phone.id_for_label }}"
class="col-sm-2 control-label">{{ reg_obj.phone.label }}</label>
<div class="col-sm-10">
{{ reg_obj.phone }}
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for=""
class="col-sm-2 control-label">頭像</label>
<div class="col-sm-10">
<input accept="image/*" type="file" id="touxiang" name="avatar" style="display: none">
<label for="touxiang"><img id="img_tou" src="/static/img/default.png" ></label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="zhuche" type="button" class="btn btn-default">註冊</button>
</div>
</div>
</form>
{# 註冊界面結束#}
</div>
</div>
{# 面板結束#}
</div>
</div>
</div>
<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="/static/setupAjax.js"></script>
<script>
$(‘#zhuche‘).click(function () {
//創建表單對象
var data_obj = new FormData();
//把上面用戶輸入的所有值都添加進去
data_obj.append("username", $(‘#id_username‘).val());
data_obj.append("password", $(‘#id_password‘).val());
data_obj.append("phone", $(‘#id_phone‘).val());
data_obj.append("re_password", $(‘#id_re_password‘).val());
data_obj.append("avatar", $(‘#touxiang‘)[0].files[0]);
$.ajax({
url: "/reg/",
type: ‘post‘,
processData: false,
contentType: false,
data: data_obj,
success: function (data) {
if (data.code) {
//創建變量接收錯誤信息
var cuowu = data.data;
//用each方法取出所有的k，v
$.each(cuowu, function (k, v) {
// k: 字段名 v：報錯信息的數組
// 根據字段名找對應的input標簽，把錯誤信息添加到對應位置
//遍歷.help-block類，將值改成對應的v，然後再找關系顏色的那個類，將其改為警告紅色
$("#id_" + k).next(".help-block").text(v[0]).parent().parent().addClass("has-error");
})
} else {
location.href = data.data || "/login/"
}
}
})
});
//找到form 下的input框 加點擊事件，點擊後用next找到span標簽，修改其text值，刪除警告色
$(‘form input‘).click(function () {
$(this).next(".help-block").text("").parent().parent().removeClass("has-error");
});
$(‘#touxiang‘).change(function () {
// 找到你選中的那個頭像文件
var fileObj = this.files[0];
// 讀取文件路徑
var fileReader = new FileReader();
fileReader.readAsDataURL(fileObj);
// 等圖片被讀取完畢之後，再做後續操作
fileReader.onload = function () {
// 設置預覽圖片
$("#img_tou").attr("src", fileReader.result);
};
})
</script>
</body>
</html>
———————————————————————————————————————————————————————————————————————————————
html-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主頁</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<style>
#img_tou {
width: 40px;
height: 40px;
margin-top: 5px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
{# 判斷傳來的是否有對象，有就調用對象裏的值，沒有就登錄註冊#}
{% if user_obj %}
{# 調用對象裏的值進行操作#}
<li><img id="img_tou" src="/media/{{ request.user.avatar }}" ></li>
<li><a href="#">{{ request.user.username }}</a></li>
<li><a href="/zhuxiao/">註銷</a></li>
{% else %}
<li><a href="/login/">登錄</a></li>
<li><a href="/reg/">註冊</a></li>
{% endif %}
{# <li>{% if user_obj %}<a href="#">{{ user_obj.username }}</a>{% else %}<a href="/login/">登錄</a>{% endif %}</li>#}
{# <li class="dropdown">#}
{# <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"#}
{# aria-expanded="false">Dropdown <span class="caret"></span></a>#}
{# <ul class="dropdown-menu">#}
{# <li><a href="#">Action</a></li>#}
{# <li><a href="#">Another action</a></li>#}
{# <li><a href="#">Something else here</a></li>#}
{# <li role="separator" class="divider"></li>#}
{# <li><a href="#">Separated link</a></li>#}
{# </ul>#}
{# </li>#}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 ">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-8 "></div>
<div class="col-md-2 ">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="/static/setupAjax.js"></script>
</body>
</html>
———————————————————————————————————————————————————————————————————————————————
BBS項目 註冊界面and部分首頁代碼詳解