CMDB開發之前端樣式
阿新 • • 發佈：2018-12-16
如果要想開發一個好的web介面，那你必須得學會一些前端樣式。
基於bootstrip的模態框繪製
我們首先要把使用者註冊做到一個模態框裡面,模態框看起來很複雜，實際上很有規律的。
模態框分為兩部分:
1、模態框的觸發按鈕
index.html部分程式碼如下：
<!-- data-toggle 以何種形式來展示模態框 modal popover data-target 模態框的id --> {% block label %} <div class="container-fluid"> <div class="col-md-11"> 艾倫CMDB系統-首頁 </div> <div class="col-md-1"> <button class="btn btn-default" data-toggle="modal" data-target="#register_user_modal"> 使用者註冊 </button> </div> </div> {% endblock %}
效果如下：
2、模態框的面板
注意這一部分程式碼我們是放在content模組中的
<!-- tabindex 導航鍵的順序 role = dialog 指定展示的式樣（角色）為模態框 aria-labelledby="MyLabel" 獲取值 aria-hidden="true" 在通常情況下模態框式隱藏，不觸發不會顯示的 footer 頁尾 --> <div class="modal fade" id="register_user_modal" tabindex="-1" role="dialog" aria-labelledby="MyLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="MyLabel"> 使用者註冊 </h4> </div> <div class="modal-body"> 這是模態框的主體 </div> <div class="modal-footer"> <button class="btn btn-primary"> 註冊使用者 </button> </div> </div> </div> </div>
效果如下：
基於 forms的表單定義
django給我們提供了一個很棒的類叫做forms
在django的老版本現有form類，超難用，看運氣。
後來編寫一個Forms,forms類之初不能完全代替form,二者並行更尷尬。
再後來才有了現在的forms類。
1、定義forms檔案
2、定義forms類
\ALLENCMDB\User\forms.py
from django import forms class CMDBUserForm(forms.Form): username = forms.CharField(max_length=32,label='使用者賬號') password = forms.CharField(max_length=32,label='使用者密碼') nickname = forms.CharField(max_length=32,label='使用者姓名') phone = forms.CharField(max_length=32,label='使用者手機號') email = forms.EmailField(label='使用者郵箱') photo = forms.ImageField(label='使用者頭像')
3、檢視載入，前端渲染
\ALLENCMDB\ALLENCMDB\views.py
from django.shortcuts import render_to_response
from User.forms import CMDBUserForm
def index(request):
register_forms = CMDBUserForm()
return render_to_response('index.html',locals())
前端index.html
效果如下：
4、修改forms的樣式
上面的樣式總感覺有點醜陋，所以說我們得修改它的樣式，但是不能跟著自己的想法改，要按照模板改
\ALLENCMDB\User\forms.py
from django import forms
class CMDBUserForm(forms.Form):
username = forms.CharField(max_length=32,label='使用者賬號',widget=forms.TextInput(attrs={'class': 'form-control'}))
password = forms.CharField(max_length=32,label='使用者密碼',widget=forms.PasswordInput(attrs={'class': 'form-control'}))
nickname = forms.CharField(max_length=32,label='使用者姓名',widget=forms.TextInput(attrs={'class': 'form-control'}))
phone = forms.CharField(max_length=32,label='使用者手機',widget=forms.TextInput(attrs={'class': 'form-control'}))
email = forms.EmailField(label='使用者郵箱',widget=forms.EmailInput(attrs={'class': 'form-control'}))
photo = forms.ImageField(label='使用者頭像')
前端修改如下
效果如下：
經過一番修改，這樣看起來就比剛剛那個介面好看多了吧！
基於JQ的前端校驗
Form前端校驗對於同學來說都是一個難點，今天推薦jq擴充套件框架jq_validate，它式jq擴充套件校驗庫，擁有豐富的校驗功能，由jq開發小組成員開發的。
1、匯入框架
下載jq-validation包
將上述兩個檔案放入此目錄下
然後我們開始編寫我們的指令碼語言，在script塊中匯入這兩個jq檔案，注意順序，先匯入Jq再匯入漢化檔案
程式碼如下：
<script>
$().ready(
function () {
$("#Register_Form").validate(
{
rules:{
username:{
required: true,
maxlength: 6,
minlength: 2
},
password:{
required: true,
maxlength: 12,
minlength: 6
},
nickname:{
required: true,
maxlength: 6,
minlength: 2
},
phone:{
required: true,
minlength: 11
},
email:{
required: true,
email: true
}
},
messages:{
username:{
required: '使用者名稱不能為空',
maxlength: '使用者名稱不能大於6位',
minlength: '使用者名稱不能少於2位'
},
password:{
required: '密碼不能為空',
maxlength: '密碼不能大於12位',
minlength: '密碼不能少於6位'
},
nickname:{
required: '使用者姓名不能為空',
maxlength: '使用者姓名不能大於6位',
minlength: '使用者姓名不能少於2位'
},
phone:{
required: '手機號碼不能為空',
minlength: '請輸入正確的手機號碼'
},
email:{
required: '郵件地址不能為空',
email: '請輸入正確的郵件地址'
},
}
}
)
}
)
</script>
這裡要注意我們還需要在新增表單提交和繫結id
效果如下：
將jq校驗和form標籤提交繫結
在message欄位下一層新增繫結form程式碼
我們的輸入框報錯不是紅色，怎樣去修改它為紅色呢？
修改報錯內容樣式
1、在static下建立css目錄，和css的配置檔案，並編寫css檔案
2、前端匯入css檔案
效果如下：
表單提交完成註冊
Form表單的自定義校驗
格式規則：
必須寫在forms的類裡面
校驗的函式名稱必須是clean_欄位名稱
所有要校驗的資料都可以同cleaned_data.get(欄位)得到
如果判斷沒有符合條件，必須誘發validationError
如果判斷符合條件,必須將值返回出來
我們當前使用者註冊的表單涉及到了圖片的表單提交,首先研究一下基本提交
因為有圖片，我們就要小心了
form標籤必須加上enctype=“multipart/form-data”
form表單需要加上{%csrf_token%}
新增csrf_token標籤氣候，預設在我們的表單當中多一項型別的hidden的input，他的值是csrf的token的值
後臺編寫前用render返回頁面
Django的基本註冊
\ALLENCMDB\ALLENCMDB\views.py
from django.shortcuts import render_to_response,render
from User.forms import CMDBUserForm
from Server.models import CMDBUser
from ALLENCMDB.settings import BASE_DIR
import os
def base(request):
return render_to_response('base.html')
def index(request):
register_forms = CMDBUserForm()
if request.method == 'POST' and request.POST and request.FILES:
register_data = CMDBUserForm(data=request.POST, files=request.FILES)
# 開始校驗
if register_data.is_valid():
# 校驗成功
register_post_data = register_data.cleaned_data
username = register_post_data.get('username')
password = register_post_data.get('password')
nickname = register_post_data.get('nickname')
phone = register_post_data.get('phone')
email = register_post_data.get('email')
# 當去get圖片的時候，get到的是個物件,用.name的方法獲取photo的值
photo = register_post_data.get('photo').name
# 資料入庫
CMDBUser.objects.create(
username=username,
password=password,
nickname=nickname,
phone=phone,
email=email,
photo=photo,
)
# 儲存檔案
photofile = request.FILES.get('photo')
photosavepath = os.path.join(BASE_DIR, 'static\\images\\%s' % photofile.name)
with open(photosavepath, 'wb') as pf:
for chunk in photofile.chunks():
pf.write(chunk)
else:
# 列印錯誤資訊，會將clean_函式的ValidationError錯誤資訊返回
print(register_data.errors)
return render(request,'index.html',locals())
index頁面如下：
{% extends "base.html" %} <!-- 這個標籤的引數需要加引號 -->
{% block title %}
艾倫CMDB管理系統
{% endblock %}
{% block style %}
<link rel="stylesheet" href="/static/css/register.css">
{% endblock %}
{% block label %}
<div class="container-fluid">
<div class="col-md-11">
艾倫CMDB系統-首頁
</div>
<div class="col-md-1">
<button class="btn btn-default" data-toggle="modal" data-target="#register_user_modal">
使用者註冊
</button>
</div>
</div>
{% endblock %}
{% block content %}
<!--
tabindex 導航鍵的順序
role = dialog 指定展示的式樣（角色）為模態框
aria-labelledby="MyLabel" 獲取值
aria-hidden="true" 在通常情況下模態框式隱藏，不觸發不會顯示的
footer 頁尾
-->
<div class="modal fade" id="register_user_modal" tabindex="-1" role="dialog" aria-labelledby="MyLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="MyLabel">
使用者註冊
</h4>
</div>
<form method="post" id="Register_Form" enctype="multipart/form-data">
{% csrf_token %}
<div class="modal-body">
{% for register_form in register_forms %}
<div class="form-group input-group">
<span class="input-group-addon">{{ register_form.label }}</span>
{{ register_form }}
</div>
{% endfor %}
</div>
<div class="modal-footer">
<button class="btn btn-primary">
註冊使用者
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript" src="/static/vendor/jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="/static/vendor/jquery/messages_zh.min.js"></script>
<script>
$().ready(
function () {
$("#Register_Form").validate(
{
rules:{
username:{
required: true,
maxlength: 6,
minlength: 2
},
password:{
required: true,
maxlength: 12,
minlength: 6
},
nickname:{
required: true,
maxlength: 6,
minlength: 2
},
{# phone:{#}
{# required: true,#}
{# minlength: 11#}
{# },#}
email:{
required: true,
email: true
}
},
messages:{
username:{
required: '使用者名稱不能為空',
maxlength: '使用者名稱不能大於6位',
minlength: '使用者名稱不能少於2位'
},
password:{
required: '密碼不能為空',
maxlength: '密碼不能大於12位',
minlength: '密碼不能少於6位'
},
nickname:{
required: '使用者姓名不能為空',
maxlength: '使用者姓名不能大於6位',
minlength: '使用者姓名不能少於2位'
},
{# phone:{#}
{# required: '手機號碼不能為空',#}
{# minlength: '請輸入正確的手機號碼'#}
{# },#}
email:{
required: '郵件地址不能為空',
email: '請輸入正確的郵件地址'
}
},
submitHandler:function () {
form.submit
}
}
)
}
)
</script>
{% endblock %}
基於cmdb的ajax表單提交
我們要做到django+ajax+form+img上傳
Ajax提交圖片
Ajax提交表單+圖片
從前端做起，寫ajax步驟
1、 收集資料
#注意層級關係
效果如下：
如果你的form資料包含檔案，我們提交時候需要用到js的一個型別,FormData
FormData.append(key,value)#新增資料
FormData.set(key,value)#修改資料
FormData.getAll(key)#通過key來獲取值
宣告FormData需要先
Var formData = new FormData
效果如下：
接下來我們要寫一個收集介面
簡單編寫一個介面,進行子urls程式設計
\ALLENCMDB\User\urls.py
\ALLENCMDB\ALLENCMDB\urls.py
\ALLENCMDB\User\views.py
效果如下:
發起請求
FormData將csrf值出入當中之後要進行類似json的封裝會使csrf失效，因此在提交之前我們要重新將csrf新增在請求頭部。
提交之後的效果如下:
優化ajax的介面程式碼，ajax提交入庫
\ALLENCMDB\User\views.py
from django.http import JsonResponse
import os
from User.forms import CMDBUserForm
from Server.models import CMDBUser
from ALLENCMDB.settings import BASE_DIR
def register(request):
result = {'submit': 'success'}
if request.method == 'POST' and request.POST and request.FILES:
register_data = CMDBUserForm(data=request.POST, files=request.FILES)
# 開始校驗
if register_data.is_valid():
# 校驗成功
register_post_data = register_data.cleaned_data
username = register_post_data.get('username')
password = register_post_data.get('password')
nickname = register_post_data.get('nickname')
phone = register_post_data.get('phone')
email = register_post_data.get('email')
# 當去get圖片的時候，get到的是個物件,用.name的方法獲取photo的值
photo = register_post_data.get('photo').name
# 資料入庫
CMDBUser.objects.create(
username=username,
password=password,
nickname=nickname,
phone=phone,
email=email,
photo=photo,
)
# 儲存檔案
photofile = request.FILES.get('photo')
photosavepath = os.path.join(BASE_DIR, 'static\\images\\%s' % photofile.name)
with open(photosavepath, 'wb') as pf:
for chunk in photofile.chunks():
pf.write(chunk)
return JsonResponse(result)
else:
# 列印錯誤資訊，會將clean_函式的ValidationError錯誤資訊返回
print(register_data.errors)
result['submit'] = 'error'
return JsonResponse(result)
else:
return JsonResponse({'method': 'GET'})
值得注意的是我們的images目錄是否存在？如果沒有我們需要在static目錄下進行新增
效果如下：
資料庫中已經存入我們的註冊資訊
下一章節，我會分享如何利用已有的註冊資訊進行使用者的登入