網站開發專題 week3

作者:

前置作業

按照之前的方式，新增一個虛擬環境，資料夾選擇 week3

cd C:\django_projects
mkdir week3
cd week3
python -m venv env

進入虛擬環境

.\env\Scripts\activate.bat

安裝 django 套件

pip install django

下載這裡提供的 week2 半成品，並且解壓縮到 wee3 目錄底下

https://wp.shxj.pw/share/webproject/mysite.zip

啟動 django 伺服器，測試功能是否正常

cd mysite
python manage.py runserver

進入以下網址登入，帳密為

  • 帳號: admin
  • 密碼: 123456

http://127.0.0.1:8000/admin/

看到這個畫面表示成功

使用 Ctrl + C 關閉啟動的伺服器

建立 views 視圖(頁面)

使用教材: 官方 Document

在這一個範例中，將會建立四個視圖(頁面)，官方說明如下

首先，開啟 VSCODE

code .

打開 polls/views.py 檔案，加入以下程式碼

def detail(request, question_id):
return HttpResponse("You're looking at question %s." % question_id)
def results(request, question_id):
response = "You're looking at the results of question %s."
return HttpResponse(response % question_id)
def vote(request, question_id):
return HttpResponse("You're voting on question %s." % question_id)

開啟 polls/urls.py，修改成以下程式碼

from django.urls import path
from . import views
urlpatterns = [
# ex: /polls/
path('', views.index, name='index'),
# ex: /polls/5/
path('<int:question_id>/', views.detail, name='detail'),
# ex: /polls/5/results/
path('<int:question_id>/results/', views.results, name='results'),
# ex: /polls/5/vote/
path('<int:question_id>/vote/', views.vote, name='vote'),
]

開啟以下的網址，就能看到對應的結果

http://127.0.0.1:8000/polls/5/

http://127.0.0.1:8000/polls/5/results/

http://127.0.0.1:8000/polls/5/vote/

開啟檔案 polls/views.py，修改成以下程式碼

from django.shortcuts import render
from django.http import HttpResponse
from .models import Question
# Create your views here.
def index(request):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
output = ', '.join([q.question_text for q in latest_question_list])
return HttpResponse(output)
def detail(request, question_id):
return HttpResponse("You're looking at question %s." % question_id)
def results(request, question_id):
response = "You're looking at the results of question %s."
return HttpResponse(response % question_id)
def vote(request, question_id):
return HttpResponse("You're voting on question %s." % question_id)

http://127.0.0.1:8000/polls/

新增與套用樣板檔案

在 polls 底下新增一個資料夾 templates

再在 templates 底下新增一個資料夾 polls

在這個 polls 資料夾裡面新增一個檔案 index.html

貼上以下的程式碼

{% if latest_question_list %}
<ul>
{% for question in latest_question_list %}
<li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No polls are available.</p>
{% endif %}

開啟檔案 polls/views.py 檔案，修改成以下的程式碼

from django.shortcuts import render
from django.http import HttpResponse
from .models import Question
from django.template import loader
# Create your views here.
def index(request):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
template = loader.get_template('polls/index.html')
context = {
'latest_question_list': latest_question_list,
}
return HttpResponse(template.render(context, request))
def detail(request, question_id):
return HttpResponse("You're looking at question %s." % question_id)
def results(request, question_id):
response = "You're looking at the results of question %s."
return HttpResponse(response % question_id)
def vote(request, question_id):
return HttpResponse("You're voting on question %s." % question_id)

http://127.0.0.1:8000/polls/

已經套用樣板了

再來我們可以使用 django 提供的快捷方式 Render()

將程式碼修改成以下

from django.shortcuts import render
from django.http import HttpResponse
from .models import Question
from django.template import loader
# Create your views here.
def index(request):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
context = {'latest_question_list': latest_question_list}
return render(request, 'polls/index.html', context)
def detail(request, question_id):
return HttpResponse("You're looking at question %s." % question_id)
def results(request, question_id):
response = "You're looking at the results of question %s."
return HttpResponse(response % question_id)
def vote(request, question_id):
return HttpResponse("You're voting on question %s." % question_id)

可以發現一樣的呈現方式。

如果發生了 404 錯誤 (例外處理)

修改 polls/views.py 檔案，修改成以下的程式碼

from django.shortcuts import render
from django.http import HttpResponse
from .models import Question
from django.template import loader
from django.http import Http404
# Create your views here.
def index(request):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
context = {'latest_question_list': latest_question_list}
return render(request, 'polls/index.html', context)
def detail(request, question_id):
try:
question = Question.objects.get(pk=question_id)
except Question.DoesNotExist:
raise Http404("Question does not exist")
return render(request, 'polls/detail.html', {'question': question})
def results(request, question_id):
response = "You're looking at the results of question %s."
return HttpResponse(response % question_id)
def vote(request, question_id):
return HttpResponse("You're voting on question %s." % question_id)

在 polls/templates/polls 底下新增一個樣板 detail.html

在其中加入以下程式碼

{{ question }}

好了之後，我們進入一個不存在的問題網址

http://127.0.0.1:8000/polls/3/

顯示了 404 的頁面

簡化一下 404 的程式碼，將 polls/views.py 修改成以下程式碼

from django.shortcuts import get_object_or_404, render
from django.http import HttpResponse
from .models import Question
from django.template import loader
from django.http import Http404
# Create your views here.
def index(request):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
context = {'latest_question_list': latest_question_list}
return render(request, 'polls/index.html', context)
def detail(request, question_id):
question = get_object_or_404(Question, pk=question_id)
return render(request, 'polls/detail.html', {'question': question})
def results(request, question_id):
response = "You're looking at the results of question %s."
return HttpResponse(response % question_id)
def vote(request, question_id):
return HttpResponse("You're voting on question %s." % question_id)

重新整理剛剛的頁面，將會得到一樣的結果。

使用模板系統 (列出問題選項)

修改 polls/templates/polls/detail.html 檔案，修改成以下程式碼

<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
<li>{{ choice.choice_text }}</li>
{% endfor %}
</ul>

刪除模板中的絕對路徑

開啟 polls/templates/polls/index.html 檔案，修改成以下程式碼

{% if latest_question_list %}
<ul>
{% for question in latest_question_list %}
<li><a href="{% url 'detail' question.id %}">{{ question.question_text }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No polls are available.</p>
{% endif %}

命名空間URL名稱

修改 polls/urls.py 檔案，修改成以下程式碼

from django.urls import path
from . import views
app_name = 'polls'
urlpatterns = [
path('', views.index, name='index'),
path('<int:question_id>/', views.detail, name='detail'),
path('<int:question_id>/results/', views.results, name='results'),
path('<int:question_id>/vote/', views.vote, name='vote'),
]

並且將 polls/templates/polls/index.html 修改成以下程式碼

{% if latest_question_list %}
<ul>
{% for question in latest_question_list %}
<li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No polls are available.</p>
{% endif %}

再次進入以下網址，確認頁面正常就完成囉

http://127.0.0.1:8000/polls/

SHXJ
Latest posts by SHXJ (see all)

發佈留言