今年我一直在写一本新书叫全栈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. phpexcel 导入超过26列时的解决方案

    $highestColumn = $sheet->getHighestColumn(); // 取得总列数 ++$highestColumn; for ($row = 5; $row <= ...

  2. 魅族手机USB调试无法打开、log无法打印

    MEIZU 在打开usb调试允许时,总提示:because an app is oobscuring a premision request, Setting can't verify your re ...

  3. 百度地图API自动定位和3种导航

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. sqlite3调试

    [sqlite3调试] 1.adb shell 激活模拟器shell. 2.cd /data/data/com.xxx.xxx/databases 进入app 数据库目录. 3.ls 查看有哪些数据库 ...

  5. python使用函数作为参数

    在实际使用中,我们有时希望将函数作为参数传递给另一个方法使用. 比如装饰器实际就是函数调用函数   举个例子,我想传递在调用方法之前打印一下时间:   使用函数当做入参 那就可以把方法名A当做入参传递 ...

  6. centos7.4上安装python3环境的坑

    前言:为了将爬虫项目布置到服务器上,才有了今天这一下午的坑,必须记录 不要动现有的python2环境!不要动现有的python2环境!不要动现有的python2环境! 解压 tar -xvf Pyth ...

  7. myeclipse2014安装aptana3.4.0插件(转)

    1.下载aptana3.4.0_eclipse的zip包  http://pan.baidu.com/s/1qXOiZl6 或者是:https://pan.baidu.com/s/1jIqOYcI 2 ...

  8. ORACLE 如何产生一个随机数

    1.select dbms_random.string('x', 3) from dual ; x是类型,3是长度. /* opt可取值如下: 'u','U'    :    大写字母 'l','L' ...

  9. SQL%ROWCOUNT作用

    SQL%ROWCOUNT是一个游标属性,而SQL中的DML操作实际上是一种隐式的游标操作,在做insert,update,delete,merge以及select into操作时,Oracle会打开一 ...

  10. zabbix监测公网IP的客户端主机

    未经测试 如果server端是内网的主机,需要注意:防火墙.端口映射 再用zabbix服务器去Telnet客户机的10050端口,然后在客户机中查看10050被什么ip访问了,拿到这个ip之后,加到之 ...