剛看到標題可能會不知道今天要幹嘛，我們今天要接續Day 09的內容，把從資料庫資料表取得的資料，用表格的形式在畫面上呈現出來。

複習一下我們在Day 09最後呈現的網頁 :

接下來要分3部分開始實作囉!

注意! 要先在members/templates新增1個index.html(新增就好先不動它)。

修改 View

這次我們一樣要去修改members/views.py的index方法，把它修改成像下方這樣 :

from django.http import HttpResponse
from django.template import loader
from .models import Members

def index(request):
  mymembers = Members.objects.all().values() #1
  template = loader.get_template('index.html') #2
  context = { 
    'mymembers': mymembers, #3
  }
  return HttpResponse(template.render(context, request)) #4

1. 將Members資料表的紀錄(Reoord)取出來放到mymembers裡面
2. 載入index.html這個Template並放到同名變數template裡面
3. 建立名為context的變數，然後以Dict的Key-Value形式，放進變數mymembers
4. 把攜帶著資料表紀錄資料的context傳到template裡面，最後以template回應請求並顯示在瀏覽器的視窗畫面上

修改 Template

我們剛剛把資料表的紀錄(Record)資料傳給index.html後，接下來就要到members/templates/index.html稍微修改原始碼，把每筆紀錄(Record)依序加到表格中。

修改之後長得像這樣:

<h1>Members</h1>

<table border="1">
{% for x in mymembers %} 
<tr>
<td>{{ x.id }}</td>
<td>{{ x.firstname }}</td>
<td>{{ x.lastname }}</td>
</tr>
{% endfor %}
</table>

• {% for x in mymembers %}
  • mymembers就是context裡面的Key，而實際上取得的Value則是QuerySet，接著用For迴圈把QuerySet裡面的Record逐一拿出來放到變數x
    
• {{ x.id }}
  • 取出該筆紀錄的id值
• {{ x.firstname }}
  • 取出該筆紀錄的firstname值
• {{ x.lastname }}
  • 取出該筆紀錄的lastname值
• {% endfor %}
  • 結束For迴圈區塊

最後就到檢視成果的部分囉!

啟動 Server 檢視成果

1. 打開CMD並切換到虛擬環境(python venv)的資料夾路徑下

   (實際venv路徑不一定會跟我一樣喔!)

   

2. 輸入以下指令啟動虛擬環境

   Scripts\activate.bat
   

   

   啟動虛擬環境後結果如下:

   

3. 接著切換路徑到Django Project所在的資料夾下

   

4. 接著輸入以下指令Start Server

   py manage.py runserver
   

   

5. 在瀏覽器輸入對應的網址(127.0.0.1:8000/members/)就可以看到這次的成果

   

截至目前為止，我們只會在Python Shell裡面新增資料，接下來的2篇文章會介紹如何在網頁上新增資料到資料庫資料表。