Vuebnb:一个用vue.js和Laravel构建的全栈应用
2019独角兽企业重金招聘Python工程师标准>>>
今年我一直在写一本新书叫全栈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
转载于:https://my.oschina.net/u/2275217/blog/1796040
Vuebnb:一个用vue.js和Laravel构建的全栈应用相关推荐
- vue php 文件上传,使用vue.js和laravel上传文件
我尝试在vue.js和laravel中上传pdf文件,files_array是这样定义的:data(){ return { formData: new Form ({ files_array:'', ...
- 组件用.vue还是.js_如何使用Vue.js 2.0构建灵活的图像上传器组件
组件用.vue还是.js by Cathy Ha 由凯茜·哈(Cathy Ha) 如何使用Vue.js 2.0构建灵活的图像上传器组件 (How to build a flexible image u ...
- vue源码解析(3)—— Vue.js 源码构建
Vue.js 源码构建 Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下. 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.json ...
- 快速构建嵌入式全栈知识体系以及如何进阶
快速构建嵌入式全栈知识体系以及如何进阶 嵌入式是一门交叉学科.一个嵌入式电子产品(比如手机)从底层到上层,一般会涉及半导体芯片.电子电路.计算机.操作系统.多媒体等不同专业领域的知识.很多从事嵌入式开 ...
- vue 使用人脸识别_使用Vue.js和Kairos构建简单的人脸识别应用
vue 使用人脸识别 Face Detection and Recognition have become an increasingly popular topic these days. It's ...
- 多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
- laravel ajax vue6,详解用vue.js和laravel实现微信支付
注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:https://www.jb51.net/article/117004.htm 1.打开app/con ...
- vue商城项目源码_CMS全栈项目之Vue和React篇(下)(含源码)
今天给大家介绍的主要是我们全栈CMS系统的未讲解完的后台部分和前台部分,如果对项目背景和技术栈不太了解,可以查看我之前的文章 基于nodeJS从0到1实现一个CMS全栈项目(上) 基于nodeJS从0 ...
- vue全家桶+koa2+mongoDB打造全栈社区博客
背景 一直以来都想自己编写一个自己的社区博客,后来在网上找了一下,最后决定参考慕课网的一个社区项目,决定改用vue2.6+AntdForVue+koa2+mongoose实现一套社区博客. 简介 这是 ...
最新文章
- UidGenerator
- 【项目实战课】基于ncnn框架与KL散度的8bit对称模型量化与推理实战
- python标识符和关键字_Python标识符和关键字资料解析
- mysql can_***MySQL错误:Can't connect to MySQL server (10060)
- JSP下Forward和Redirect的区别分析
- 逆向工程核心原理学习笔记(三):检索API方法
- 不同设备屏幕尺寸和DPR适配
- 一步步编写操作系统 41 快表tlb 简介
- NET-TreeView控件说明
- jquery几种常用框架比较
- Android开发 入门篇(一)
- Allegro PCB多层板中负片热风焊盘的制作以及flash的添加
- Win10中如何把语言栏缩到系统托盘
- 机器视觉、halcon visionpro 的使用感受
- 【面经】今天又一名读者斩获蚂蚁金服Offer,就是这么简单!!
- oraclenbsp;命名规范
- Discuz更改帖子标题的字符长度限制
- 优秀自我简介200字_优秀初中自我介绍200字范文
- 基于Matlab模拟用于海况海洋学研究的 X 波段雷达系统(附源码)
- 【Shell】创蓝253云通讯平台国际短信API接口DEMO