使用Laravel创建一个Vue单页应用程序（二）

在本教程中，我们通过学习如何在Vue组件中从LaravelAPI加载异步数据，继续在Laravel中创建一个Vue单页应用程序（SPA）。我们还将查看相关的错误处理，例如当API返回错误时接口如何响应。如果您没有遵循第1部分，我们构建了一个带有Vue路由器和Laravel后端的Vue单页应用程序(SPA)。如果您想继续学习，您应该先完成第1部分！保持服务器端数据简单，我们的API将返回虚假数据。在第三部分，我们将让API通过控制器从数据库返回测试数据。API路由Vue单页应用是无状态的，这就需要我们在向Laravel路由发起API请求时，传递routes/api.php中定义的路由。API路由不使用会话状态，这意味着应用程序在后端是真正无状态的。在示例中，假设我们需要一个用户列表来演示从Vue应用程序到后端的异步请求：Route::get('/users',function(){returnfactory('App\User',10)->制作();});我们的临时路线使用模型工厂来创建尚未保存到数据库的Eloquent模型集合。使用make()方法，而不是将测试数据保存到数据库中，它会返回一个尚未存储在数据库中的App\User的新实例。在routes/api.php中定义路由意味着请求会有一个/api前缀，因为这个前缀是在应用程序的RouteServiceProvider类中定义的：protectedfunctionmapApiRoutes(){Route::prefix('api')->middleware('api')->namespace($this->namespace)->group(base_path('routes/api.php'));}结果是GET/api/users，一个例子是这样的：[{"name":"RoelRosenbaumI","email":"catharine.kreiger@example.net"},{"name":"Prof.ClarissaOsinski","email":"wilfrid.kiehn@example.com"},{"name":"MyrtleWyman","email":"dan31@example.com"},...]客户端路由在第1部分中，我们创建了一些新的路由来演示SPA的导航。任何时候我们想要添加一个新路由，我们都会在路由数组中创建一个新对象来定义路由、名称和组件。最后一条路线是新的/users路线：importUsersIndexfrom'./views/UsersIndex';constrouter=newVueRouter({mode:'history',routes:[{path:'/',name:'home',component:Home},{path:'/hello',name:'hello',component:你好，}，{路径：'/users'，名称：'users.index'，组件：UsersIndex，}，]，}）;UsersIndex组件有一个使用UsersIndex组件的路由；目前我们希望它（位于resources/assets/js/views/UsersIndex.vue）看起来像这样：如果你是Vue新手，你可能会遇到一些陌生的概念。推荐阅读Vue组件文档，熟悉Vue的生命周期钩子（new、load等）。在该组件中，在创建组件时获取异步数据。定义一个fechData()方法来将error和users属性初始化为null，并将loading设置为true。fetchData()方法的最后一行使用Axios库向LaravelAPI发出HTTP请求。Axios是一个基于promise的HTTP客户端，它链接then()回调以记录返回并最终将其分配给用户数据属性。这是在应用程序中加载/users（客户端页面，而不是API）时控制台数据的样子：我希望您注意的另一件事是解构，如下所示：Name:{{name}},Email:{{email}}解构是为对象提取props的有效方式，并且简洁/易懂。完成路由组件我们现在有一个/users组件和路由，让我们创建一个指向App组件的导航链接，指向用户来设置用户数据：在resources/assets/js/views/App.vue中，添加一个路由指向用户链接：接下来，让我们更新UsersIndex.vue文件以设置用户数据：fetchData(){this.error=this.users=无效的;this.loading=true;axios.get('/api/users').then(response=>{this.loading=false;this.users=response.data;});}现在，如果你刷新页面，你应该看到这样的东西：错误处理组件通常需要按预期工作，但我们还没有处理API错误。我们在API中模拟服务器端错误：Route::get('/users',function(){if(rand(1,10)<3){abort(500,'Wecouldnotretrievetheusers');}returnfactory('App\User',10)->make();});当其值小于3时，使用rand()终止请求。如果你刷新页面几次，你可能会看到“Loading...”，如果你查看开发者工具，你会发现一个来自Axios请求的未捕获错误：我们可以使用AxiosprpmiseCallcatch来处理这个失败的请求()链上：fetchData(){this.error=this.users=null;this.loading=true;axios.get('/api/users').then(response=>{this.loading=false;this.users=response.data;}).catch(error=>{this.loading=false;this.error=error.response.data.message||error.message;});}设置加载属性值如果为false，则使用响应的错误异常来设置消息。此错误消息返回到exception.message属性。为了良好的用户体验，在这种情况下，我们在UsersIndex.vue模板中设置了一个“重试”按钮，该按钮将简单地调用fetchData方法来刷新用户属性：

{{error}}

再试一次