目前我們學會如何實作在網頁上新增、刪除資料表資料的功能,接下來會學到如何實作在網頁上更新資料表資料的功能,為避免內容過多,所以會分成上下2個部分,各自獨立寫成文章。
那具體來說,我們今天到底會做些什麼呢?
members
資料夾的index.html
新增連向更新資料表資料的表單連結members
資料夾下建立更新資料表資料的表單update.html
members
資料夾的views.py
和urls.py
讓訪問者能順利看到更新資料的表單為了讓訪問者能順利進到表單並更新資料表上的資料,我們需要在members/indexx.html
原先的資料表格上,再添加1欄update
連結到表單。
把members/index.html
修改成像下方這樣 :
<h1>Members</h1>
<table border="1">
{% for x in mymembers %}
<tr>
<td>{{ x.id }}</td>
<td>{{ x.firstname }}</td>
<td>{{ x.lastname }}</td>
<td><a href="update/{{ x.id }}">update</a></td> #1
<td><a href="delete/{{ x.id }}">delete</a></td>
</tr>
{% endfor %}
</table>
<p>
<a href="add/">Add member</a>
</p>
update/{{ x.id }}
,所以在修改URLs
的時候,也會採用比較特殊的格式。目前改完看起來會是這樣 :
新增到表單的連結後,我們要來製作更新資料表資料的表單啦!
在members/templates
資料夾下面新增1個.html
檔update.html
:
然後把原先空白的檔案改成下面這樣 :
<h1>Update member</h1>
<form action="updaterecord/{{ mymember.id }}" method="post">
{% csrf_token %}
First Name:<br>
<input name="first" value="{{ mymember.firstname }}">
<br><br>
Last Name:<br>
<input name="last" value="{{ mymember.lastname }}">
<br><br>
<input type="submit" value="Submit">
</form>
關於mymember.id/firstname/lastname
資料的取得,跟之前一樣會透過views.py
裡面的方法,將資料表上對應要更新的資料值拿出後傳給update.html
(以Context
的形式傳入,Key-Value
),資料進入update.html
後,可以用類似物件導向的方式存取各個屬性值。
這邊會這樣寫是希望在更新資料之前,可以看到現有的資料值,而不是進來就是空白的更新表單,導致對照修改資料前後差異的不方便。
表單新增完後看起來會像這樣 :
(實際上做到這邊還無法看到表單跟資料,因為還沒修改Views
跟URLs
)
修改URLs
能讓表單找到通向訪問者瀏覽器的路!
把members/urls.py
修改成以下這樣 :
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'),
path('delete/<int:id>', views.delete, name='delete'),
path('update/<int:id>', views.update, name='update') #1
]
<int:id>
,它是用來讓path
可以攜帶參數,前面的int
是參數型別,後面的id
則是參數名稱。除此之外,views.py
的update
方法在處理請求的時候,跟以往不同會以update(request,id)
的形式被呼叫,而最後的路徑別名則是跟之前相同沒有改變功能。修改完URLs
後,我們還缺1個在members/views.py
的update
方法。
讓表單找到正確的路後,我們需要在members/views.py
裡新增名為update
的方法,用來處理訪問者拜訪表單所產生的請求。
把members/views.py
修改成像下面這樣 :
#上面的東西都沒變所以省略...
def delete(request, id):
member = Members.objects.get(id=id)
member.delete()
return HttpResponseRedirect(reverse('index'))
#本次新增的內容
def update(request, id): #1
mymember = Members.objects.get(id=id) #2
template = loader.get_template('update.html') #3
context = { #4
'mymember': mymember,
}
return HttpResponse(template.render(context, request)) #5
members/urls.py
使用帶有參數的path
,所以方法update
的參數包含request
和id
。id
的資料表紀錄(Record
)拿出來放到mymember
裡面。update.html
為要顯示在瀏覽器畫面的template
。context
採key-value
的形式,它是要傳入template
(update.html
) 的資料,這裡把剛剛拿到的資料表紀錄放進去。context
)傳入template
(update.html
),然後把網頁渲染到瀏覽器的畫面上。最後來檢視一下今天的成果吧!
打開CMD
並切換到虛擬環境(python venv
)的資料夾路徑下
(實際venv
路徑不一定會跟我一樣喔!)
輸入以下指令啟動虛擬環境
Scripts\activate.bat
啟動虛擬環境後結果如下:
接著切換路徑到Django Project
所在的資料夾下
接著輸入以下指令Start Server
py manage.py runserver
在瀏覽器輸入對應的網址(127.0.0.1:8000/members/
),接著點擊update
那欄就可以看到這次的成果
明天會繼續實作提交表單去更新資料表資料的功能。