Vuebnb：一個用vue.js和Laravel建構的全棧應用

今年我一直在寫一本新書叫全棧Vue網站開發：Vue.js，Vuex和Laravel。它會在Packt出版社在2018年初出版。

這本書是圍繞着一個案例研究項目，Vuebnb，簡單克隆Airbnb。在這篇文章中，我會把它如何工作做一個高層次的概述，好讓你了解如何從零開始參與建設一個Vue/Laravel建構的全棧應用。

這是一個現場示範如果你想看看的話：https://vuebnb.vuejsdevelopers.com

概述

作為一個完整的全棧應用程式，Vuebnb由不同的部分組成：

前端應用，使用Vue.js建構。我也使用Vue-Router管理頁面建立，用Vuex管理全局狀态。代碼最初是寫在一個浏覽器的腳本檔案，但随着複雜性的增加使用WebPack生成，并設定允許單個檔案元件和ES+功能。

背景應用程式，内置Laravel。它的主要工作是為前端應用程式服務，并為清單資料提供Web服務。在Vue-Router服務下，Web服務允許Vuebnb像一個單一的網頁應用程式。我還用Laravel安全認證的API調用，這是讓使用者能夠儲存他們喜歡的房間清單。

特征

該項目的功能主要包括UI元件以及應用程式的總體架構設計。讓我們做一個簡短的概述：

模态視窗

在清單頁面的模态視窗，目的是讓使用者看房屋的照片獲得更好的感覺。

模式視窗很難實作，因為它們不在頁面元素的層次結構中，是以也很難與它們進行通信。我實作這個用Vue.js，像元件引用和生命周期鈎子一樣管理類。

圖像滑塊

首頁上的圖像滑塊使檢視所有可用的清單變得非常友善。一個CSS的轉換 transform: translate(..)用于将圖像移動到另一側，而轉換則提供滑動效果。我用vue.js綁定的translate以便用左，右箭頭控制值。

處理好這個頁面需要很好地了解元件，props和事件，是以，本書的6章的主要任務，就是vue.js元件的構成。

收藏清單

使用者可能想給他們喜歡的房源做一個标注，是以我添加了一個“收藏”功能。可以收藏從首頁或清單頁點選心形圖示，這是可重用的元件的一個部分。

我通過Vuex存儲狀态，可以保持整個頁面的使用。為了在會話中持久化狀态，我通過Ajax将它發送回存儲在資料庫中的伺服器。通過Laravel的驗證接口來驗證相關API調用。

在後端和前端之間共享資料

全棧應用程式的關鍵考慮之一是如何在後端和前端之間進行資料通信，是以我花了相當多的時間來處理這本書中的問題。

例如，有一列資料是從Laravel到内頁的，Vue.js通過使用刀片視圖來實作，可以很容易地使用模闆變量向頁面頭部注入資料。這個資料可以在Vue應用程式中就初始化。

但如果是用Vue-Router建立虛拟頁面，如何檢索後續頁面的資料？解決方案包括一個協同使用Vue的Vue-Router，Vuex和Axios一起創造一個令人驚訝的簡單機制，在需要用于檢索資料時使用它。

關于這本書

從Vuebnb的特點你會有一些涉及全棧Vue網站開發的話題：Vue.js，Vuex和Laravel。我在本文中沒有提到的其他主題包括：

Vue.js資料綁定的核心概念、指令和生命周期挂鈎

建立全棧應用的最佳實踐開發工作流Vue/laravel，包括WebPack。

全棧的應用程式生産部署，與免費的Heroku App和CDN服務的相關靜态資源

我很高興地這本書已經出版了！Get Full-Stack Vue.js 2 and Laravel 5 by Anthony Gore (Packt Publishing, 2017)：

https://www.packtpub.com/application-development/full-stack-vuejs-2-and-laravel-5

如果你拿起一份感興趣，可以使用促銷代碼fsvue15獲得15%的折扣。

分享Vue.js的入門級全家桶系列教程：

1.vue.js 入門與提高: 

xc.hubwiz.com/course/vue.…

2.vuex 2 入門與提高: 

xc.hubwiz.com/course/vuex

3.vue-router 入門與提高: 

xc.hubwiz.com/course/vuer…

4.vue.js 工程化實踐: 

xc.hubwiz.com/course/vueg…