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…