通过Laravel创建Vue单页应用（六）

$red:变亮(red,30%);$darkRed:变暗($red,50%);.form-组{底边距：1em；标签{显示：块；}}.alert{背景：$red;颜色：$深红色；填充：1rem；底部边距：1rem；宽度：50%；边框：1px实心$darkRed；边界半径:5px;}文章转发自专业的Laravel开发者社区，原文链接：https://learnku.com/laravel/t...我们将完成最后一部分基本CURD：创建一个新用户。您已经拥有我们之前讨论过的主题中所需的所有工具，因此请尝试创建用户并将本文与您的工作进行比较。如果您需要赶上，我们在第5部分停止了删除用户的功能，以及如何在成功删除后重定向用户。我们还研究了如何将HTTP客户端提取到专用模块中以在整个应用程序中重用。提醒一下，本教程不关注权限；我们使用内置的Laravel用户表来演示如何在Vue路由器项目的上下文中使用CURD。以下是该系列到目前为止的概要：第1部分-设置项目和Vue路由器第2部分-在Vue路由器中加载异步数据第3部分-在Laravel中创建真实客户端第4部分-编辑用户第5部分-删除用户添加创建用户组件首先，我们将创建和配置前端组件以创建新用户。UsersCreate.vue组件与我们在中创建的UsersEdit.vue组件类似第4部分：$red:变亮(red,30%);$darkRed:变暗($red,50%);.form-组{底边距：1em；标签{显示：块；}}.alert{背景：$red;颜色：$深红色；填充：1rem；底部边距：1rem；宽度：50%；边框：1px实心$darkRed；边界半径:5px;}我们添加了表单和输入，并删除了一个onSubmit方法除了添加了密码输入之外，该组件的其余部分与UsersEdit组件相同。创建新用户需要密码。我们在编辑用户时跳过了密码字段，因为通常情况下，您有一个不同于编辑用户的特定密码更改流程。请注意，我们可能会花一些时间将创建和编辑视图中的表单提取到专用组件中，但我们会保留一段时间（或随意独立处理）。唯一的区别是用现有的用户数据（包括用户ID）填充表单，而不是使用空表单创建用户。配置路由接下来，我们需要配置Vue路由和页面链接，这样我们就可以导航到用户创建页面。打开resources/assets/js/app.js文件并添加以下路由（或导入）：importUsersCreatefrom'./views/UsersCreate';//...constrouter=newVueRouter({mode:'history'，路线：[//...{路径：'/users/create'，名称：'users.create'，组件：UsersCreate，}，{路径：'/404'，名称：'404'，组件：NotFound},{路径:'*',重定向:'/404'},],});接下来，我们在assets/js/views/usersindex.vue组件中添加一个新组件的链接：你现在应该可以用yarnwatch重新编译并看到以下内容:提交表单现在，我们还没有定义后端路由，所以当提交时，API返回405MethodNotAllowed。我们来改进UsersCreate组件中的onSubmit()方法，不定义路由，这样我们可以快速的看到提交表单时产生的错误：.create(this.user).then((data)=>{console.log(data);}).catch((e)=>{this.message=e.response.data.message||'有创建用户的问题。';}).then(()=>this.saving=false)}}目前我们的表单只是将返回值打印到控制台，获取错误，然后切换saving=false以隐藏“保存”状态。我们尝试从返回值中获取message属性或者给出一个默认的错误信息。接下来，我们在API模块resources/assets/js/api/users.js中添加create()方法：exportdefault{//...create(data){returnclient.post('users',data);},//...};表单将通过发送POST请求发送到UsersController。这时，如果你提交表单，你会在控制台看到一个错误状态为405的错误信息。添加API接口我们将在Laravel中添加API接口来创建新用户。这类似于编辑现有用户。但是，此响应将返回201Created状态代码。我们将首先通过API定义存储新用户的路由：//routes/api.phpRoute::namespace('Api')->group(function(){//...Route::post('/users','UsersController@store');});接下来，打开app/http/controllers/userscontroller.php文件并添加store()方法：publicfunctionstore(Request$request){$data=$request->validate(['name'=>'required','email'=>'required|unique:users','password'=>'required|min:8',]);返回新的UserResource(User::create(['name'=>$data['name'],'email'=>$data['email'],'password'=>bcrypt($data['password']),]));}当用户有效时，提交表单时，新用户的响应如下所示：{"data":{"id":51,"name":"PaulRedmond","email":"paul@example.com"}}如果您为提交无效数据，您将收到类似这样的消息：提交成功我们已经处理了服务器错误或验证错误的情况；让我们通过创建一个成功的用户来结束。我们将清除表单并重定向到用户的编辑页面：onSubmit($event){this.saving=truethis.message=falseapi.create(this.user).then((response)=>{this.$router.push({name:'users.edit',params:{id:response.data.data.id}});}).catch((e)=>{this.message=e.response.data.message||'创建用户时出现问题。';}).then(()=>this.saving=false)}这是最后一个UsersCreate.vue组件：$red:lighten(red,30%);$darkRed:darken($red,50%);.form-group{保证金-底部：1em；标签{显示：块；}}.alert{背景：$red;颜色：$深红色；填充：1rem；底部边距：1rem；宽度：50%；:5px;}End我们现在有一个简单的表单和简单的数据验证来创建用户本教程带您了解了Vue中的基本CRUD。作为家庭作业，您可以定义一个单独的用户表单组件来处理创建和编辑用户（如果您认为值得重用）。现在来回复制代码就足够了，但是，最佳实践仍然是创建可重用的组件。在这里指出，我们实际上可以做更多的事情，包括使用类似Bootstrap的CSS框架等等。但是为了让没有用过VueRouter，也没有做过单页面应用的小伙伴更容易上手，我还是决定把重点放在核心部分。对于某些人来说，本教程可能微不足道，但对于新手来说，它突出了单页应用程序与传统服务器端应用程序之间的主要区别。