在 Laravel 中与前端共享数据

您是否曾经需要在应用程序 JavaScript 中访问当前用户的姓名或电子邮件地址?有很多不同的方法可以做到这一点,但让我们来看看两种最简单的方法。

#受限访问

将这些数据放在网站上的任何地方并不总是最好的主意。您可能只在处理特定元素或视图时才需要它,这时data-属性就派上用场了。

给定以下 HTML,我需要在单击按钮时显示当前用户的名称,否则,只显示通用的"Hello"消息。默认情况下,它将显示通用消息。

php 复制代码
<button type="button" id="show">Show Email Address</button>
<p id="message">Hello</p>

让我们data-name给元素添加一个属性<p>。

php 复制代码
<button type="button" id="show">Show Email Address</button>
<p id="message" data-name="{{ $user->name }}">Hello</p>

现在,如果我们想在 JavaScript 内部访问它,我们可以:

javascript 复制代码
document.getElementById('show').addEventListener('click', el => {
    const el = document.getElementById('message')
    
    el.innerText = `Hello, ${el.dataset.name}`
})

任何data-*属性都可以使用"驼峰式"等效格式访问。例如,data-first-name可以使用 来访问el.dataset.firstName。

如果您有一个模型,您需要{{ $user->toJson() }}在 Blade 模板中,然后JSON.parse(el.dataset.user)在 JavaScript 中正确访问它。

#全局对象

如果您有大量依赖于数据的不同脚本,那么下一个会很有用。

在布局文件中,我们可以在文档的<script>某处添加。<head>

html 复制代码
<head>
    <script>
        window.sharedData = {}
    </script>
</head>

它只是一个空对象,但这里我们可以采用两种不同的方法。要么使用 JavaScript 声明属性并确保json_encode()每个值,要么使用json_encode()关联数组并让 PHP 处理所有事情(几乎)。

#每一个项目

html 复制代码
<head>
    <script>
        window.sharedData = {
            user: {{ json_encode(auth()->user()) }},
            ids: {{ json_encode([1, 2, 3]) }}
        }
    </script>
</head>

#关联数组

html 复制代码
<head>
    <script>
        window.sharedData = json_encode([
            'user' => auth()->user(),
            'ids' => [1, 2, 3],
        ])
    </script>
</head>

值得注意的是,任何被序列化的对象的所有public属性都会在结果对象中公开。

如果您想要自定义序列化形式,您可以实现接口JsonSerializable并添加一个jsonSerialize()方法。此方法应返回一个包含您想要公开的内容的数组。

相关推荐
科技探秘人6 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人7 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR12 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香14 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969317 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai22 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91531 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试