开发者社区> 马拉喀什> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。
+关注继续查看


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【laravel】 @2 artisan命令创建文件
【laravel】 @2 artisan命令创建文件
42 0
VisBug,提升web开发者幸福感的开发工具
作为web网页开发者,我们在日常开发过程中经常需要在控制台查看和修改元素的各种属性,以达到我们想要的各种效果。但这种方法往往效率低,而且效果不够直观。今天分享一款浏览器插件VisBug,可以帮助我们更快的查找元素,检查元素属性、间距,调整位置、颜色、字体大小、阴影等等,极大提升我们的开发体验。(支持Chrome、Firefox、Safari、Edge)
764 0
laravel框架搭建voyager
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengyi_L/article/details/82385984 voyager是一个用于后台管理的laravel扩展 首先搭建laravel环境 1.
1806 0
工作笔记 | Visual Studio 调用 Web Service
引言 最近笔者负责ERP财务系统跟中粮集团财务公司的财务系统做对接,鉴于ERP系统中应付结算单结算量比较大,而且管理相对集中,ERP系统与中粮财务公司的支付平台系统对接,实现银企直联,将网银录入的环节、付款以后ERP确认环节自动化,节省人工操作环节带来的误差。
1258 0
使用篇-基于Laravel开发博客应用系列 —— 在后台实现文章标签增删改查功能
5.3版本的php artisan make:request XXX和以前不一样了 5.3版本的使用命令后头上不在使用Request而是FormRequest use Illuminate\Foundation\Http\FormRequest; 参考教程:http://laravelacademy.
978 0
laravel 5.1 命令创建中间件
1.执行命令:artisan make:middleware SessionMiddleware,执行命令之后你会看到这个文件, 若是希望中间件被所有的 HTTP 请求给执行,只要将中间件的类加入到 app/Http/Kernel.php 的 $middleware 属性清单列表中。
908 0
LeetCode: 102_Binary Tree Level Order Traversal | 二叉树自顶向下的层次遍历 | Easy
题目:Binay Tree Level Order Traversal Given a binary tree, return the level order traversal of its nodes' values.
846 0
+关注
马拉喀什
一个还在路上的码农。
162
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载