【Day 15】網頁新增紀錄到資料庫資料表 (下)

2022-09-30

2022-10-17

接續昨天的內容，我們今天要來實做表單送出並新增資料到資料表的功能。
先來複習我們昨天表單的原始碼 :

<h1>Add member</h1>

<form action="addrecord/" method="post">
{% csrf_token %}
First Name:<br>
<input name="first">
<br><br>
Last Name:<br>
<input name="last">
<br><br>
<input type="submit" value="Submit">
</form>

在我們提交表單後，資料會被POST到member/add/addrecord/這個路徑，然後準備做下一步的處理，而要如何處理收到的資料，依靠的還是URLs和Views的配合。

我們接下來需要先在members的views.py新增收到對路徑member/add/addrecord/請求的處理方法，然後在urls.py裡，新增相應的路徑用來正確指向、設定處理路徑請求的view方法和給定路徑別名。

修改 Views

在members/views.py裡面新增addrecord方法用來處理表單送出後產生的請求並把收到的資料新增到資料表上。

from django.http import HttpResponse, HttpResponseRedirect #1
from django.template import loader
from django.urls import reverse #2
from .models import Members

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

#本次新增的內容
def addrecord(request):
  x = request.POST['first'] #3
  y = request.POST['last'] #4
  member = Members(firstname=x, lastname=y) #5
  member.save() #6
  return HttpResponseRedirect(reverse('index')) #7

HttpResponseRedirect是HttpResponse的subclass，用來做路徑的重新導向
reverse的功能是允許使用前面說過的path別名，來找到對應的路徑和相應的view方法
我們的表單是以POST的方式，將資料含在HttpRequest裡寄出，那我們當然要去找HttpRequest物件(request)的POST屬性拿資料。從POST這個屬性拿到的資料，它本身會是個QueryDict，也就是Python裡為人熟知的Key-Value結構。因此我們會用POST['first']的形式去拿到表單name=first的資料值。
同上，我們用POST['last']的形式去拿到表單name=last的資料值。
把剛拿到的資料值用來建立Members物件即要新增到資料表的新紀錄(Record)並以變數member承接
實際將這筆新的紀錄(Record)存放到資料表上
HttpResponseRedirect用來重新導引路徑，而後面的reverse('index')，則可以把它想成path('', views.index, name='index')，也就是新增完資料後跳轉回members/

修改完Views接著修改URLs，讓Django能正確處理對members/add/addrecord的請求。

修改 URLs

在members/urls.py的urlpatterns裡面，新增到add/addrecord的路徑、指定處理請求的view方法和設定路徑別名。

from django.urls import path
from . import views

urlpatterns = [
  path('', views.index, name='index'),
  path('add/', views.add, name='add'),
  path('add/addrecord/', views.addrecord, name='addrecord'), #1
]