文档章节

Vuebnb:一个用vue.js和Laravel构建的全栈应用

笔阁
 笔阁
发布于 2018/04/16 09:21
字数 1129
阅读 244
收藏 14

今年我一直在写一本新书叫全栈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

© 著作权归作者所有

笔阁
粉丝 221
博文 218
码字总数 492488
作品 0
海淀
程序员
私信 提问
Vuebnb:一个完整??的Vue.js和Laravel应用程序

  这是围绕一个案例研究项目,Vuebnb,一个简单的Airbnb的克隆。在这篇文章中,我将对它是如何工作的一个高层次的概述,以便从头开始构建一个完整的Vue / Laravel应用程序。   这里有一个...

爱前端
2017/12/18
0
0
基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+。新的产品名字叫做+也就是 Plus ,因为 Th...

ThinkSNS账号
2017/06/14
3
0
Notadd Beta3 fix1 发布,基于 Laravel 的 PHP 开发框架

功能增强 后台首页可拖动 全新后台界面和登录界面 BUG修复 修正statics目录下部分资源不显示的问题 静态文件发布到statics的遗留问题 修复后台分页报错的BUG 简介 Notadd 是基于 Laravel 和 ...

左华栋
2017/09/05
1K
19
Notadd Beta3 发布,基于 Laravel 的下一代 PHP 开发框架

Notadd Beta3 已发布,更新内容如下: 新特性: 添加多域名支持 添加工作流支持 完整的前后端分离方案,支持单机单域名,单机多域名,CDN单域名,CDN多域名 异步文件处理中间件 添加模块/插件...

左华栋
2017/08/24
1K
7
使用Laravel和Vue.js2.5进行服务器端渲染

     服务器端渲染是一种很好的方式,可以增加你的全栈应用程序中加载速度的感知。用户在加载你的站点时可以得到一个完整的页面,而不是在JavaScript运行之前没有填充的空白页面。   使...

webstack前端栈
2017/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

从0搭建自己的webpack开发环境(五)

往期回顾: 从0搭建自己的webpack开发环境(一) 从0搭建自己的webpack开发环境(二) 从0搭建自己的webpack开发环境(三) 从0搭建自己的webpack开发环境(四) 前四篇文章我们已经掌握了w...

前端优选
昨天
5
0
docker 构建php-fpm 7.2(swoole) 镜像

mkdir -p ~/mnt/docker/phpmkdir -p ~/mnt/docker/php#下载swoole-2.2.0.tgz安装包到software 下载地址:http://pecl.php.net/package/swoole/2.2.0#创建Dockerfilevim ~/docker/......

Jack088
昨天
5
0
简单工厂

定义:由一个工厂对象决定创建出哪一种产品类的实例 类型:创建型,但不属于GOF23种设计模式 工厂类负责创建的对象比较少 客户端(应用层)只知道传入工厂类的参数,对于如何创建对象,不关心...

东风破2019
昨天
4
0
SSH安全加强两步走

从 OpenSSH 6.2 开始已经支持 SSH 多因素认证,本文就来讲讲如何在 OpenSSH 下启用该特性。 OpenSSH 6.2 以后的版本多了一个配置项 AuthenticationMethods。该配置项可以让 OpenSSH 同时指定...

Linux就该这么学
昨天
7
0
聊聊nacos的TcpSuperSenseProcessor

序 本文主要研究一下nacos的TcpSuperSenseProcessor TcpSuperSenseProcessor nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/healthcheck/TcpSuperSenseProcessor.java @Compon......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部