- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章详解将数据从Laravel传送到vue的四种方式由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
在过去的两三年里,我一直在研究同时使用 Vue 和 Laravel 的项目,在每个项目开发的开始阶段,我必须问自己 “我将如何将数据从 Laravel 传递到 Vue ?”。这适用于 Vue 前端组件与 Blade 模板紧密耦合的两个应用程序,以及运行完全独立于 Laravel 后端的单页应用程序.
这里有四种不同的方法从一个到另一个获取数据.
直接回显到数据对象或组件属性中 。
可以说是将数据从 Laravel 应用程序移动到 Vue 前端的最简单方法。使用上面的任何一种方法,您都可以将 JSON 编码的数据回送给您的应用程序或其组件.
然而,最大的缺点是可扩展性。您的 JavaScript 需要直接暴露在模板文件中,以便引擎可以呈现您的数据。如果您使用 Vue 向 Laravel 站点的页面或区域添加一些基本的交互,这应该不是问题,但是您很容易就会遇到将数据强制放入压缩脚本的困难.
对于 Laravel 5.5+ 使用 json 指令:
使用自定义组件和 Laravel 自身的 json blade 指令可以让您轻松地将数据移动到道具中。此方法允许您划分 Vue 代码,将脚本与 Webpack 或 Mix 捆绑在一起,同时仍可以直接向其中注入数据.
将属性作为全局窗口注入 。
虽然这看起来有点老生常谈,但将数据添加到窗口对象中可以轻松地创建全局变量,这些变量可以从应用程序中使用的任何其他脚本或组件访问。在过去,我用它作为存储和访问 API 基 URL、公钥、特定模型 ID 和各种其他需要在整个前端使用的小数据项的方法.
不过,使用此方法有一点需要注意,这就是访问 Vue 组件内部数据的方式。在模板内部,您将无法使用以下内容,因为 Vue 假定您尝试访问的窗口对象位于同一组件内:
相反,您需要使用返回值的计算方法:
如果这个方法的用例是较小的字符串或数值,并且使用 Laravel 自身的 mix 来编译,那么事情实际上会变得非常简单。您可以使用 process.env 对象引用 JavaScript 中 .env 文件中的值。例如,如果我的环境变量文件中有 API_DOMAIN=example.com,我可以在我的 Vue 组件(或使用 mix 编译的其他 JavaScript )中使用 process.env.API_DOMAIN.
将 API 与 Laravel 自身的 web 中间件和 CSRF 令牌一起使用 。
对我来说,这个解决方案是 Vue 前端 + Laravel 后端世界中最简单的入门方法。 Laravel 提供了两个不同的路由文件:web.php 和 api.php。它们被拉入并通过应用程序 Providers 目录中的 RouteServiceProvider.php 文件映射。默认情况下,web 组的中间件设置为 web,api 组的中间件设置为 api.
追溯到 app/Http/Kernel.php;您会注意到,在第 30 行左右,有两个组被映射到一个数组中,这个 web 组包含会话、 cookie 加密和 CSRF 令牌验证等内容。同时,api 组只有一个基本的限制和一些绑定。如果您的目标只是通过一个基本的、轻量级的 api 将信息拉入 Vue ,而这个 api 不需要身份验证或 post 请求,那么您可以到此为止。否则,可以进行一次修改,以确保在几秒钟内与 Vue 完全兼容.
回到上面的 RouteServiceProvider, 交换出 web 方法中的 api 中间件。我们为什么要这样做?这样做有什么作用吗?它使我们通过 api 拉入的路由也可以包含应用程序的常规网络路由通常会使用到的所有会话标量和令牌。当使用 axios 或者其他异步 JavaScript http 调用的时候,我们可以在后端使 Auth::user () 或者其他的验证技术,而默认的 api 就无法做到这些.
这个方法唯一警告的是,你必须使用 Laravel 和 一个 blade 模板来渲染前端。这样框架可以将必要的会话令牌和变量注入到请求当中.
使用 JWT 认证的 API 调用 。
JSON Web Tokens 是安全的,易于使用的方法来锁定对 API 端点的访问,并使用了 Tymon'sjwt-auth扩展包,在这个基础上,用来构建新的项目或者在现有的 Laravel 应用中使用绝对是一件简单的事情.
要在 API 上安装和配置此功能,只需要几个简单的步骤:
完成之后,你需要决定哪些路由将受 JWT 保护并针对 JWT 进行身份验证。你可以使用内置的 api auth 中间件来执行此操作,或者也可以自己滚动在发送请求的过程中获取令牌。在 API 的登录方法中,你将使用相同的 auth()->attempt 方法作为默认的 Laravel 应用程序,但从它返回的除外是你应该传递回的 JSON Web Token 令牌.
从那里,你的 Vue 应用程序应该存储该令牌 (存储在 LocalStorage 或者 Vuex),在每一个传出请求中,都将它加入到 Authorization header 作为授权头。回到你的 Laravel 应用,你可以使用他们的令牌来引用特定用户的请求。将应该显示给他们的数据返回回去.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.
原文链接:https://learnku.com/laravel/t/34951 。
最后此篇关于详解将数据从Laravel传送到vue的四种方式的文章就讲到这里了,如果你想了解更多关于详解将数据从Laravel传送到vue的四种方式的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
Pygame 我想知道是否有人知道如何在触摸或越过某些东西时交换 map 。 这是我的代码: import pygame, sys from pygame.locals import * pygame
我正在尝试使用以下代码将用户传送到他们自己的领域: @EventHandler public static void onPortalTravel(PlayerPortalEvent event) t
我想要对不同选项的简要介绍。 最佳答案 来自 Wikipedia Embedded in an SWF file using the Flash authoring tool (supported i
我正在尝试创建一个简单的程序来刺激二进制系统中恒星的旋转,但是当我运行程序时,其中一个“恒星”出现故障,实际上是围绕给定路径传送到不同位置。我怎样才能解决这个问题?这是代码: import pygam
我不会java(一般用c写) 我怎样才能有效地进行某种位 block 传送方式java中的像素数组内容到窗口上? 我需要(在循环中)将像素[][]传输到窗口上 我可以使用类似的东西 pixels[]
我遇到了无法通过 TestFlight 安装我的应用程序的 Ad Hoc 版本的问题。应用程序下载,但在安装步骤中显示类似“无法安装 YourApp”的内容,控制台上显示以下消息: Sep 17 16
如果我使用 Eazfuscator 混淆 vb.net 程序集并启用符号名称加密(以便我可以使用 Eazfuscator 堆栈跟踪解码器),如果我发送 PDB 文件,这是否有效地撤消?我想发送 PDB
我使用 Delphi 6 Pro 和 DSPACK DirectShow 组件库来创建一个 DirectShow 过滤器,该过滤器从自定义音频源提供 Wav 格式的数据。需要明确的是,我将原始 PCM
我正在尝试发布一个执行一些 RMI 调用的 Java 应用程序。 我需要将其作为 JAR 文件发送(这是一个要求,没有办法解决)。 现在,为了允许某些事情(例如套接字和 RMI 连接),我需要一个 S
在 Vue 3 中,可以使用 Teleport body 的一个组件像这样标记: Open full screen modal! (With teleport!)
由于 Netty Channel 使用单个线程进行入站和出站处理,我很想知道在使用多路复用协议(protocol)(例如 SPDY)时传送入站数据的推荐做法。想到的几个选项: 1) 使用 channe
我基本上想这样做: $_ = "some content that need to be escaped &>|\"$\'`\s\\"; qx{echo $_ | foo} 这里有两个问题。先是$_的
我想使用 Kurento 作为媒体服务器,它将 WebRTC 作为输入并提供 RTSP 流作为 url:rtsp://kurento/streamName 这可能吗? 我看到了https://gith
我的理解是,在 Azure AMS V2 上,您可以进行混合 key 分发,您可以从另一台服务器(例如 S3)流式传输加密的媒体内容,并仅使用 Azure 作为 key 服务器。 This is my
我目前正在尝试通过用于控制视频访问的 PHP 脚本传送 MP4 视频以用于 HTML5 视频(使用 video-js)。经过一些研究,在 stackoverflow article found her
我使用以下命令将 sed 的输出重定向到 tmp 文件: grep --include=*.txt -A 3 -rnw abx/ -F -e 'simple' | sed -n 's#.*/\([^/
我有一个 PHP 文件,它的唯一工作是检查用户是否登录 + 是否设置了 session 变量,然后通过 nginx X-Sendfile 传送文件。它在任何桌面浏览器和以前的任何移动浏览器上都能完美运
我在 2014 年 1 月 24 日悄悄地向 iOS 应用商店交付了一个应用。这是一款仅限 iO7/iPhone 的应用程序,所有内容均已正确交付。截至昨天,我的应用程序已获批准,目前可以在 App
我是一名优秀的程序员,十分优秀!