yii2 学习历程——搭建平台基础页面
这里以后台模板说明，前台模板的页面导入同理。
1： 导入页面需要的js、css、images文件。
在advanced/backend/web/目录下建立存放这些文件的统一文件夹 这里定义文件名为 static （advanced/backend/web/static/） 。
2： 引入js、css文件 。
修改文件backend/assets/appAsset.php，添加js、css文件，如：
public $css = [ /* BEGIN GLOBAL MANDATORY STYLES */ 'static/css/bootstrap.min.css', 'static/css/bootstrap-responsive.min.css', 'static/css/font-awesome.min.css', 'static/css/style-metro.css', 'static/css/style.css', 'static/css/style-responsive.css', 'static/css/default.css', 'static/css/uniform.default.css', /* END GLOBAL MANDATORY STYLES */ 'static/image/favicon.ico', ]; public $js = [ 'http://stats.g.doubleclick.net/dc.js', 'http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js', 'static/js/jquery-migrate-1.2.1.min.js', 'static/js/jquery-ui-1.10.1.custom.min.js', 'static/js/bootstrap.min.js', 'static/js/excanvas.min.js', 'static/js/respond.min.js', 'static/js/jquery.slimscroll.min.js', 'static/js/jquery.blockui.min.js', 'static/js/jquery.cookie.min.js', 'static/js/jquery.uniform.min.js', 'static/js/jquery.validate.min.js', 'static/js/app.js', 'static/js/index.js', ];
注意： 系统提供的jquery.js和bootstarp.css版本过高，可能导致自己的页面引入的对应文件冲突，在这里可以禁用系统自带的对应文件，修改文件backend/assets/appAsset.php，如下所示：
public $depends = [ 'yii\web\YiiAsset', //将这条注释掉，禁止引入系统的对应文件 'yii\bootstrap\BootstrapAsset', //将这条注释掉，禁止引入系统的对应文件 ];
当然也可以在advanced\backend\config\main.php配置文件中，配置禁用系统默认的css与js文件。在'components'配置选项中加入配置
'assetManager' => [ 'bundles' => [ 'yii\web\JqueryAsset' => [ 'js'=>[] ], 'yii\bootstrap\BootstrapPluginAsset' => [ 'js'=>[] ], 'yii\bootstrap\BootstrapAsset' => [ 'css' => [], ], ], ],
就可以达到相同的目的。
3. 加入页面数据。
修改advanced\backend\views\layouts\main.php文件，首先可以将原来该页面的html元素删除掉，然后复制页面<body></body>部分html内容进去就好了， 页面可能需要加入js代码， 可以这样加入
$this->registerJs("jQuery(document).ready(function() { App.init(); });",View::POS_END);
4： 建立一个测试控制器 CommonController（名字自己定义，文件路径：advanced\backend\controllers\CommonController.php）
<?php
namespace backend\controllers;
use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
// use common\models\LoginForm;
// use yii\filters\VerbFilter;
/**
* Site controller
*/
class CommonController extends Controller
{
public function actionIndex()
{
return $this->render('index');
}
}
5：建立对应的视图文件
建立文件： advanced\backend\views\common\index.php
<?php /* @var $this yii\web\View */ $this->title = '个人休闲管理平台'; ?>
6： 访问对应连接查看效果
http://localhost/mywork/yii2/advanced/backend/web/index.php?r=common/index