更新時間：2025-05-09 21:30:47
分享
9259在這一篇示例教程中，我們將會構建一個類似 Twitter 的 Web 應用。我們將使用到 Laravel 5.6 和 Vue.js，并且在 Vue.js 中定義一些組件，此外，還會使用 Axios 來發送網絡請求。當然，篇幅有限，我們不可能開發一個完整的 Twitter 應用，而是實現一個簡化版：用戶可以發送 Tweet 并在自己的時間線中看到，可以關注或取消關注其他用戶，如果關注了其他用戶，那么也可以看到關注用戶發布的 Tweet。麻雀雖小，五臟俱全，希望大家可以通過這個簡單的應用學會 Laravel 和 Vue.js 的基礎用法。
注：這是一篇翻譯文章，你可以將 Twitter 對標國內新浪微博，一條 Tweet 就是一條微博信息。
安裝配置 Laravel
首先，我們需要安裝一個新的 Laravel 應用（也可以通過 Composer 安裝，看個人喜好）：
laravel?new?laratwitter
進入該項目根目錄，安裝前端依賴：
npm?install
接下來，修改?.env?中數據庫相關配置符合本地環境，然后通過如下命令生成用戶認證腳手架代碼：
php?artisan?make:auth
運行如下命令生成相關數據表：
php?artisan?migrate
接下來配置下 Web 服務器（使用 Valet 的話略過），我這里配置的域名是?laratwitter.test，配置完成后重啟下 Web 服務器，然后通過?http://laratwitter.test/register?注冊一個新用戶：
接下來編輯?resoureces >> views >> home.blade.php?文件：
@extends('layouts.app')
@section('content')
<div?class="container">
????<div?class="row?justify-content-center">
????????<div?class="col-md-4">
????????????Tweet?表單
????????</div>
????????<div?class="col-md-8">
???????????時間線
????????</div>
????</div>
</div>
@endsection
新注冊用戶登錄后就能在新的 Home 頁看到變更后的效果了。
創建一個 Tweet 表單
我們使用 Vue.js 來完成表單創建，首先到?resources >> assets >> js >> components?目錄下新增一個?FormComponent.vue?文件：
//?FormComponent.vue
<template>
????<div?class="col-md-4">
????????<form>
????????????<div?class="form-group">
????????????????<textarea?
????????????????????class="form-control"?
????????????????????rows="8"?cols="8"?
????????????????????maxlength="130"?
????????????????????required>
????????????????</textarea>
????????????</div>
????????????<div?class="form-group">
????????????????<button?class="btn?btn-primary">
????????????????????發送
????????????????</button>
????????????</div>
????????</form>????????
????</div>
</template>
<script>
export?default?{
}
</script>
然后在?resources >> assets >> js >> app.js?中導入這個組件：
//?app.js
require('./bootstrap');
window.Vue?=?require('vue');
Vue.component('form-component',?require('./components/FormComponent.vue'));
const?app?=?new?Vue({
????el:?'#app'
});
最后在?home.blade.php?中使用這個組件：
@extends('layouts.app')
@section('content')
<div?class="container">
????<div?class="row?justify-content-center">
???????<form-component></form-component>
????????<div?class="col-md-8">
????????????TimeLines
????????</div>
????</div>
</div>
@endsection
為了監聽前端資源變動，可以在項目根目錄下運行如下命令監聽前端資源變動并實時編譯：
npm?run?watch
這樣，刷新?http://laratwitter.test/home?頁面就可以看到變更后的效果了：
創建 Post 模型類及對應數據庫遷移文件
下面我們來實現表單提交保存操作，首先創建一個模型類及對應數據庫遷移文件：
php?artisan?make:model?Post?-m
編寫剛生成的數據庫遷移文件?create_posts_table.php：
//?create_posts_table
public?function?up()
{
???Schema::create('posts',?function?(Blueprint?$table)?{
???????$table->increments('id');
???????$table->integer('user_id')->unsigned();
???????$table->string('body',?140);
???????$table->timestamps();
???????$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
????});
}
運行數據庫遷移命令：
php?artisan?migrate
現在可以在數據庫中看到剛創建的?posts?數據表了。
接下來創建控制器?PostController：
php?artisan?make:controller?PostController
定義關聯關系
在?User?模型類中，我們需要定義一個關聯方法建立?Post?模型和?User?模型之間的關聯關系（一對多）：
public?function?posts()
{
???return?$this->hasMany(Post::class);
}
相應地，在?Post?模型類中，也要定義與?User?模型的關聯關系：
public?function?user()
{
???return?$this->belongsTo(User::class);
}
在數據庫中保存 Tweet
前面提到我們將通過?axios?庫來發送 POST 請求到 Laravel 后端服務器，這個庫在我們運行?npm install?命令的時候已經安裝好了，在開始處理請求發送與處理之前，我們先來定義請求路由，在?routes >> web.php?文件中新增一個路由定義如下：
Route::post('tweet/save',?'PostController@store');
此外，還需要定義?Post?模型類的?$fillable?屬性來避免批量賦值異常：
protected?$fillable?=?['user_id',?'body'];
最后要做的準備工作就是到?PostController.php?中定義?store?方法：
public?function?store(Request?$request,?Post?$post)
{
????$newPost?=?$request->user()->posts()->create([
????????'body'?=>?$request->get('body')
????]);
????return?response()->json($post->with('user')->find($newPost->id));
}
我們使用了關聯關系來保存 Post 數據，它會自動將當前登錄用戶的?id?作為保存 Post 的?user_id?字段。
后端邏輯實現之后，接下來需要使用?axios?庫類發送 POST 請求，我們將相應邏輯寫到?FormComponent.vue?組件中：
//?FormComponent.vue
<template>
????<div?class="col-md-4">
????????<form?@submit.prevent="saveTweet">
????????????<div?class="form-group">
????????????????<textarea?
????????????????????class="form-control"?
????????????????????rows="8"?cols="8"?
????????????????????maxlength="130"
????????????????????v-model="body"
????????????????????required>
????????????????</textarea>
????????????</div>
????????????<div?class="form-group">
????????????????<button?class="btn?btn-primary">
????????????????????Tweet
????????????????</button>
????????????</div>
????????</form>????????
????</div>
</template>
<script>
export?default?{
????data()?{
????????return?{
????????????body:?''
????????}
????},
????methods:?{
????????saveTweet()?{
????????????axios.post('/tweet/save',?{body:?this.body}).then(res?=>?{
????????????????console.log(res.data);
????????????}).catch(e?=>?{
????????????????console.log(e);
????????????});
????????}
????}
}
</script>
CSRF_TOKEN?會默認包含到每個 POST 請求，所以不必手動添加。現在，如果一切正常工作的話，你就可以成功保存 Post 數據并在響應中獲取到 Post 對象及其關聯用戶：
創建一個 Vue 事件
要想在前端顯示所有 Tweet，首先需要將它們顯示到時間線中，為此，我們需要創建一個事件。注意，這里不是要通過刷新頁面來獲取所有 Tweet，而是當我們添加一條新的 Tweet 時，在不刷新頁面的情況下在用戶時間線中顯示這條 Tweet。
為了實現這個功能，需要創建一個事件并觸發這個事件，我們通過時間線組件來監聽事件觸發并基于該事件更新 UI。可以通過?Vuex?來實現該功能，但是現在，我們不想要深入存儲和動作，只想將事情保持簡單。
在?resources >> assets >> js?目錄下創建一個名為?event.js?的文件，并編寫代碼如下：
//?event.js import?Vue?from?'vue'; export?default?new?Vue();
然后將該文件導入?FormComponent.vue：
//?FormComponent.vue
<template>
????<div?class="col-md-4">
????????<form?@submit.prevent="saveTweet">
????????????<div?class="form-group">
????????????????<textarea?
????????????????????class="form-control"?
????????????????????rows="8"?cols="8"?
????????????????????maxlength="130"
????????????????????v-model="body"
????????????????????required>
????????????????</textarea>
????????????</div>
????????????<div?class="form-group">
????????????????<button?class="btn?btn-primary">
????????????????????Tweet
????????????????</button>
????????????</div>
????????</form>????????
????</div>
</template>
<script>
import?Event?from?'../event.js';
export?default?{
????data()?{
????????return?{
????????????body:?'',
????????????postData:?{}
????????}
????},
????methods:?{
????????saveTweet()?{
????????????axios.post('/tweet/save',?{body:?this.body}).then(res?=>?{
????????????????this.postData?=?res.data;
????????????????Event.$emit('added_tweet',?this.postData);
????????????}).catch(e?=>?{
????????????????console.log(e);
????????????});
????????????this.body?=?'';
????????}
????}
}
</script>
這樣，當新提交數據被保存后，就可以觸發包含保存的 Tweet 和用戶信息的事件，監聽該事件的監聽器就可以捕獲數據并更新 UI。
創建時間線組件
接下來，我們來定義監聽 Tweet 發送成功事件的監聽器。
在?resources >> assets >> js >> components?目錄下新增一個?TimelineComponent.vue?組件，編寫該組件代碼如下：
//?TimelineComponent.vue
<template>
????<div?class="col-md-8?posts">
????????<p?v-if="!posts.length">No?posts</p>
????????<div?class="media"?v-for="post?in?posts"?:key="post.id">
????????????<img?class="mr-3"?/>
????????????<div?class="media-body">
????????????????<div?class="mt-3">
????????????????????<a?href="#">{{?post.user.name?}}</a>
????????????????</div>
????????????????<p>{{?post.body?}}</p>
????????????</div>
????????</div>
????</div>
</template>
<script>
import?Event?from?'../event.js';
export?default?{
????data()?{
????????return?{
????????????posts:?[],
????????????post:?{}
????????}
????},
????mounted()?{
????????Event.$on('added_tweet',?(post)?=>?{
????????????this.posts.unshift(post);
????????});
????}
}
</script>
這里我們定義了一個監聽?added_tweet?事件的監聽器，當該事件被觸發后，就可以執行相應的方法將數據渲染到時間線組件中。
和?FormComponent.vue?組件一樣，在?app.js?中注冊這個組件：
Vue.component('timeline-component',?require('./components/TimelineComponent.vue'));
我們專注高端建站，小程序開發、軟件系統定制開發、BUG修復、物聯網開發、各類API接口對接開發等。十余年開發經驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！
