(十七) Django - template(part3)

2021-02-26

測驗結果畫面想加一下圖片，依成績級距放對應的圖片。

第一步：settings.py

要先來設定圖片要儲存的地方：

1	STATIC_URL = '/static/'STATICFILES_DIRS = [os.path.join(BASE_DIR, \"static\"),]MEDIA_URL = '/media/'MEDIA_ROOT = os.path.join(BASE_DIR, \"media\")

不需要自己建立資料夾，只要在admin上傳第一張圖片後，會自行生成一個mysite/media資料夾。

第二部：urls.py

在最後面加上這一行，這樣才可以在網頁上顯示圖片：

1	urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

第三步：增加model

*quiz/models.py
class Six(models.Model):
    range_start = models.IntegerField(default=0)#分數區間的頭
    range_end = models.IntegerField(default=0)#分數區間的尾
    grade = models.CharField(max_length=200)
    photo = models.ImageField(upload_to='grade_pictures', default="")

1.ImageField用於保存圖像文件，upload_to是圖片上傳後要儲存的路徑 ‘mysite/media/grade_pictures’。
2.要安裝pillow套件。
3.grade代表的是每個分數區間，總共有六個：傑出、超乎期待、合格…請參考O.W.L exam。

第四步：調整views.py function result

def result(request, total):
    score = total
    six = Six.objects.all()
    for s in six:
        if score in range(s.range_start, s.range_end):
        #判斷測驗分數位在哪個區間
            grade = s.grade
            photo = s.photo
        else:
            pass
    return render(request, 'result.html', locals())

第五步：template

<TABLE border=\"0\" class=\"t1\" cellpadding=\"9\">
    <TR> 
       <TD style=\"font-size:20px;\" align=\"center\" colspan=\"3\" class=\"td1\" bgcolor=\"#5AF961\">測驗結果：{{ grade }}</TD>        </TR>
    <br />
    <TR>
        <TD class=\"td2\"><img src=\"{{ photo.url }}\" width=\"900\"></TD>        </TR>
    <TR>
        <TD class=\"td2\"><a href=\"/quiz/\"><p style=\"text-align:center\">⇢再做一次測試</p></a></TD>
    </TR>
</TABLE>

記得放置photo變數時是寫。

結果長這樣啦～