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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

微信小程序+和风天气完成天气预报

花半天时间完成简单的小程序应用。适合小程序初学者。

2.2K70
来自专栏Guangdong Qi

iOS 各种图标

27050
来自专栏美团技术团队

【美团技术团队博客】前端组件化开发实践

前言 一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着...

66250
来自专栏CDA数据分析师

有Bigger | 打造属于自己的 Python 编码环境

一个好的程序员必须善用各种工具提升自己的开发效率,和提升自己的幸福指数。另外,个人觉得vim还是值得自己重新一配的,我的配置过程基本都是在 读spf13的配置,...

22950
来自专栏java一日一条

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础...

10620
来自专栏伪君子的梦呓

推荐几个油猴脚本

油猴,也就是 Tampermonkey 是我每一台电脑都会安装的东西,也是我会给熟人介绍和安装的东西。没什么好说的,就是好用。

6.9K20
来自专栏钱曙光的专栏

一周极客热文:一个7岁女孩告诉你的关于计算机编程的本质

一个七岁的女孩子,在花了一个小时学习编程后,她对编程得出了令人赞叹的体会。(如上图) 计算机很傻,它只会做那些你让它做的事。 编程真的很难!(你必须非常的认真!...

23590
来自专栏Coding01

一个码字工作者的写作工具 —— MWeb

由于 Markdown 格式简单易用,而且不受限于编辑器等影响,已经是写博客、写日志、写技术文档,亦或是用来写公众号文章的必备了。

20310
来自专栏编程

python编程

使用python编写客户端不是一件很复杂的事情。比如说,基本上不管是mac版本,还是windows版本、linux版本,一般python都默认安装了Tkinte...

302100
来自专栏ytkah

微信小程序添加悬浮在线客服会话按钮

  微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用。客服会话按钮,用于在页面上显示一...

50420

扫码关注云+社区

领取腾讯云代金券