本篇文章给大家分享一个Vue+Laravel开发教程，介绍一下怎么使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用，希望对大家有所帮助！
|
本篇文章给大家分享一个Vue+Laravel开发教程，介绍一下怎么使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用，希望对大家有所帮助！
CURD （增删改查）是数据存储的基本操作，也是你作为 Laravel 开发人员首先要学习的内容之一 但是，如果要结合以 Vue.js 作为前端的应用程序该注意哪些问题呢？首先，因为现在的操作不刷新页面，所以你需要异步 CURD 。因此，你需要确保数据在前后端的一致性。（学习视频分享：vuejs教程） 在本教程中，我会演示如何开发完整的 Laravel&Vue.js 应用程序和每个 CURD 的例子。 AJAX 是连接前后端的关键，所以，我会使用 Axios 作为 HTTP 客户端。我还将向您展示一些处理这种体系结构的用户体验方面缺陷的方法。
演示 app这是一个让使用者创建一个 “Cruds“ 的全栈应用，当我进入这个应用时，它会创造很多不可思议的东西。外星人独特的名称和可以在红色，绿色和黑色的自由转换。 Cruds 应用展示在主页，你可以通过 add 按钮添加 Cruds ， delete 按钮删除它们，或者更新它们的颜色。
Laravel 后端的 CRUD我们将使用 Laravel 后端开始本教程，来完成 CRUD 操作。我将保持这一部分简短，因为 Laravel 的 CRUD 是其他地方广泛涉及的主题. 总之，我们完成以下操作
Database首先是迁移，我们的 Cruds 有两个属性：名称和颜色，我们将其设置为 text 类型 2018_02_02_081739_create_cruds_table.php <?php
...
class CreateCrudsTable extends Migration
{
public function up()
{
Schema::create('cruds', function (Blueprint $table) {
$table->increments('id');
$table->text('name');
$table->text('color');
$table->timestamps();
});
}
...
}
...API现在我们来设置 RESTful API 路由. 这个 routes/api.php <?php
Route::resource('/cruds', 'CrudsController', [
'except' => ['edit', 'show', 'store']
]);有了这些, 我们现在可以在API中使用以下路由:
控制器我们现在需要在控制器中实现这些操作： app/Http/Controllers/CrudsController.php <?php
namespace App\Http\Controllers;
use App\Crud;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Faker\Generator;
class CrudsController extends Controller
{
// Methods
}我们先简要概述下每种方法： create 方法。我们使用 Laravel 附带的 <?php
...
public function create(Generator $faker)
{
$crud = new Crud();
$crud->name = $faker->lexify('????????');
$crud->color = $faker->boolean ? 'red' : 'green';
$crud->save();
return response($crud->jsonSerialize(), Response::HTTP_CREATED);
}index方法。我们使用 <?php
...
public function index()
{
return response(Crud::all()->jsonSerialize(), Response::HTTP_OK);
}update。此方法允许客户端更改 Crud 的颜色。 <?php
...
public function update(Request $request, $id)
{
$crud = Crud::findOrFail($id);
$crud->color = $request->color;
$crud->save();
return response(null, Response::HTTP_OK);
}destroy。 删除 Cruds 的方法。 <?php
...
public function destroy($id)
{
Crud::destroy($id);
return response(null, Response::HTTP_OK);
}Vue.js 应用现在开始处理 Vue 页面展示部分。先来创建一个组件 ---
这个组件主要是展示的功能，没有太多的业务逻辑。主要有以下几个重点：
resources/assets/js/components/CrudComponent.vue <template>
<p class="crud">
<p class="col-1">
<img :src="image"/>
</p>
<p class="col-2">
<h3>Name: {{ name | properCase }}</h3>
<select @change="update">
<option
v-for="col in [ 'red', 'green' ]"
:value="col"
:key="col"
:selected="col === color ? 'selected' : ''"
>{{ col | properCase }}</option>
</select>
<button @click="del">Delete</button>
</p>
</p>
</template>
<script>
export default {
computed: {
image() {
return `/images/${this.color}.png`;
}
},
methods: {
update(val) {
this.$emit('update', this.id, val.target.selectedOptions[0].value);
},
del() {
this.$emit('delete', this.id);
}
},
props: ['id', 'color', 'name'],
filters: {
properCase(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
}
</script>
<style>...</style>在这个项目中还有一个组件 App.vue。它在整个项目中的地位非常重要，所有主要的逻辑都写在这里。下面就来逐步分析这个文件。 先从 template 标签开始, 它主要处理了下面这些业务：
resources/assets/js/components/App.vue <template>
<p id="app">
<p class="heading">
<h1>Cruds</h1>
</p>
<crud-component
v-for="crud in cruds"
v-bind="crud"
:key="crud.id"
@update="update"
@delete="del"
></crud-component>
<p>
<button @click="create()">Add</button>
</p>
</p>
</template>下面来看
resources/assets/js/components/App.vue <template>...</template>
<script>
function Crud({ id, color, name}) {
this.id = id;
this.color = color;
this.name = name;
}
import CrudComponent from './CrudComponent.vue';
export default {
data() {
return {
cruds: []
}
},
methods: {
create() {
// 待完善
},
read() {
// 待完善
},
update(id, color) {
// 待完善
},
del(id) {
// 待完善
}
},
components: {
CrudComponent
}
}
</script>前端通过 AJAX 触发 CURD在一个完整的项目中，所有的 CRUD 操作都是在后端完成的，因为数据库是跟后端交互的。然而，触发 CRUD 的操作几乎都是在前端完成的。 因此，一个 HTTP 客户端（也就是负责在前后端之间交互数据的桥梁）的作用是非常重要的。被 Laravel 前端默认封装的 Axios， 就是一个非常好用的 HTTP 客户端。 再来看下资源表，每个 AJAX 请求都需要有一个明确的 API 接口：
Read首先来看 由于 Laravel 前端默认把 Axios 设置为 对于像 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 对象返给我们。这样方便我们在回调函数里对结果进行遍历，并通过 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();
}
通过上面的步骤，我们就能看到 Cruds 展示在界面上了：
更新 (以及状态同步)执行 还记得我在本文开篇就提到关于前后端数据一致的问题，这里就是一个很好的例子。 当需要执行 但是，我们不应该这么做。为什么？因为有很多原因可能会导致更新数据的请求失败，比如网络突然中断，或者更新的值被数据库拒绝等。 所以等待服务器返回更新成功的信息后，再刷新前端的状态是非常重要的，这样我们才能确保前后端数据的一致。 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 <body> <p id="mute"></p> <p id="app"></p> <script src="js/app.js"></script> </body> 当进行 AJAX 请求的时候，就把 resources/assets/js/components/App.vue export default {
data() {
return {
cruds: [],
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;
});
},
为了保证大家不会忘记这个重要的操作，我们直接在 从下面的代码可以看到，当 resources/views/index.blade.php <!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Cruds</title>
<style>
html, body {
margin: 0;
padding: 0;,
height: 100%;
width: 100%;
background-color: #d1d1d1
}
#mute {
position: absolute;
}
#mute.on {
opacity: 0.7;
z-index: 1000;
background: white;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<p id="mute"></p>
<p id="app"></p>
<script src="js/app.js"></script>
</body>
</html>最后一个问题是对于 export default {
...
watch: {
mute(val) {
document.getElementById('mute').className = val ? "on" : "";
}
}
}完成上面所有的步骤，你就可以拥有一个带有加载指示器的全栈Vue / Laravel CRUD 的应用程序了。再来看下完整效果吧：
你可以从 GitHub 获取代码，如果有任何问题或者想法，欢迎给我留言！
（学习视频分享：web前端开发、编程入门） 以上就是手把手带你使用Vue + Laravel开发一个简单的 CRUD 应用的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！ |
