基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十六) —— 通过 Vue + 高德地图 JS API 在地图上标记咖啡店

在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的各种 API 来实现我们想要实现的功能(地图服务都是基于地理编码来实现),在这篇教程中,我们将基于地理编码在地图上标记咖啡店,我们将通过在 Cafes 页面中包含地图组件来实现这个功能。 第一步:获取高德地图 JS API Key 由于是在前端实现地图标记功能,所以需要申请高德地图的 JS API Key,在上一...

[ Laravel 5.7 文档 ] 测试系列 —— 浏览器测试(Laravel Dusk)

简介 Laravel Dusk 提供了优雅的、易于使用的浏览器自动测试 API。默认情况下,Dusk 不强制你在机器上安装 JDK 或 Selenium,取而代之地,Dusk 基于独立安装的 ChromeDriver。不过,你可以使用任意其他兼容 Selenium 的驱动。 注:Selenium 是一套 Web 应用自动化测试系统,运行 Selenium 测试就像你在浏览器中操作一样;...

[ Laravel 5.7 文档 ] 前端开发 —— 使用进阶:通过 Laravel Mix 编译前端资源

简介 Laravel Mix 提供了一套流式 API,使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链,你可以流式定义资源管道。例如: mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app....

[ Laravel 5.7 文档 ] 前端开发 —— 快速入门:JavaScript & CSS 脚手架

简介 Laravel 并不强制你使用什么 JavaScript 框架或者 CSS 预处理器,不过也确实提供了对很多应用而言都很有用的 Bootstrap 和 Vue 的一些基本脚手架。默认情况下,Laravel 使用 NPM 来安装这些前端包。 CSS Laravel Mix提供了干净、优雅的 API 用于编译 SASS 或 Less,SASS 和 Less 都是在原生 CSS 的基础上...

[ Laravel 5.7 文档 ] 前端开发 —— Blade 模板引擎

简介 Blade 是由 Laravel 提供的非常简单但功能强大的模板引擎,不同于其他流行的 PHP 模板引擎,Blade 在视图中并不约束你使用 PHP 原生代码。所有的 Blade 视图最终都会被编译成原生 PHP 代码并缓存起来直到被修改,这意味着对应用的性能而言 Blade 基本上是零开销。Blade 视图文件使用 .blade.php 文件扩展并存放在 resources/vi...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(八) —— 通过 Axios 库构建 API 请求

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

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(五) —— 引入 Vue 2、Vue Router 和 Vuex

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

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(四) —— 配置 JavaScript 和 SASS

到目前为止,我们都是在 Laravel 后端进行初始化和扩展包的安装配置,从这一篇教程开始,我们把视线转移到前端。对于前端开发,Laravel 自带了强大的 Laravel Mix,有了这个工具,我们不需要再担心复杂的 Webpack、Sass 配置以及前端文件的编译,虽然我们还是使用 NPM,但是 Laravel Mix 会帮我们打理所有的构建和编译工作,开发者甚至可以在 Larave...

[ Laravel 5.6 文档 ] 测试系列 —— 浏览器测试

简介 Laravel Dusk 提供了优雅的、易于使用的浏览器自动测试 API。默认情况下,Dusk 不强制你在机器上安装 JDK 或 Selenium,取而代之地,Dusk 基于独立安装的 ChromeDriver。不过,你可以使用任意其他兼容 Selenium 的驱动。 注:Selenium 是一套 Web 应用自动化测试系统,运行 Selenium 测试就像你在浏览器中操作一样...

[ Laravel 5.6 文档 ] 进阶系列 —— 广播

简介 在很多现代 Web 应用中,Web 套接字(WebSockets)被用于实现实时更新的用户接口。当一些数据在服务器上被更新,通常一条消息通过 Websocket 连接被发送给客户端处理。这为我们提供了一个更强大的、更有效的选择来持续拉取应用的更新。 为帮助你构建这样的应用,Laravel 让通过 Websocket 连接广播事件变得简单。广播 Laravel 事件允许你在服...