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

Vuebnb 一个用 vue.js + Laravel 构建的全栈应用的更多相关文章

  1. 使用 Flask 和 Vue.js 来构建全栈单页应用

    在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...

  2. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  3. 一个 "开箱即用" 个人博客全栈系统项目!vue+node+express+mysql+sequlize+uniapp

    " MG'Blog " 一个 "开箱即用" 个人博客全栈系统项目! 探索本项目的源码 » 前台预览 · 管理端预览 v1.0.2 小程序预览 v1.0.2 介绍 ...

  4. Win10构建Python全栈开发环境With WSL

    目录 Win10构建Python全栈开发环境With WSL 启动WSL 总结 对<Dev on Windows with WSL>的补充 Win10构建Python全栈开发环境With ...

  5. Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

    1.课程介绍 1.课程概述 1.做什么? Vue+koa2开发一款全栈小程序 2.哪些功能? 个人中心.图书列表.图书详情.图书评论.个人评论列表 3.技术栈 小程序.Vue.js.koa2.koa- ...

  6. 使用 Elastic 技术栈构建 Kubernetes全栈监控

    以下我们描述如何使用 Elastic 技术栈来为 Kubernetes 构建监控环境.可观测性的目标是为生产环境提供运维工具来检测服务不可用的情况(比如服务宕机.错误或者响应变慢等),并且保留一些可以 ...

  7. vue.js项目构建

    这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...

  8. 转载: 我如何使用 Django + Vue.js 快速构建项目

    原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下 引言 大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...

  9. 分享一个使用 vue.js 开发的网站

    点我 惠淘党 照着文档和google开发,只花了一个多星期.依赖包如下 { "name": "vue-htd", "version": &q ...

随机推荐

  1. vue分页 点击(非下拉)

    1.主页面 <template> <div class="list"> <template v-if="count"> 55 ...

  2. hive 踩坑

    1. create tabl metastore.MetaStoreDirectSql: Self-test query [select "DB_ID" from "DB ...

  3. 大型运输行业实战_day15_1_全文检索之Lucene

    1.引入 全文检索简介: 非结构化数据又一种叫法叫全文数据.从全文数据(文本)中进行检索就叫全文检索. 2.数据库搜索的弊端 案例 :     select  *  from product  whe ...

  4. date命令转换日期命令提示date: illegal time format

    问题:运行date命令抛错 date -j -f "%a %b %d %T %Z %Y" "Sat Sep 29 11:33:00 CST 2018" &quo ...

  5. javascript 页面导出功能

    javascript 页面导出功能 <a class="btn" href="javascript:void(0);" onclick="win ...

  6. 已知一个函数rand7()能够生成1-7的随机数,请给出一个函数rand10(),该函数能够生成1-10的随机数。

    题目: 已知一个函数rand7()能够生成1-7的随机数,请给出一个函数,该函数能够生成1-10的随机数. 思路: 假如已知一个函数能够生成1-49的随机数,那么如何以此生成1-10的随机数呢? 解法 ...

  7. ucore-lab1-练习4report

    练习四:分析bootloader加载ELF格式的OS的过程  1.bootloader如何读取硬盘扇区? (1)在练习3中实现了bootloader让CPU进入保护模式,下一步的工作就是从硬盘上加载并 ...

  8. unity填色绘画游戏Drawing Coloring Extra Edition

    . 下载地址: https://item.taobao.com/item.htm?spm=0.7095261.0.0.2e611debLdF3mf&id=576153069662

  9. unity实现3D物体上的事件监听处理

    想要在3D物体上实现全套事件监听处理: OnMouse系列 OnTrigger系列 OnPointer系列 OnDrag系列   1.在相机中添加Physics Raycaster组件 2.3D物体上 ...

  10. ListView鼠标框选实现蓝色蒙板

    此问题留心已久,今日方悉心求之,记录心得. ListView控件,不论Delphi中的TListView还是c#中的ListView,在开启其MultiSelect属性时,鼠标框选只是显示框张,如下图 ...