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)：

如果你拿起一份感兴趣，可以使用促销代码fsvue15获得15%的折扣。

分享Vue.js的入门级全家桶系列教程：