文章轉(zhuǎn)發(fā)自專業(yè)的Laravel開發(fā)者社區(qū)，原始鏈接：https://learnku.com/laravel/t/34858

我們在第4部分完成了編輯用戶的功能，并且學(xué)習(xí)了如何使用 v-model 來監(jiān)聽視圖組件中用戶信息的更改。現(xiàn)在我們可以開始構(gòu)思刪除用戶功能，以及刪除操作成功后如何處理 UI 變化。

在這個(gè)過程中，我們將會(huì)考慮構(gòu)建一個(gè) Axios 客戶端實(shí)例，以便我們在配置 API 客戶端時(shí)具有更高的靈活性。

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

我們要做的第一件事就是定義刪除單個(gè)用戶的 API 路由。 得益于 Laravel 的路由模型綁定，我們只需要在 UsersController 中添加寥寥幾行的代碼就可以實(shí)現(xiàn)刪除單個(gè)用戶的功能：

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按鈕下新增一個(gè)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按鈕中復(fù)制 :disabled 屬性到Delete按鈕中，從而防止我們在執(zhí)行某個(gè)操作時(shí)，導(dǎo)致意外的更新或者刪除。

接下來，我們要在Delete按鈕上綁定 onDelete() 回調(diào)，從而實(shí)現(xiàn)刪除用戶的功能。

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

我們在 API 客戶端調(diào)用 delete() 方法 ，然后綁定一個(gè)回調(diào)函數(shù)來注銷控制臺中的響應(yīng)對象。如果單擊“刪除”按鈕 ，更新和刪除按鈕將被禁用，因?yàn)槲覀儺?dāng)前設(shè)置這個(gè) this.saving = true —我們馬上會(huì)討論這個(gè)問題。 如果你開啟了控制臺，你將會(huì)看到一個(gè)內(nèi)容為 204 No Content 的響應(yīng)對象，這說明刪除成功。

如何對成功刪除用戶作出相應(yīng)的反饋

與更新一個(gè)用戶不同的一點(diǎn)是，一旦我們成功刪除了一個(gè)用戶記錄，那么數(shù)據(jù)庫中就沒有這個(gè)用戶的記錄了。在傳統(tǒng)的網(wǎng)頁應(yīng)用中，我們會(huì)刪除那條用戶記錄，然后重定向返回用戶列表。

在我們的SPA單頁應(yīng)用中，我們也可以通過編程方式將用戶導(dǎo)航到 /users 頁面的方式來實(shí)現(xiàn)這一點(diǎn)：

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

在我們的刪除事件中應(yīng)用 this.$router.push() 函數(shù)，最初版本的刪除事件應(yīng)該是這個(gè)樣子：

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

如果你刷新應(yīng)用，并且刪除一個(gè)用戶，你將會(huì)注意到禁用按鈕的一個(gè)短暫的閃爍，然后然后瀏覽器在沒有任何反饋的情況下導(dǎo)航到 /users 頁面。

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

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

上面的代碼設(shè)置了我們在第 4 部分中設(shè)置的 this.message 數(shù)據(jù)屬性和在導(dǎo)航至/users 頁面之前等待 2 秒鐘。

你也可以使用諸如 portal-vue 之類的插件或者布局中的一個(gè)組件來臨時(shí)閃爍消息（或者在消息彈出后，使用強(qiáng)制關(guān)閉按鈕關(guān)閉），顯示一個(gè)操作是否已經(jīng)成功（或者失敗），從而向用戶提供反饋。

404

你可能注意到了即使我們的 Vue路由與 /users/:id/edit 模式相匹配, 但是當(dāng)用戶 id 不存在時(shí)，我們依然可能收到一個(gè) 404 的響應(yīng)。

使用服務(wù)端的 Laravel 應(yīng)用,我們可以很容易地從 ModelNotFoundException 渲染一個(gè) 404.blade.php 。不過SPA有些不同。 上述路由是有效的，所以我們需要我們的組件渲染 error 組件或者將用戶重定向到一個(gè)專用的404路由。

我們將在 resources/assets/js/app.js 中Vue 路由的配置中添加一些新路由，這些路由提供一個(gè)專門的404視圖和一個(gè)可以將所有無法匹配的路由重定向到404路由的萬能路由：

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

我們將會(huì)在 resources/assets/js/views/NotFound.vue 中創(chuàng)建一個(gè)簡單的 NotFound組件 :

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

因?yàn)樵诤蠖说腖aravel程序中存在一個(gè)萬能路由, 這意味著前端也需要這么一個(gè)萬能路由，當(dāng)訪問路徑與已經(jīng)定義的路由不匹配時(shí)以一個(gè)404頁面作為響應(yīng)。這里有一個(gè)用作刷新的后臺路由，它會(huì)捕獲所有路由信息并且渲染SPA模板:

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

如果你數(shù)入一個(gè)無效的 URL 比如 /does-not-exist,你會(huì)看到像下面的一堆東西:

Vue路由器觸發(fā)了會(huì)將瀏覽器重定向到 /404 的通配符路由規(guī)則。

對于我們之前舉的一個(gè)無效用戶id的樣例，我們設(shè)置的規(guī)則仍然無法正常起作用 ，因?yàn)閺募夹g(shù)上來說，這個(gè)路由是有效的。為了捕獲在 create() 回調(diào)中失敗的請求信息，以及將用戶請求重定向到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' });}); }

現(xiàn)在，如果您直接向 /users/2000/edit 這樣的 URI 發(fā)出請求，你應(yīng)該會(huì)看到應(yīng)用重定向到404頁面，而不是掛在 UsersEdit 組件的“ Loading... ” UI 上。

API客戶端選項(xiàng)

盡管我們奉獻(xiàn)的 users.js 在小型應(yīng)用程序中，HTTP 客戶端可能被認(rèn)為是有點(diǎn)小題大做了，我認(rèn)為分離已經(jīng)為我們提供了很好的服務(wù)，因?yàn)槲覀冊诙鄠€(gè)組件中使用了 API 模塊。如果你想了解靈活客戶端提供的所有細(xì)節(jié)，我在我的文章構(gòu)建靈活的Axios客戶端中詳細(xì)討論了這個(gè)想法。 在不改變客戶機(jī)的外部 API 的情況下，我們可以改變客戶機(jī)在后臺的工作方式。例如，我們可以創(chuàng)建一個(gè)具有自定義配置和默認(rèn)值的 Axios 客戶端實(shí)例：

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}`);}, };

現(xiàn)在，如果我想定制整個(gè)模塊的工作方式而不影響方法，我可以在以后用一些配置替換掉 baseURL。

接下來是什么

我們學(xué)習(xí)了如何通過Vue路由器在前端刪除用戶并對成功刪除做出響應(yīng).。我們通過在主app.js文件中用vue.use（vue router）注冊vue路由器，引入了通過this.$router屬性的編程導(dǎo)航。

接下來，我們將轉(zhuǎn)向構(gòu)建用戶創(chuàng)建，以總結(jié)如何執(zhí)行基本的創(chuàng)建、讀取、更新和刪除（CURD）操作。此時(shí)，您應(yīng)該擁有自己完成創(chuàng)建新用戶所需的所有工具，因此可以在本系列的下一篇文章發(fā)布之前嘗試構(gòu)建此功能。

準(zhǔn)備好后，請查看第6部分-創(chuàng)建新用戶

總結(jié)

以上是生活随笔為你收集整理的404 单页应用 报错 路由_通过 Laravel 创建一个 Vue 单页面应用（五）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。