이 글에서는 주로 PHP Yii 프레임워크의 프런트 엔드 리소스 패키지 사용을 소개하고 Yii에서 일반적으로 사용되는 JavaScript 및 CSS 리소스를 나열합니다. 필요한 친구는 이를 참조할 수 있습니다.
Yii의 리소스는 웹 페이지와 관련된 파일입니다. CSS 파일, JavaScript 파일, 그림 또는 비디오 등이 될 수 있습니다. 리소스는 웹에 액세스할 수 있는 디렉터리에 위치하며 웹 서버에서 직접 호출됩니다.
프로그램을 통해 리소스를 자동으로 관리하는 것이 더 좋습니다. 예를 들어, 페이지에서 yiijuiDatePicker 위젯을 사용하면 필요한 CSS 및 JavaScript 파일을 수동으로 찾아 포함하도록 요구하는 대신 자동으로 포함됩니다. 업그레이드 위젯을 추가하면 자동으로 새 버전의 리소스 파일이 사용됩니다. 이 튜토리얼에서는 Yii에서 제공하는 강력한 리소스 관리 기능을 자세히 설명합니다.
Resource package
Yii는 리소스 패키지의 리소스를 관리합니다. 리소스 패키지는 단순히 디렉터리에 있는 리소스 모음입니다. 리소스 패키지가 뷰에 등록되면 웹을 렌더링할 때 패키지에 포함된 리소스가 포함됩니다. 페이지.CSS 및 JavaScript 파일.
리소스 패키지 정의
리소스 패키지는 yiiwebAssetBundle을 상속하는 PHP 클래스로 지정됩니다. 패키지 이름은 리소스 패키지 클래스에서 자동으로 로드될 수 있는 PHP 클래스 이름입니다. 리소스, 리소스에 포함된 CSS 및 JavaScript 파일, 다른 패키지의 종속성.
다음 코드는 기본 애플리케이션 템플릿에서 사용하는 기본 리소스 패키지를 정의합니다.
<?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',
];
}
로그인 후 복사
위와 같이 AppAsset 클래스에서 지정한 리소스 파일은 @webroot 디렉터리에 위치합니다. 리소스 패키지에는 JavaScript 파일이 아닌 CSS 파일 css/site.css가 포함되어 있으며 yiiwebYiiAsset 및 yiibootstrapBootstrapAsset이라는 두 개의 다른 패키지를 사용합니다. yiiwebAssetBundle의 속성에 대한 자세한 내용은 다음과 같습니다.
yiiwebAssetBundle::sourcePath: 루트를 지정합니다. 리소스 파일이 포함된 패키지의 디렉터리. 루트 디렉터리인 경우 웹에서 액세스할 수 없는 경우 이 속성을 설정해야 합니다. 그렇지 않으면 yiiwebAssetBundle::basePath 속성과 yiiwebAssetBundle::baseUrl을 설정해야 합니다. 여기서 경로 별칭을 사용할 수 있습니다.
yiiwebAssetBundle::basePath: 리소스 번들의 리소스 파일을 포함하고 웹에서 액세스할 수 있는 디렉터리를 지정합니다. yiiwebAssetBundle::sourcePath 속성을 지정하면 리소스 관리자가 게시합니다. 패키지의 리소스를 액세스 가능한 웹 액세스로 설정하고 이 속성을 재정의합니다. 리소스 파일이 웹 액세스 가능한 디렉터리에 있는 경우 다시 게시할 필요가 없도록 이 속성을 설정해야 합니다. 여기서 경로 별칭을 사용할 수 있습니다.
yiiwebAssetBundle::baseUrl: yiiwebAssetBundle::basePath 디렉터리에 해당하는 URL을 지정합니다. yiiwebAssetBundle::basePath 속성을 지정하는 경우 리소스 관리자는 이러한 리소스를 게시하고 이 속성을 재정의합니다. 경로 별칭은 여기에서 사용 가능합니다. yiiwebAssetBundle::js: 리소스 번들의 JavaScript 파일을 포함하는 배열입니다. 슬래시 "/"를 디렉터리 구분 기호로 사용해야 합니다. 각 JavaScript 파일은 다음 두 가지 형식 중 하나로 지정할 수 있습니다.
상대 경로 표현 로컬 JavaScript 파일(예: js/main.js)의 경우 파일의 실제 경로 앞에는 yiiwebAssetManager::basePath가 오고 파일의 실제 URL 앞에는 yiiwebAssetManager::baseUrl이 옵니다.
절대 URL 주소는 http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js 또는 //ajax.googleapis.com/과 같은 외부 JavaScript 파일로 표시됩니다. ajax/ libs/jquery/2.1.1/jquery.min.js.
yiiwebAssetBundle::css: 리소스 번들의 JavaScript 파일이 포함된 배열 배열 형식은 yiiwebAssetBundle::js와 동일합니다.
yiiwebAssetBundle::dependents: 이 리소스 번들이 의존하는 다른 리소스 번들 목록입니다(자세한 소개는 다음 두 섹션에서).
yiiwebAssetBundle::jsOptions: yiiwebView::registerJsFile()을 호출하여 번들의 각 JavaScript 파일을 등록할 때 이 메서드에 전달되는 옵션을 지정합니다.
yiiwebAssetBundle::cssOptions: 번들의 각 CSS 파일을 등록하기 위해 yiiwebView::registerCssFile()을 호출할 때 이 메서드에 전달되는 옵션을 지정합니다.
yiiwebAssetBundle::publishOptions: yiiwebAssetManager::publish()를 호출하여 패키지 리소스 파일을 웹 디렉터리에 게시할 때 이 메서드에 전달되는 옵션을 지정합니다. yiiwebAssetBundle::sourcePath 속성이 지정된 경우에만 사용됩니다.
리소스 위치
리소스는 다음과 같이 나눌 수 있습니다.
위치에 따른 소스 리소스: 리소스 파일과 PHP 소스 코드가 함께 배치되며 이러한 소스 리소스를 사용하기 위해 웹에서 직접 액세스할 수 없습니다. 게시된 리소스는 웹에서 액세스할 수 있는 웹 디렉터리에 게시된 리소스가 됩니다. 이 프로세스를 게시 리소스라고 하며 나중에 자세히 소개합니다.
리소스 게시: 리소스 파일은 웹을 통해 직접 액세스할 수 있는 웹 디렉터리에 배치됩니다.
외부 리소스: 리소스 파일은 웹 애플리케이션과 다른 웹 서버에 배치됩니다. yiiwebAssetBundle::sourcePath 속성을 지정하면 상대 경로를 사용하는 모든 리소스가 소스 리소스로 간주됩니다. 이 속성이 지정되지 않으면 해당 리소스가 게시된 리소스라는 의미입니다(따라서 yiiwebAssetBundle::basePath 및 yiiwebAssetBundle::baseUrl). Yii가 자신의 위치를 알 수 있도록 지정해야 합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
