上一篇創(chuàng)建了Django的后臺终息,今天來創(chuàng)建前臺視圖
創(chuàng)建Django首頁視圖
編輯視圖函數(shù)views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
def index(request):
# render()構造HttpResponse
# context: 將index.html中的變量替換為context傳遞的變量,
# {{ words}}替換為'words'的值
words = 'World!'
return render(request, 'index.html', context={'words': words})
創(chuàng)建完成后罩句,在django_student同級目錄下創(chuàng)建templates文件夾并創(chuàng)建index.html文件
├─django_student
│ │ admin.py
│ │ admin.pyc
│ │ apps.py
│ │ forms.py
│ │ forms.pyc
│ │ models.py
│ │ models.pyc
│ │ tests.py
│ │ views.py
│ │ views.pyc
│ │ __init__.py
│ │ __init__.pyc
│ │
│ ├─migrations
│ │ 0001_initial.py
│ │ 0001_initial.pyc
│ │ 0002_student_home_phone.py
│ │ 0002_student_home_phone.pyc
│ │ __init__.py
│ │ __init__.pyc
│ │
│ └─templates
│ index.html
│ __init__.py
我們在index.html內寫入如下代碼膏孟, {{ words }}是模板變量,在views.py中指定了context來傳遞模板變量的值
<!DOCTYPE html>
<html>
<head>
<title>學員管理系統(tǒng)</title>
</head>
<body>
Hello {{ words }}!
</body>
</html>
接下來磕谅,還需要再配置下django_student/urls.py器腋,讓用戶訪問url時把數(shù)據(jù)發(fā)送到定義的index這個視圖音比,使用正則表達式來匹配
<!DOCTYPE html>
<html>
from django.conf.urls import url
from django.contrib import admin
from student.views import index
urlpatterns = [
url(r'^$', index, name='index'),
url(r'^admin/', admin.site.urls),
]
開啟服務纺非,訪問下網(wǎng)頁语盈,會出現(xiàn)Hello舱馅,World!
python manage.py runserver
輸出數(shù)據(jù)
將后臺數(shù)據(jù)渲染到頁面上刀荒,現(xiàn)在admin中創(chuàng)建幾條數(shù)據(jù)
修改views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
from .models import Student
def index(request):
# Student.objects.all(): 獲取所有數(shù)據(jù)
students = Student.objects.all()
return render(request, 'index.html', context={'students': students})
修改index.html中代碼
{ % % }是模板標簽代嗤,先用for循環(huán)將students一個個取出來
{% endfor %}:循環(huán)結束了
{{ student.get_status_display }}:我們在models.py中定義了status字段,設置了choices來獲取對應的值
我們還可以在index.html中設置admin后臺鏈接
<!DOCTYPE html>
<html>
<head>
<title>學員管理系統(tǒng)</title>
</head>
<body>
<a href="/admin/">Admin</a>
<ul>
{% for student in students %}
<li>{{ student.name }} - {{ student.get_status_display }}</li>
{% endfor %}
</ul>
</body>
</html>
再次運行服務缠借,查看網(wǎng)頁
提交數(shù)據(jù)
這里我們用上了表單Form干毅,在views.py同級目錄下創(chuàng)建forms.p
# coding:utf-8
from __future__ import unicode_literals
from django import forms
from .models import Student
class StudentForm(forms.Form):
name = forms.CharField(label='姓名', max_length=128)
sex = forms.ChoiceField(label='性別', choices=Student.SEX_ITEMS)
profession = forms.CharField(label='職業(yè)', max_length=128)
email = forms.EmailField(label='郵箱', max_length=128)
qq = forms.CharField(label='QQ', max_length=128)
phone = forms.CharField(label='手機', max_length=128)
代碼和定義models.py很相似,可以使用繼承ModelForm來縮小代碼量
# coding:utf-8
from __future__ import unicode_literals
from django import forms
from .models import Student
class StudentForm(forms.ModelForm):
class Meta:
model = Student
fields = (
'name', 'sex', 'profession',
'email', 'qq', 'phone'
)
接下來我們需要修改視圖函數(shù)views.py泼返,在頁面中展示表單Form硝逢,對于提交的數(shù)據(jù)做校驗,通過后存入數(shù)據(jù)庫
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.http import HttpResponseRedirect
from django.urls import reverse
from django.shortcuts import render
from .models import Student
from .forms import StudentForm
def index(request):
# render()構造HttpResponse
# context: 將index.html中的變量替換為context傳遞的變量,
# {{ words}}替換為'words'的值
# form.cleaned_data:是Django的form是對用戶提交的數(shù)據(jù)根據(jù)字段類型做完轉換后的結果
# words = 'World'
students = Student.objects.all()
if request.method == 'POST':
form = StudentForm(request.POST)
if form.is_valid():
cleaned_data = form.cleaned_data
student = Student()
student.name = cleaned_data['name']
student.sex = cleaned_data['sex']
student.email = cleaned_data['email']
student.profession = cleaned_data['profession']
student.qq = cleaned_data['qq']
student.phone = cleaned_data['phone']
student.save()
# reverse():urls.py中和index對應
# HttpResponseRedirect()重定向到我們的首頁
return HttpResponseRedirect(reverse('index'))
else:
form = StudentForm()
context = {
'students': students,
'form': form,
}
# return render(request, 'index.html', context={'words': words})
return render(request, 'index.html', context=context)
接下來要把form傳入模板中绅喉,才能在頁面顯示表單
{% csrf_token %}:設置安全渠鸽,跨站偽造請求攻擊
<!DOCTYPE html>
<html>
<head>
<title>學院管理系統(tǒng)</title>
</head>
<body>
<a href="/admin/">Admin</a>
<ul>
{% for student in students %}
<li>{{ student.name }} - {{ student.get_status_display }}</li>
{% endfor %}
</ul>
<hr/>
<form action="/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit" />
</form>
</body>
</html>
校驗數(shù)字
以上步驟完成后,我們發(fā)現(xiàn)電話和QQ輸入字符沒有限制柴罐,可以使用IntegerField()來設置字符類型徽缚,或者使用clean來做限制,修改forms.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django import forms
from .models import Student
'''
class StudentForm(forms.Form):
name = forms.CharField(label='姓名', max_length=128)
sex = forms.ChoiceField(label='性別', choices=Student.SEX_ITEMS)
profession = forms.CharField(label='職業(yè)', max_length=128)
email = forms.EmailField(label='郵箱', max_length=128)
qq = forms.CharField(label='QQ', max_length=128)
phone = forms.CharField(label='手機', max_length=128)
'''
# 通過繼承ModelForm革屠,來寫下我們需要展示的fields
class StudentForm(forms.ModelForm):
def clean_qq(self):
cleaned_data = self.cleaned_data['qq']
# isdigit():驗證是否是數(shù)字
if not cleaned_data.isdigit():
raise forms.ValidationError('必須是數(shù)字凿试!')
return int(cleaned_data)
def clean_phone(self):
cleaned_data = self.cleaned_data['phone']
if not cleaned_data.isdigit():
raise forms.ValidationError('必須是數(shù)字!')
return int(cleaned_data)
class Meta:
model = Student
fields = (
'name', 'sex', 'profession',
'email', 'qq', 'phone',
)
運行服務
python manage.py runserver
django_test3.png
修改為數(shù)字再次提交就OK了