Analysis on the use of the front-end resource package that comes with the Yii framework in PHP
不言
Release： 2023-04-01 13:42:01
Original
1106 people have browsed it
This article mainly introduces the use of front-end resource packages in PHP's Yii framework, and lists some commonly used JavaScript and CSS resources in Yii. Friends in need can refer to the following
The resources in Yii are and Files related to Web pages can be CSS files, JavaScript files, pictures or videos, etc. The resources are placed in a directory accessible to the Web and are directly called by the Web server.
It is better to automatically manage resources through programs. For example, when you use the yii\jui\DatePicker widget in a page, it will automatically include the required CSS and JavaScript files instead of requiring you to find them manually. These files are also included. When you upgrade the widget, it will automatically use the new version of the resource files. In this tutorial, we will detail the powerful resource management functions provided by Yii.
Resource package
Yii manages resources in resource packages. Resource packages are simply a collection of resources placed in a directory. When a resource is registered in a view Package, the CSS and JavaScript files in the package will be included when rendering the web page.
Define resource package
The resource package is specified as a PHP class that inherits yii\web\AssetBundle. The package name is the PHP class name that can be automatically loaded. In the resource package class , you need to specify the location of the resource, which CSS and JavaScript files it contains, and its dependencies on other packages.
The following code defines the main resource package used by the basic application template:
<?php
namespace app\assets;
use yii\web\AssetBundle;
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',
];
}
Copy after login
As above, the resource files specified by the AppAsset class are placed in the @webroot directory. The corresponding URL is @web. The resource bundle contains a CSS file css/site.css. There is no JavaScript file. It depends on the other two packages yii\web\YiiAsset and yii\bootstrap\BootstrapAsset. About the properties of yii\web\AssetBundle More details are described below:
yii\web\AssetBundle::sourcePath: Specifies the root directory of the bundle containing resource files. This property should be set when the root directory cannot be accessed by the Web. Otherwise, the yii\web\AssetBundle::basePath property and yii\web\AssetBundle::baseUrl should be set. Path aliases can be used here;
yii\web\AssetBundle::basePath: specifies the directory that contains the resource files in the resource bundle and can be accessed by the Web. When specifying yii\web\AssetBundle ::sourcePath attribute, the resource manager will publish the package's resources to a Web-accessible directory and override this attribute. If your resource file is in a Web-accessible directory, you should set this attribute so that you do not need to publish it again. Path aliases can be used here.
yii\web\AssetBundle::baseUrl: Specifies the URL corresponding to the yii\web\AssetBundle::basePath directory, similar to yii\web\AssetBundle::basePath. If you specify yii\web\AssetBundle::sourcePath property, the asset manager will publish these resources and override this property, path aliases can be used here. yii\web\AssetBundle::js: An array containing the JavaScript files of the resource bundle. Note that the forward slash "/" should be used as the directory separator. Each JavaScript file can be specified in one of the following two formats:
The relative path is expressed as a local JavaScript file (such as js/main.js). The actual path of the file is preceded by yii\web\AssetManager::basePath. The actual path of the file is The URL has yii\web\AssetManager::baseUrl in front of the path.
Absolute URL address is represented as an external JavaScript file, such as http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js or // ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js.
yii\web\AssetBundle::css: A JavaScript file containing the resource bundle Array, the array format is the same as yii\web\AssetBundle::js.
yii\web\AssetBundle::depends: A list of other resource bundles that this resource bundle depends on (detailed introduction in the next two sections).
yii\web\AssetBundle::jsOptions: When calling yii\web\View::registerJsFile() to register each JavaScript file in the bundle, specify the options passed to this method.
yii\web\AssetBundle::cssOptions: When calling yii\web\View::registerCssFile() to register each css file in the bundle, specify the options passed to this method.
yii\web\AssetBundle::publishOptions: Specify the options passed to this method when calling yii\web\AssetManager::publish() to publish the package resource file to the Web directory. Only used when the yii\web\AssetBundle::sourcePath attribute is specified.
Resource location
Resources can be divided into:
Source resources: resource files and PHP source code according to their location Put together, they cannot be directly accessed by the Web. In order to use these source resources, they must be copied to a Web directory that can be accessed by the Web and become published resources. This process is called publishing resources, which will be introduced in detail later. Publish resources: The resource files are placed in a Web directory that can be directly accessed through the Web; External resources: The resource files are placed on a different Web server from your Web application; When defining the resource package class, If you specify the yii\web\AssetBundle::sourcePath attribute, it means that any resources using relative paths will be regarded as source resources; if you do not specify this attribute, it means that these resources are published resources (therefore you should specify yii\web\ AssetBundle::basePath and yii\web\AssetBundle::baseUrl let Yii know their location).
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
