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%的折扣。
转载于:https://www.cnblogs.com/mouseleo/p/10680006.html
Vuebnb 一个用 vue.js + Laravel 构建的全栈应用相关推荐
- Vuebnb:一个用vue.js和Laravel构建的全栈应用
2019独角兽企业重金招聘Python工程师标准>>> 今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel.它会在Packt出版社在2018年初出版. ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-3.路由、模型与数据库操作
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-3.路由.模型与数据库操作 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本 ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-4.跨域且传输数据,并优化后端接口
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-4.优化后端接口,前端使用axios实现接口功能 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站 ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-7.分类的模型关联和通用CRUD接口
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-7.分类的模型关联和通用CRUD接口 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和 ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 技能学习 ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-2.启动项目
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-2.启动项目 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 技能学习:学习 ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片 技能学习:学习使用php(tp6框架) + ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-5.用户登录,密码的bcrypt(hash)加密与验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-5.用户登录,密码的bcrypt(hash)加密与验证 技能学习:学习使用php(tp6框架) + vue.js,开发前端全 ...
- 使用 Vue.js 和 Flask 实现全栈单页面应用
原文链接: codeburst.io 在本教程中,我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互. 如果你只是想使用 Vue.js 库和 Flask 模板基本上是 ...
最新文章
- Python中函数的参数传递与可变长参数
- 10个常用方法有效优化ASP.NET的性能
- python全栈开发第36天------GIL全局解释锁、死锁现象和递归锁、信号量、Event事件、线程...
- Delphi中关于Rtti的一些操作(一)
- 经典C语言程序100例之三一
- lintcode12 带最小值操作的栈
- 第27月第24天 git pull fetch
- 2021 年百度之星·程序设计大赛 - 复赛 1002 Add or Multiply 1(第2类斯特林数)
- Android源码中学习文档如何查看
- UTC时间转北京时间原理与matlab代码
- android 创建桌面快捷方式 ShortCut
- 基于SiC集成技术的生物电信号采集方案
- 笛卡尔坐标系和齐次坐标系
- win10 任务栏上的工具栏,重启消失的解决方法
- 小米手机MIUI关闭广告
- 关于优化公式的小白理解
- supervisor 使用
- 关于零点和极点的讨论
- 为什么二进制按权展开就是十进制?彻底搞懂原理
- 作为字节跳动面试官,有些话我不得不说!
热门文章
- 使用ZooKeeper ACL特性进行znode控制
- MySQL集群(四)之keepalived实现mysql双主高可用
- performSelector:withObject:afterDelay: 的用法
- Sql Server之旅——第二站 理解万恶的表扫描
- 最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用6
- PHP文件上传后缀名与文件类型对照表
- [转载]Web Frameworks for Python by Guido van Rossum
- mac 安装php7.4
- 模板 - 数学 - 数论
- hadoop22---wait,notify