Re: 從零開始的 Laravel SPA 之旅 (三)
在上一篇文章中，我們設定好了網站的路由，我們已經可以在歡迎頁面跟任務清單頁面相互切換。現在，我們要開始實作任務清單內的功能。
在任務清單頁面中，我們可以新增／刪除任務。不過這些資料都是儲存在後端的資料庫中，因此我們必須向後端發送請求。這裡我們使用 Axios 來發送請求，這也是 Vue 官方推薦使用的套件。在 Laravel 中，已經安裝且設置好了，我們可以直接使用。
讀取
首先，我們先設定一個後端負責給予任務清單資料的 API。在路由設定上，我們使用 resource 函式，他可以幫我們建立基本的 REST 路由，目前我們只需要 index 的路由，所以我們透過 only 函示指定建立 index 路由。範例如下：
Route::resource('task', 'TaskController')->only([
'index'
]);然後在 Controller 中回傳任務清單的資料：
public function index()
{
return Task::orderBy('created_at', 'asc')->get();
}API 建立完成後，我們接著來處理前端的部分。我們先設置一個 tasks 的陣列，這個物件會有所有任務清單的資料。因為這個物件會跟畫面顯示相關，我們將它放在 view 物件底下( 這不是必須的，但當我們之後有較多的資料物件時，這可以幫助我們整理資料物件 )，範例如下：
data () {
return {
view: {
tasks: []
},
...
}
}我們之前說過，所有的任務資料都是儲存在後端的資料庫中。所以，現在我們必須透過 Axios 來跟後端要求任務清單的資料。Axios 的使用方式很簡單，只要選擇我們要使用的 HTTP Method，再將我們的連結傳入，接著再處理收到的回傳資料。這裡我們是要獲取資料，所以我們使用 GET Method，再將收到的任務清單資料指定給 tasks 物件。範例如下：
axios.get('/api/task')
.then(response => {
this.view.tasks = response.data;
});現在我們已經有任務清單的資料了，接著我們建立一個 table 來顯示資料清單，透過迴圈產生每一筆任務資料：
<!-- 放置任務清單的 table --!>
<table class="table table-striped task-table">
<thead>
<th>Task</th>
<th> </th>
</thead>
<tbody> <!-- 使用迴圈生成任務清單 --!>
<tr v-for="task in view.tasks" :key="task.id">
<td class="table-text">
<div>{{ task.name }}</div>
</td> <td>
<button type="submit" class="btn btn-danger">
<i class="fa fa-btn fa-trash"></i>Delete
</button>
</td>
</tr>
</tbody>
</table>
新增
跟讀取相同，我們先設置一個「新增任務」的 API。我們先在路由設定中加上 store 的路由：
Route::resource('task', 'TaskController')->only([
'index', 'store'
]);在 Controller 中，我們會收到由前端傳來的任務表單資料，我們必須確認表單資料是否正確。在這邊，我們建立兩個規則，一個是任務資料不能為空再來是任務的長度不能超過 255。如果資料確認沒有問題，我們就將它儲存進資料庫，範例如下：
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required|max:255',
]); $task = new Task;
$task->name = $request->name;
$task->save(); return ['message' => 'Task created!'];
}
「新增任務」的 API 建立完成後，現在我們來建立新增任務的頁面。我們先建立一個用來發送表單資料的 form 物件。新增任務時需要填寫任務名稱，因此我們在 form 物件底下增加一個 name 物件：
data () {
return {
form: {
name: ''
},
...
}
}接著我們將 name 物件與任務的輸入匡雙向綁定：
<input id="task-name" type="text" v-model="form.name">最後，我們建立一個新增任務的函式，當點擊新增任務按鈕時便觸發這個函式來發送表單資料給後端，函式的範例如下：
methods: {
add: functoin () {
axios.post('/api/task', this.form)
.then(response => {
// 新增完成後，將任務輸入匡清空
this.form.name = '';
});
}
}刪除
跟之前一樣，我們先建立「刪除任務」的 API。我們先在路由中加上 delete 的路由：
Route::resource('task', 'TaskController')->only([
'index', 'store', 'delete'
]);接著我們在 Controller 中，將指定的任務刪除：
public function destroy($id)
{
Task::findOrFail($id)->delete();
return ['message' => 'Task deleted!'];
}刪除的 API 建立完成後，我們現在處理前端的刪除功能。我們建立一個刪除的函式，當點擊任務的刪除按鈕時，就觸發這個函式來刪除任務。在個函式中，我們使用 Axios 將指定刪除的任務 id 發送給後端，當成功刪除後，我們再更新任務清單的資料，範例如下：
methods: {
remove: function (id) {
axios.delete('/api/task/' + id)
.then(() => {
// 更新任務清單的資料 ( 使用之前讀取任務清單的範例 )
...
});
}
}好了，這樣我們就完成一個任務清單的 SPA 網站。在這系列文中的所有程式碼都會放置於底下的 github 專案。
