Yii - Attività

Una risorsa è un file (css, js, video, audio o immagine, ecc.) A cui può essere fatto riferimento in una pagina web. Yii gestisce gli asset inasset bundles. Lo scopo di un pacchetto di asset è avere un gruppo di elementi correlatiJS o CSSfile nel codice di base e per poterli registrare all'interno di una singola chiamata PHP. I pacchetti di risorse possono dipendere anche da altri pacchetti di risorse.

All'interno della cartella delle risorse, troverai il pacchetto di risorse per il modello di applicazione di base:

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   /**
   * @author Qiang Xue <[email protected]>
   * @since 2.0
   */
   class AppAsset extends AssetBundle {
      public $basePath = '@webroot'; public $baseUrl = '@web';
      public $css = [ 'css/site.css', ]; public $js = [];
      public $depends = [
         'yii\web\YiiAsset',
         'yii\bootstrap\BootstrapAsset',
      ];
   }
?>

La classe precedente specifica che i file di asset si trovano all'interno del file @webroot cartella, che corrisponde all'URL @web. Il bundle contiene nJS file e un singolo CSSfile. Il pacchetto dipende da altri pacchetti -

yii\web\YiiAsset and yii\bootstrap\BootstrapAsset.

Proprietà di AssetBundle

Di seguito sono riportate le proprietà di AssetBundle.

basePath - Definisce una directory accessibile dal Web che contiene i file di risorse in questo pacchetto.
baseUrl - Specifica l'URL corrispondente alla proprietà basePath.
js - Definisce un array dei file JS contenuti in questo bundle.
css - Definisce un array dei file CSS contenuti in questo pacchetto.
depends- Definisce un array di bundle di risorse da cui dipende questo bundle. Significa che i file CSS e JS del bundle di risorse corrente verranno inclusi dopo i bundle, che sono dichiarati daldepends proprietà.
sourcePath- Definisce la directory principale che contiene i file di asset. È necessario impostare questa proprietà se la directory principale non è accessibile dal Web. Altrimenti, dovresti impostare il filebasePath e baseUrl proprietà.
cssOptions - Definisce le opzioni che verranno passate al yii\web\View∷registerCssFile funzione.
jsOptions - Definisce le opzioni che verranno passate al yii\web\View::registerJsFile funzione.
publishOptions: Specifica le opzioni che verranno passate a yii\web\AssetManager::publish funzione.

Classificazione delle attività

A seconda della posizione, le risorse possono essere classificate come:

Source Assets- Le risorse si trovano nella directory a cui non è possibile accedere direttamente tramite web. Dovrebbero essere copiati in una directory web per utilizzare le risorse di origine in una pagina. Questo processo è chiamatoasset publishing.
Published Assets - Le risorse si trovano in una directory accessibile dal Web
External Assets - Le risorse si trovano su un altro server web.

Utilizzo di pacchetti di risorse

Step 1 - All'interno del assets cartella, crea un nuovo file chiamato DemoAsset.php con il seguente contenuto.

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   class DemoAsset extends AssetBundle {
      public $basePath = ‘@webroot’;
      public $baseUrl = ‘@web’; public $js = [‘js/demo.js’];
   }
?>

Step 2- Abbiamo appena dichiarato un nuovo pacchetto di risorse con un singolo file demo.js. Ora, all'interno della cartella web / js, crea un file chiamato demo.js con questo codice.

console.log("hello from demo asset");

Step 3 - Per registrare il pacchetto di risorse appena creato, vai alla directory views / layouts e nella parte superiore del file main.php, aggiungi la seguente riga.

\app\assets\DemoAsset::register($this);

Step 4 - Se punta il tuo browser web su http://localhost:8080/index.php, dovresti vedere il seguente output della console Chrome.

Puoi anche definire il file jsOptions e cssOptions proprietà per personalizzare il modo in cui CSS e JSi file sono inclusi in una pagina. Per impostazione predefinita, i file JS vengono inclusi prima del tag di chiusura del corpo.

Step 5 - Per includere JS file nella sezione head, modificare il file DemoAsset.php file nel modo seguente.

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   use yii\web\View;
   class DemoAsset extends AssetBundle {
      public $basePath = '@webroot';
      public $baseUrl = '@web'; public $js = ['js/demo.js'];
      public  $jsOptions = ['position' => View::POS_HEAD];
   }
?>

Step 6 - Adesso vai to http://localhost:8080/index.php, dovresti vedere che il file demo.js lo script è incluso nella sezione principale della pagina.

È pratica comune per un'applicazione Web, in esecuzione in modalità di produzione, abilitare la memorizzazione nella cache HTTP per le risorse. In questo modo, il timestamp dell'ultima modifica verrà aggiunto a tutte le risorse pubblicate.

Step 7 - Vai al config cartella e modificare il file web.php file come mostrato nel codice seguente.

<?php
   $params = require(__DIR__ . '/params.php');
   $config = [ 'id' => 'basic', 'basePath' => dirname(__DIR__), 'bootstrap' => ['log'], 'components' => [ 'assetManager' => [ 'appendTimestamp' => true, ], 'request' => [ // !!! insert a secret key in the following (if it is empty) - this is //required by cookie validation 'cookieValidationKey' => 'ymoaYrebZHa8gURuolioHGlK8fLXCKjO', ], 'cache' => [ 'class' => 'yii\caching\FileCache', ], 'user' => [ 'identityClass' => 'app\models\User', 'enableAutoLogin' => true, ], 'errorHandler' => [ 'errorAction' => 'site/error', ], 'mailer' => [ 'class' => 'yii\swiftmailer\Mailer', // send all mails to a file by default. You have to set // 'useFileTransport' to false and configure a transport // for the mailer to send real emails. 'useFileTransport' => true, ], 'log' => [ 'traceLevel' => YII_DEBUG ? 3 : 0, 'targets' => [ [ 'class' => 'yii\log\FileTarget', 'levels' => ['error', 'warning'], ], ], ], 'db' => require(__DIR__ . '/db.php'), ], 'modules' => [ 'hello' => [ 'class' => 'app\modules\hello\Hello', ], ], 'params' => $params,
   ];
   if (YII_ENV_DEV) {
      // configuration adjustments for 'dev' environment
      $config['bootstrap'][] = 'debug'; $config['modules']['debug'] = [
         'class' => 'yii\debug\Module',
      ];
      $config['bootstrap'][] = 'gii'; $config['modules']['gii'] = [
         'class' => 'yii\gii\Module',
      ];
   }
   return $config;
?>

Abbiamo aggiunto il file AssetManager componente e impostare il appendTimestamp proprietà.

Step 8 - Adesso scrivi http://localhost:8080/index.phpnella barra degli indirizzi del browser web. Noterai che tutte le risorse ora hanno un timestamp come mostrato nell'immagine seguente.

Assetbundles Core Yii

Di seguito sono riportati gli assetbundle Core Yii.

yii\web\JqueryAsset - Include il file jquery.js.
yii\web\YiiAsset - Include il file yii.js, che implementa un meccanismo di organizzazione del codice JS in moduli.
yii\bootstrap\BootstrapAsset - Include il file CSS dal framework Twitter Bootstrap.
yii\bootstrap\BootstrapPluginAsset - Include il file JS dal framework Twitter Bootstrap.
yii\jui\JuiAsset - Include i file CSS e JS dalla libreria jQuery UI.

↰ Previous page Next page ↱

Yii - Attività

Proprietà di AssetBundle

Classificazione delle attività

Utilizzo di pacchetti di risorse

Assetbundles Core Yii

Tutorial Yii