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 入门与提升: http://xc.hubwiz.com/course/vue.js

2.vuex 2 入门与提升: http://xc.hubwiz.com/course/vuex

3.vue-router 入门与提升: http://xc.hubwiz.com/course/vuerouter

4.vue.js 工程化实践: http://xc.hubwiz.com/course/vuegch