将gridstackjs添加到php yii2

问题描述 投票：0回答：1

您好，我在将 gridstackjs 设置为 php yii2 项目时遇到问题。

我尝试使用以下方法进行设置：

  1. 使用 CDN 进行手动设置 - 面临与通过这种方法管理库相关的潜在冲突
  2. 使用 Yii2 的 AssetBundle 功能进行 Asset Bundle 设置
  3. Composer 安装 - Yii2 中出现无法找到或发布 GridStackJS 资源的问题。
  4. Yii 资产命令
  5. GridStackAssetConfiguration - 使用 $sourcePath 属性调整 GridStackAsset 类。

尽管进行了这些尝试，但入门时的主要问题仍然存在，因为 Yii2 无法找到或发布 GridStackJS 资源，导致出现错误，表明要发布的文件或目录不存在。

我仍在网上搜索，试图找到一种设置方法，但是，我无法找到任何具体的设置解决方案。

到目前为止我的设置如下； 前端/视图/站点/about.php

<?php

/** @var yii\web\View $this */

use yii\helpers\Html;
use frontend\assets\GridStackAsset;

// Register the GridStackAsset for this specific view
GridStackAsset::register($this);
$this->registerJsFile('@web/js/gridstack-init.js', ['depends' => [GridStackAsset::class]]);

$this->title = 'About';
$this->params['breadcrumbs'][] = $this->title;
?>
<!DOCTYPE html>
<html>

<head>
    <script src="node_modules/gridstack/dist/gridstack-all.js"></script>
    <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet" />
    <style type="text/css">
        .grid-stack {
            background: #FAFAD2;
        }

        .grid-stack-item-content {
            background-color: #18BC9C;
        }
    </style>
    <script type="text/javascript">
        // var items = [
        //     { content: 'my first widget' }, // will default to location (0,0) and 1x1
        //     { w: 2, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
        // ];
        var grid = GridStack.init();
        // grid.load(items);
    </script>



</head>

<body>
<div class="grid-stack">
            <div class="grid-stack-item">
                <div class="grid-stack-item-content">Item 1</div>
            </div>
            <div class="grid-stack-item" gs-w="2">
                <div class="grid-stack-item-content">Item 2 wider</div>
            </div>
        </div>
</body>

</html>

前端/web/js/gridstack-init.js

const options = {
  cellHeight: "11rem",
  maxRow: 3,
};

const grid = GridStack.init(options);

// Add code to dynamically add widgets to the grid
// Example:
const widget1 = grid.addWidget({ w: 4, h: 2, content: '<div class="grid-stack-item-content">Widget 1</div>' });
const widget2 = grid.addWidget({ w: 4, h: 2, content: '<div class="grid-stack-item-content">Widget 2</div>' });

前端/资产/GridStackAsset.php

<?php

namespace frontend\assets;

use yii\web\AssetBundle;

class GridStackAsset extends AssetBundle
{
    public $sourcePath = '@npm/gridstack';

    public $css = [
        'gridstack/dist/gridstack.min.css',
    ];

    public $js = [
        'gridstack/dist/gridstack-all.js',
    ];

    public $depends = [
        'yii\web\YiiAsset', // Yii2 core assets
    ];
}

前端/config/main.php

<?php
$params = array_merge(
    require __DIR__ . '/../../common/config/params.php',
    require __DIR__ . '/../../common/config/params-local.php',
    require __DIR__ . '/params.php',
    require __DIR__ . '/params-local.php'
);

return [
    'id' => 'app-frontend',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
    'controllerNamespace' => 'frontend\controllers',
    'components' => [
        'request' => [
            'csrfParam' => '_csrf-frontend',
        ],
        'user' => [
            'identityClass' => 'common\models\User',
            'enableAutoLogin' => true,
            'identityCookie' => ['name' => '_identity-frontend', 'httpOnly' => true],
        ],
        'session' => [
            // this is the name of the session cookie used for login on the frontend
            'name' => 'advanced-frontend',
        ],
        'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
                [
                    'class' => \yii\log\FileTarget::class,
                    'levels' => ['error', 'warning'],
                ],
            ],
        ],
        'errorHandler' => [
            'errorAction' => 'site/error',
        ],
        
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
                'invoice/generate-invoice' => 'invoice/generate-invoice',
            ],
        ],

        'assetManager' => [
            'bundles' => [
                'frontend\assets\GridStackAsset',
            ],
        ],
        
       
    ],
    'params' => $params,
];

前端/config/asset.php

<?php
return [
    'basePath' => '@webroot', // Specify the root directory containing asset files (in this case, the web directory)
    'baseUrl' => '@web',
    'bundles' => [
        'frontend\assets\GridStackAsset',
        // Add other asset bundles if needed
    ],
];

composer.json

{
  "name": "yiisoft/yii2-app-advanced",
  "description": "Yii 2 Advanced Project Template",
  "keywords": [
    "yii2",
    "framework",
    "advanced",
    "project template"
  ],
  "homepage": "https://www.yiiframework.com/",
  "type": "project",
  "license": "BSD-3-Clause",
  "support": {
    "issues": "https://github.com/yiisoft/yii2/issues?state=open",
    "forum": "https://www.yiiframework.com/forum/",
    "wiki": "https://www.yiiframework.com/wiki/",
    "irc": "ircs://irc.libera.chat:6697/yii",
    "source": "https://github.com/yiisoft/yii2"
  },
  "minimum-stability": "stable",
  "require": {
    "php": ">=7.4.0",
    "yiisoft/yii2": "^2.0.34",
    "yiisoft/yii2-bootstrap5": "^2.0",
    "yiisoft/yii2-symfonymailer": "~2.0.3",
    "tecnickcom/tcpdf": "^6.6",
    "npm-asset/gridstack": "^9.5"
  },
  "require-dev": {
    "yiisoft/yii2-debug": "~2.1.0",
    "yiisoft/yii2-gii": "~2.2.0",
    "yiisoft/yii2-faker": "~2.0.0",
    "phpunit/phpunit": "~9.5.0",
    "codeception/codeception": "^5.0.0 || ^4.0",
    "codeception/lib-innerbrowser": "^4.0 || ^3.0 || ^1.1",
    "codeception/module-asserts": "^3.0 || ^1.1",
    "codeception/module-yii2": "^1.1",
    "codeception/module-filesystem": "^3.0 || ^2.0 || ^1.1",
    "codeception/verify": "^3.0 || ^2.2",
    "symfony/browser-kit": "^6.0 || >=2.7 <=4.2.4"
  },
  "autoload-dev": {
    "psr-4": {
      "app\\": "app/",
      "common\\tests\\": [
        "common/tests/",
        "common/tests/_support"
      ],
      "backend\\tests\\": [
        "backend/tests/",
        "backend/tests/_support"
      ],
      "frontend\\tests\\": [
        "frontend/tests/",
        "frontend/tests/_support"
      ]
    }
  },
  "config": {
    "allow-plugins": {
      "yiisoft/yii2-composer": true
    },
    "process-timeout": 1800,
    "fxp-asset": {
      "enabled": false
    }
  },
  "repositories": [
    {
      "type": "composer",
      "url": "https://asset-packagist.org"
    }
  ]
}

php yii2 gridstack
1个回答
0
投票

在 

frontend/assets/GridStackAsset.php
中，您定义了 
$sourcePath
。这意味着资产管理器尝试读取 
@npm/gridstack
目录中的文件并将它们发布到默认情况下为 
@frontend/web/assets
的 Web 可访问文件夹。

您有以下选择：

在

assets
中创建目录
@frontend/web
并使其可被php写入。

或者将 

gridstack.min.css
和 
gridstack-all.js
复制到可通过 Web 访问的目录，并相应地定义 
basePath
和 
baseUrl
。 
sourcePath
的定义必须被省略。

有关资产的更多信息，您可以在这里找到：https://www.yiiframework.com/doc/guide/2.0/en/structure-assets

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.