在Laravel Blade模板中将数据库数据注入JavaScript的实践指南

<?php

namespace App\Http\Controllers;

use App\PopUp; // 假设您的弹窗模型名为PopUp
use Illuminate\Support\Facades\URL;
use Illuminate\Routing\Controller; // 确保引入Controller基类

class PopUpController extends Controller
{
    public function showPopups()
    {
        $popups = PopUp::all(); // 从数据库获取所有弹窗数据
        $popupHtmlContent = ""; // 初始化一个空字符串来存储HTML内容

        if ($popups->count() > 0) {
            foreach ($popups as $popup) {
                // 拼接每个弹窗的HTML内容
                // 注意：这里直接拼接HTML，如果数据来自用户输入，务必进行XSS防护
                $popupHtmlContent .= '<a href="' . $popup->linkp . '">';
                $popupHtmlContent .= '<img src="' . URL::to($popup->image_path) . '" style="width: 100%;">';
                $popupHtmlContent .= '</a>';
            }
        }

        // 将处理后的HTML内容传递给Blade视图
        return view('your_blade_view', compact('popupHtmlContent'));
    }
}

<?php

namespace App\Http\Controllers;

use App\PopUp;
use Illuminate\Support\Facades\URL;
use Illuminate\Routing\Controller;

class PopUpController extends Controller
{
    public function showPopups()
    {
        $popups = PopUp::all()->map(function ($popup) {
            return [
                'title' => $popup->title,
                'link' => $popup->linkp,
                'image_url' => URL::to($popup->image_path),
                'text' => $popup->text,
                // 可以添加其他需要的字段
            ];
        });

        // 将集合转换为JSON字符串
        $popupJsonData = $popups->toJson();

        // 将JSON字符串传递给Blade视图
        return view('your_blade_view', compact('popupJsonData'));
    }
}

<!-- your_blade_view.blade.php -->
@extends('layouts.app')

@section('content')
    <!-- 页面其他内容 -->
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        let popup_shown = false;
        let cookies = document.cookie.split('; ');

        for( let i=0; i<cookies.length; i++ ){
            let cookie = cookies[i].split('=');
            if( cookie[0].trim() == 'oly12_reg_ext2_popup_shown' ) {
                popup_shown = true;
                break; // 找到cookie后即可退出循环
            }
        }

        if( !popup_shown ){
            // 使用Blade语法将控制器传递的HTML字符串注入到JavaScript变量中
            // 注意：{!! !!} 会输出未转义的HTML。如果 $popupHtmlContent 包含用户输入，务必在控制器进行XSS防护。
            var popup_data = `{!! $popupHtmlContent ?? '' !!}`; // 使用 ?? '' 避免在没有内容时出错

            if (popup_data.trim() !== '') { // 只有当有内容时才显示弹窗
                Swal.fire({
                    html: popup_data,
                    showConfirmButton: false, // 根据需求设置
                    // 其他SweetAlert2配置
                });
                document.cookie = "oly12_reg_ext2_popup_shown=1; path=/";
            }
        }
    });
</script>
@endsection

<!-- your_blade_view.blade.php -->
@extends('layouts.app')

@section('content')
    <!-- 页面其他内容 -->
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        let popup_shown = false;
        let cookies = document.cookie.split('; ');

        for( let i=0; i<cookies.length; i++ ){
            let cookie = cookies[i].split('=');
            if( cookie[0].trim() == 'oly12_reg_ext2_popup_shown' ) {
                popup_shown = true;
                break;
            }
        }

        if( !popup_shown ){
            // 将控制器传递的JSON字符串直接注入到JavaScript变量中
            // Blade的 {{ }} 语法会自动转义特殊字符，确保JSON字符串的完整性
            var popupJsonData = {!! $popupJsonData ?? '[]' !!}; // 确保输出有效的JSON数组或空数组

            if (popupJsonData.length > 0) {
                // 遍历JSON数据，为每个弹窗创建HTML或执行其他逻辑
                let htmlContent = '';
                popupJsonData.forEach(function(popup) {
                    htmlContent += `<a href="${popup.link}">`;
                    htmlContent += `<img src="${popup.image_url}" style="width: 100%;">`;
                    htmlContent += `</a>`;
                    // 可以根据需要添加更多内容，例如 popup.title, popup.text
                });

                Swal.fire({
                    html: htmlContent,
                    showConfirmButton: false,
                    // 其他SweetAlert2配置
                });
                document.cookie = "oly12_reg_ext2_popup_shown=1; path=/";
            }
        }
    });
</script>
@endsection