基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(十二) —— 为 Vue Router 添加页面布局

Laravel 可以通过 Blade 模板为应用添加页面布局,不过由于我们构建的是单页面应用,可以通过 Vue Router 来实现:创建一个根级页面,其中包含在每个页面都会用到的 Vue 组件,如 Header 和 Footer。使用布局的另一个好处是你可以一次加载所有你需要的 Vuex 数据,它们会随着布局里的组件出现在所有子页面上。 第一步:重新组织嵌套路由 在设置前端路由那篇教程...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(十一) —— 通过 Laravel Mix 将 SASS 编译到 Vue 组件

在为单页面应用配置 JavaScript 和 Sass 这篇教程中,我们已经为所有 Sass 资源构建了目录结构,我们可以将 Vue 组件的 Sass 资源放到这些目录中。 第一步:创建变量文件 由于我们使用 Foundation 组件来实现快速格栅功能,包含应用所有 Sass 变量的 _variables.scss 将成为最重要的文件,我们将这个文件放到 resources/asset...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(十) —— 在 Vue 组件中使用 Vuex 模块

在本教程中我们将调用之前定义的 API 并使用上一篇教程中创建的 Vuex 模块,我们会在 Vue 组件中使用 Vuex 模块并加载页面所需要的数据。 第一步:设置 Home.vue 组件 在一个 API 驱动的单页面应用中,会首先加载 HTML、CSS 和 JavaScript,这意味着页面会在布局和样式加载之后才加载数据。我们所要做的就是绑定 Home 页面组件的一个声明周期钩子并加...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(九) —— 构建 Vuex 模块

在上一篇教程中,我们在 resources/assets/js/api/cafe.js 文件中通过 JavaScript 的 Axios 库构建了一些调用 Laravel 后端 API 路由的方法。在这一篇教程中我们需要将从 API 接口获取的数据保存下来以便在单页面应用中使用,而这正是 Vuex 模块可以大展拳脚的地方。 在 Vuex 文档中将 Vuex 定位成专为 Vue.js 应用...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(八) —— 通过 Axios 库构建 API 请求

在上一篇教程中,我们在 Laravel 后端定义好了 API 接口,在本篇教程中,我们将通过 JavaScript 构建 API 请求来访问那些后端 API。由于我们已经配置好了 Vue 和前端路由,构建这些请求应该非常顺利,并且我们还可以通过 Vuex 模块来保存数据。 第一步:配置 config.js 文件 和 .env 类似,config.js 对多环境前端开发来说非常重要,我将所...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(六) —— 通过 Vue Router 配置前端路由

单页面应用的实现有赖于 HTML 5 History API,不过现在让你从头学习 HTML 5 History API 肯定不现实,好在 Vue Router 帮我们处理了几乎所有底层操作,比如推入和弹出状态,而且我们通过 Vue 构建应用,使用起来会更加如鱼得水,并且可以和 Vue 中的其他组件无缝对接。 在这篇教程中,我们会设置首页路由、咖啡店列表路由、咖啡店详情页路由、以及新增咖...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(五) —— 引入 Vue 2、Vue Router 和 Vuex

到目前为止,我们已经搭建好了 Roast 单页面应用的基本骨架:安装好了 Laravel、配置好了基于 Socialite 的社会化登录、基于 Passport 配置好了自己的 OAuth 服务器,并且配置好了 JavaScript 和 Sass。 在这一篇教程中我们将开始安装配置 Vue 全家桶(Vue 2 + Vuex + Vue Router),在我看来,这个全家桶是最经过深思熟虑...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(一) —— 初始化 Laravel 单页面应用

今天开始,学院君要开启一个系列教程,和之前的博客系列一样,通过一个完整的手把手教程带大家学习如何通过 Laravel + VueJS 开发 API 驱动的应用程序,整个教程的篇幅大概在 40 篇左右,主要讲述 Web 端及移动端的单页面应用(Single Page Application)开发,后端基于 Laravel 5.6,前端基于 Vue 2,演示教程的开发环境使用的是 MacOS...

Laravel + Vue 使用示例系列:构建一个类似 Twitter 的 Web 应用

在这一篇示例教程中,我们将会构建一个类似 Twitter 的 Web 应用。我们将使用到 Laravel 5.6 和 Vue.js,并且在 Vue.js 中定义一些组件,此外,还会使用 Axios 来发送网络请求。当然,篇幅有限,我们不可能开发一个完整的 Twitter 应用,而是实现一个简化版:用户可以发送 Tweet 并在自己的时间线中看到,可以关注或取消关注其他用户,如果关注了其他...

由 Laravel 官方团队开发的后台管理面板 Laravel Nova 即将发布

在今年7月25号的 Laracon 2018 大会上,Taylor Otwell 公布了由 Laravel 团队开发的官方版后台管理系统 Laravel Nova。 Nova 高度可定制,这就为使用者提供了极大的灵活性,而且一旦在应用中配置使用 Nova,它会非常智能。 Nova 是一个 Composer 扩展包,你可以在已有的 Laravel 5.6 应用中安装它,这意味着你无需重新开...