經過 Laravel 建立一個 Vue 單頁面應用（五）

文章轉發自專業的Laravel開發者社區，原始連接：learnku.com/laravel/t/3…

咱們在第4部分完成了編輯用戶的功能，而且學習瞭如何使用 v-model 來監聽視圖組件中用戶信息的更改。如今咱們能夠開始構思刪除用戶功能，以及刪除操做成功後如何處理 UI 變化。

在這個過程當中，咱們將會考慮構建一個 Axios 客戶端實例，以便咱們在配置 API 客戶端時具備更高的靈活性。

更新 API 添加刪除用戶的功能

咱們要作的第一件事就是定義刪除單個用戶的 API 路由。 得益於 Laravel 的路由模型綁定，咱們只須要在 UsersController 中添加寥寥幾行的代碼就能夠實現刪除單個用戶的功能：

public function destroy(User $user)
{
    $user->delete();

    return response(null, 204);
}

複製代碼

接下來，須要在  routes/api.php 文件的 Api 路由組的底部定義新的路由。

Route::namespace('Api')->group(function () {
    Route::get('/users', 'UsersController@index');
    Route::get('/users/{user}', 'UsersController@show');
    Route::put('/users/{user}', 'UsersController@update');
    Route::delete('/users/{user}', 'UsersController@destroy');
});

複製代碼

在前端刪除用戶

咱們將經過編輯 UsersEdit.vue 組件，在Update按鈕下新增一個Delete按鈕的方式，向 /users/:id/edit 視圖組件中添加刪除功能。

<div class="form-group">
    <button type="submit" :disabled="saving">Update</button>
    <button :disabled="saving" @click.prevent="onDelete($event)">Delete</button>
</div>

複製代碼

咱們從Update按鈕中複製 :disabled 屬性到Delete按鈕中，從而防止咱們在執行某個操做時，致使意外的更新或者刪除。

接下來，咱們要在Delete按鈕上綁定  onDelete()  回調，從而實現刪除用戶的功能。

onDelete() {
  this.saving = true;

  api.delete(this.user.id)
     .then((response) => {
        console.log(response);
     });
}

複製代碼

咱們在 API 客戶端調用 delete() 方法 ，而後綁定一個回調函數來註銷控制檯中的響應對象。若是單擊「刪除」按鈕 ，更新和刪除按鈕將被禁用，由於咱們當前設置這個 this.saving = true —咱們立刻會討論這個問題。 若是你開啓了控制檯，你將會看到一個內容爲 204 No Content 的響應對象，這說明刪除成功。

如何對成功刪除用戶做出相應的反饋

與更新一個用戶不一樣的一點是，一旦咱們成功刪除了一個用戶記錄，那麼數據庫中就沒有這個用戶的記錄了。在傳統的網頁應用中，咱們會刪除那條用戶記錄，而後重定向返回用戶列表。

在咱們的SPA單頁應用中，咱們也能夠經過編程方式將用戶導航到 /users 頁面的方式來實現這一點：

this.$router.push({ name: 'users.index' })

複製代碼

在咱們的刪除事件中應用 this.$router.push() 函數，最第一版本的刪除事件應該是這個樣子：

onDelete() {
  this.saving = true;
  api.delete(this.user.id)
     .then((response) => {
        this.$router.push({ name: 'users.index' });
     });
}

複製代碼

若是你刷新應用，而且刪除一個用戶，你將會注意到禁用按鈕的一個短暫的閃爍，而後而後瀏覽器在沒有任何反饋的狀況下導航到 /users 頁面。

咱們可使用一個專門的彈窗/通知機制來通知用戶。拋磚引玉，我會提供給你一個粗略版本的代碼，可是這只是我針對這個問題的一個基本的想法。

onDelete() {
  this.saving = true;
  api.delete(this.user.id)
     .then((response) => {
        this.message = 'User Deleted';
        setTimeout(() => this.$router.push({ name: 'users.index' }), 2000);
     });
}

複製代碼

上面的代碼設置了咱們在第 4 部分中設置的 this.message 數據屬性和在導航至/users 頁面以前等待 2 秒鐘。

你也可使用諸如 portal-vue 之類的插件或者佈局中的一個組件來臨時閃爍消息（或者在消息彈出後，使用強制關閉按鈕關閉），顯示一個操做是否已經成功（或者失敗），從而向用戶提供反饋。

404

你可能注意到了即便咱們的 Vue路由與 /users/:id/edit 模式相匹配, 可是當用戶 id 不存在時，咱們依然可能收到一個 404 的響應。

使用服務端的 Laravel 應用,咱們能夠很容易地從 ModelNotFoundException 渲染一個 404.blade.php 。不過SPA有些不一樣。 上述路由是有效的，因此咱們須要咱們的組件渲染 error 組件或者將用戶重定向到一個專用的404路由。

咱們將在 resources/assets/js/app.js 中Vue 路由的配置中添加一些新路由，這些路由提供一個專門的404視圖和一個能夠將全部沒法匹配的路由重定向到404路由的萬能路由：

{ path: '/404', name: '404', component: NotFound },
{ path: '*', redirect: '/404' },

複製代碼

咱們將會在 resources/assets/js/views/NotFound.vue 中建立一個簡單的 NotFound組件 :

<template>
  <div>
    <h2>Not Found</h2>
    <p>Woops! Looks like the page you requested cannot be found.</p>
  </div>
</template>

複製代碼

由於在後端的Laravel程序中存在一個萬能路由, 這意味着前端也須要這麼一個萬能路由，當訪問路徑與已經定義的路由不匹配時以一個404頁面做爲響應。這裏有一個用做刷新的後臺路由，它會捕獲全部路由信息而且渲染SPA模板:

Route::get('/{any}', 'SpaController@index')
    ->where('any', '.*');

複製代碼

若是你數入一個無效的 URL 好比 /does-not-exist,你會看到像下面的一堆東西:

Vue路由器觸發了會將瀏覽器重定向到 /404 的通配符路由規則。

對於咱們以前舉的一個無效用戶id的樣例，咱們設置的規則仍然沒法正常起做用 ，由於從技術上來講，這個路由是有效的。爲了捕獲在 create() 回調中失敗的請求信息，以及將用戶請求重定向到404路由，咱們須要更新一下 UsersEdit ：

created() {
  api.find(this.$route.params.id)
     .then((response) => {
         this.loaded = true;
         this.user = response.data.data;
     })
     .catch((err) => {
       this.$router.push({ name: '404' });
     });
}

複製代碼

如今，若是您直接向 /users/2000/edit 這樣的 URI 發出請求，你應該會看到應用重定向到404頁面，而不是掛在 UsersEdit 組件的「 Loading... 」 UI 上。

API客戶端選項

儘管咱們奉獻的 users.js 在小型應用程序中，HTTP 客戶端可能被認爲是有點小題大作了，我認爲分離已經爲咱們提供了很好的服務，由於咱們在多個組件中使用了 API 模塊。若是你想了解靈活客戶端提供的全部細節，我在個人文章構建靈活的Axios客戶端中詳細討論了這個想法。 在不改變客戶機的外部 API 的狀況下，咱們能夠改變客戶機在後臺的工做方式。例如，咱們能夠建立一個具備自定義配置和默認值的 Axios 客戶端實例：

import axios from 'axios';

const client = axios.create({
  baseURL: '/api',
});

export default {
  all(params) {
    return client.get('users', params);
  },
  find(id) {
    return client.get(`users/${id}`);
  },
  update(id, data) {
    return client.put(`users/${id}`, data);
  },
  delete(id) {
    return client.delete(`users/${id}`);
  },
};

複製代碼

如今，若是我想定製整個模塊的工做方式而不影響方法，我能夠在之後用一些配置替換掉 baseURL。

接下來是什麼

咱們學習瞭如何經過Vue路由器在前端刪除用戶並對成功刪除作出響應.。咱們經過在主app.js文件中用vue.use（vue router）註冊vue路由器，引入了經過this.$router屬性的編程導航。

接下來，咱們將轉向構建用戶建立，以總結如何執行基本的建立、讀取、更新和刪除（CURD）操做。此時，您應該擁有本身完成建立新用戶所需的全部工具，所以能夠在本系列的下一篇文章發佈以前嘗試構建此功能。

準備好後，請查看第6部分-建立新用戶