Take you step by step to develop a simple CRUD application using Vue + Laravel

This article will share with you a Vue Laravel development tutorial and introduce how to useVue.jsand Laravel to build a simple CRUD application. I hope it will be helpful to everyone!

CURD (add, delete, modify, query) is a basic operation of data storage, and it is also one of the first things you need to learn as a Laravel developer

However, if What issues should we pay attention to when combining applications with Vue.js as the front end? First, since the current operation does not refresh the page, you need an asynchronous CURD. Therefore, you need to ensure data consistency on both the front and back ends. (Learning video sharing:vuejs tutorial)

In this tutorial, I will demonstrate how to develop a complete Laravel&Vue.js application and each CURD example. AJAX is the key to connecting the front and back ends, so I will use Axios as the HTTP client. I'll also show you some ways to deal with the user experience pitfalls of this architecture.

You can view the complete project in GitHub.

https://github.com/anthonygore/vue-laravel-crud

Demo app

This is a demo app for users Create a full-stack application of "Cruds". When I enter this application, it will create a lot of incredible things. Aliens have unique names and can be freely converted in red, green and black.

The Cruds application is displayed on the homepage. You can add Cruds through the add button, delete them through the delete button, or update their color.

CRUD with Laravel backend

We will start this tutorial using Laravel backend to complete CRUD operations. I'll keep this section short because CRUD with Laravel is a topic covered extensively elsewhere.

In summary, we complete the following

• Setting up the database
• Through resources Controller to write a RESTful API route
• Define methods in the controller to complete CRUD operations

Database

The first is Migration, our Cruds have two properties: name and color, which we set to text type

2018_02_02_081739_create_cruds_table.php

increments('id'); $table->text('name'); $table->text('color'); $table->timestamps(); }); } ... } ...

API

Now let's set up the RESTful API route. Thisresourcemethod will automatically create all the operations we need. However, we don't neededit,showandstoreare the routes, so we need to exclude them.

routes/api.php

 ['edit', 'show', 'store'] ]);

With these, We can now use the following routes in the API:

控制器

我们现在需要在控制器中实现这些操作：

app/Http/Controllers/CrudsController.php

      
我们先简要概述下每种方法：
      
create 方法。我们使用 Laravel 附带的Faker包，为 Crud 随机生成名称和颜色字段 。随后，我们将新生成的数据作为 JSON 返回。
      
name = $faker->lexify('????????'); $crud->color = $faker->boolean ? 'red' : 'green'; $crud->save(); return response($crud->jsonSerialize(), Response::HTTP_CREATED); }
      
index方法。我们使用index方法返回 Cruds 的全部数据。在一个更严肃的应用中，我们会使用分页，但是现在我们尽量保持简洁。
      
jsonSerialize(), Response::HTTP_OK); }
      
update。此方法允许客户端更改 Crud 的颜色。
      
color = $request->color; $crud->save(); return response(null, Response::HTTP_OK); }
      
destroy。 删除 Cruds 的方法。
      

      
Vue.js 应用
      
现在开始处理 Vue 页面展示部分。先来创建一个组件 ---CrudComponent.vue，用来展示 Cruds 的内容。
      

      
这个组件主要是展示的功能，没有太多的业务逻辑。主要有以下几个重点：
      

       
展示一张图片，图片的颜色取决于 Crud 的颜色（ 也就是展示red.png还是green.png)
       
有一个删除按钮，当点击时会触发del方法，继而触发一个delete事件，并携带当前 Crud 的 ID 作为参数
       
有一个 HTML 选择器 ( 用来选择颜色 )，当发生选择时，会触发update方法，继而触发一个update事件，并携带当前 Crud 的 ID 和新选择的颜色作为参数
      
      
resources/assets/js/components/CrudComponent.vue
      
  
      
在这个项目中还有一个组件App.vue。它在整个项目中的地位非常重要，所有主要的逻辑都写在这里。下面就来逐步分析这个文件。
      
先从 template 标签开始, 它主要处理了下面这些业务：
      

       
为我们上面提到的crud-component组件占位
       
遍历包含 Crud 对象的数组（也就是cruds数组 )，数组中的每个元素都对应着一个crud-component组件。我们以 props 的形式把每个 Crud 的属性传递给这个组件，并且监听来自这个组件的update和delete事件
       
设置一个Add按钮，当点击时，会触发create方法，从而创建新的 Cruds
      
      
resources/assets/js/components/App.vue
      

      
下面来看App.js文件的script部分:
      

       
首先通过Crud函数创建用于展示 Cruds 的对象, 包括 ID, 颜色和姓名
       
然后， 引入CrudComponent组件
       
组件的cruds数组作为data的属性。 关于对 CRUD 的增删改查的具体操作， 会在下一步展开说明。
      
      
resources/assets/js/components/App.vue
      
 
      
前端通过 AJAX 触发 CURD
      
在一个完整的项目中，所有的 CRUD 操作都是在后端完成的，因为数据库是跟后端交互的。然而，触发 CRUD 的操作几乎都是在前端完成的。
      
因此，一个 HTTP 客户端（也就是负责在前后端之间交互数据的桥梁）的作用是非常重要的。被 Laravel 前端默认封装的Axios， 就是一个非常好用的 HTTP 客户端。
      
再来看下资源表，每个 AJAX 请求都需要有一个明确的 API 接口：
      
         ##HTTP Method
         Address
         Method
         Route Name
         
         GET
         /api/cruds
         index
         cruds.index
         
         GET
         /api/cruds/create
         create
         cruds.create
         
         PUT
         /api/cruds/{id}
         update
         cruds.update
         
         DELETE
         /api/ cruds/{id}
         destroy
         cruds.destroy
         
      

       

        

         
Verb
         
Path
         
Action
         
Route Name
        
       
       

        

         
GET
         
/api/cruds
         
index
         
cruds.index
        
        

         
GET
         
/api/cruds/create
         
create
         
cruds.create
        
        

         
PUT
         
/api/cruds/{id}
         
update
         
cruds.update
        
        

         
DELETE
         
/api/cruds/{id}
         
destroy
         
cruds.destroy
        
       
      
      
Read
      
首先来看read方法。这个方法是负责在前端发起 Cruds 请求的，对应后端的处理在是控制器里的index方法，因此使用 GET 请求/api/cruds。
      
由于 Laravel 前端默认把 Axios 设置为window的一个属性， 因此我们可以使用window.axios.get来发起一个 GET 请求。
      
对于像get,post等 Axios 方法的返回结果，我们可以再继续链式调用then方法，在then方法里可以获取到 AJAX 响应数据的主体data属性。
      
resources/assets/js/components/App.vue
      
... methods() { read() { window.axios.get('/api/cruds').then(({ data }) => { // console.log(data) }); }, ... } /* Sample response: [ { "id": 0, "name": "ijjpfodc", "color": "green", "created_at": "2018-02-02 09:15:24", "updated_at": "2018-02-02 09:24:12" }, { "id": 1, "name": "wjwxecrf", "color": "red", "created_at": "2018-02-03 09:26:31", "updated_at": "2018-02-03 09:26:31" } ] */
      
从上面的返回结果可以看出，返回的结果是 JSON 数组。Axios 会自动将其解析并转成 JavaScript 对象返给我们。这样方便我们在回调函数里对结果进行遍历，并通过Crud工厂方法创建新的 Cruds，并存到 data 属性的cruds数组中，例如this.cruds.push(...)。
      
resources/assets/js/components/App.vue
      
... methods() { read() { window.axios.get('/api/cruds').then(({ data }) => { data.forEach(crud => { this.cruds.push(new Crud(crud)); }); }); }, }, ... created() { this.read(); }
      

       
注意：我们通过created方法，可以使程序在刚一加载时就触发read方法，但这并非最佳实践。最好方案应该是直接去掉read方法，当程序第一次加载的时候，就把应用的初始状态都包含在文档投中。
      
      
通过上面的步骤，我们就能看到 Cruds 展示在界面上了：
      

      
更新 (以及状态同步)
      
执行update方法需要发送表单数据，比如color，这样控制器才知道要更新哪些数据。Crud 的 ID 是从服务端获取的。
      
还记得我在本文开篇就提到关于前后端数据一致的问题，这里就是一个很好的例子。
      
当需要执行update方法时，我们可以不用等待服务器返回结果，就在前端更新 Crud 对象，因为我们很清楚更新后应该是什么状态。
      
但是，我们不应该这么做。为什么？因为有很多原因可能会导致更新数据的请求失败，比如网络突然中断，或者更新的值被数据库拒绝等。
      
所以等待服务器返回更新成功的信息后，再刷新前端的状态是非常重要的，这样我们才能确保前后端数据的一致。
      
resources/assets/js/components/App.vue
      
methods: { read() { ... }, update(id, color) { window.axios.put(`/api/cruds/${id}`, { color }).then(() => { // 一旦请求成功，就更新 Crud 的颜色 this.cruds.find(crud => crud.id === id).color = color; }); }, ... }
      

       
你可能会说这样非必要的等待会影响用户体验，但是我想说，我们在不确定的情况下更新状态，误导用户，这应该会造成更差的用户体验。
      
      
创建和删除
      
现在你已经明白整个架构的关键点了，剩下两个方法，不需要我解释，你也应该能够理解其中的逻辑了：
      
resources/assets/js/components/App.vue
      
methods: { read() { ... }, update(id, color) { ... }, create() { window.axios.get('/api/cruds/create').then(({ data }) => { this.cruds.push(new Crud(data)); }); }, del(id) { window.axios.delete(`/api/cruds/${id}`).then(() => { let index = this.cruds.findIndex(crud => crud.id === id); this.cruds.splice(index, 1); }); } }
      
加载界面 和 禁止互动
      

      
你应该知道，我们这个项目VUE前端的CRUD操作都是异步方式的，所以前端AJAX请求服务器并等待服务器响应返回响应，总会有一点延迟。因为用户不知道网站在做什么，此空档期用户的体验不是很好，这学问关联到UX。
      
为了改善这UX问题，因此最好添加上一些加载界面并在等待当前操作解决时禁用任何交互。这可以让用户知道网站在做了什么，而且可以确保数据的状态。
      
Vuejs有很多很好的插件能完成这个功能，但是在此为了让学者更好的理解，做一些简单的快速的逻辑来完成这个功能，我将创建一个半透明的p，在AJAX操作过程中覆盖整个屏幕，这个逻辑能完成两个功能：加载界面和禁止互动。一石两鸟，完美~
      
resources/views/index.blade.php
      
 
 
      
当进行 AJAX 请求的时候，就把mute的值从 false 改为 true, 通过这个值的变化，控制半透明p的显示或隐藏。
      
resources/assets/js/components/App.vue
      
export default { data() { return { cruds: [], mute: false } }, ... }
      
下面就是在update方法中切换mute值的过程。当执行update方法时，mute值被设为 true。当请求成功，再把mute值设为 false, 这样用户就可以继续操作应用了。
      
resources/assets/js/components/App.vue
      
update(id, color) { this.mute = true; window.axios.put(`/api/cruds/${id}`, { color }).then(() => { this.cruds.find(crud => crud.id === id).color = color; this.mute = false; }); },
      

       
在 CRUDE 的每个方法里都要有这样的操作，在此，为了节约篇幅，我就不一一写明了。
      
      
为了保证大家不会忘记这个重要的操作，我们直接在
元素上方增加了
元素。

      
从下面的代码可以看到，当
元素被加上 classon后，它将以灰色调完全覆盖整个应用，并阻止所有的点击事件：

      
resources/views/index.blade.php
      
nbsp;html> getLocale() }}">
       
       
       
       
 
 
      
最后一个问题是对于onclass 的管理，我们可以在mute的值上加一个watch，每当mute的值发生改变的时候，就加上或删除onclass：
      
export default { ... watch: { mute(val) { document.getElementById('mute').className = val ? "on" : ""; } } }
      
完成上面所有的步骤，你就可以拥有一个带有加载指示器的全栈Vue / Laravel CRUD 的应用程序了。再来看下完整效果吧：
      

      
你可以从 GitHub 获取代码，如果有任何问题或者想法，欢迎给我留言！
      

       
英文原文地址：https://vuejsdevelopers.com/2018/02/05/vue-laravel-crud/
       
译文地址：https://learnku.com/vuejs/t/24724
      
      
（学习视频分享：web前端开发、编程入门）
      
The above is the detailed content of Take you step by step to develop a simple CRUD application using Vue + Laravel. For more information, please follow other related articles on the PHP Chinese website!