yii2-view
相关内容:
- https://haobing.wang/yii2-form/
- https://haobing.wang/yii2-grid/
- https://haobing.wang/yii2-asset/
- https://haobing.wang/yii2-html/
layout
一个完成的 layout(布局)示例:
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<div class="container">
<?= $content ?>
</div>
</div>
<footer class="footer"><div class="container"></div></footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Reusing views via partials
https://github.com/samdark/yii2-cookbook/blob/master/book/reusing-views-via-partials.md
Assets
http://haobing.wang/yii2-asset/
安全
不要相信用户的提供的数据,过滤输入,转义输出
视图安全,转义输出
当创建生成HTML页面的视图时,在显示之前将用户输入数据进行转码和过滤非常重要, 否则,你的应用可能会被 跨站脚本(XSS) 攻击。
显示纯文本 yii\helpers\Html::encode()
要显示纯文本,先调用 yii\helpers\Html::encode() 进行转码, 例如如下代码将用户名在显示前先转码:
<?php
use yii\helpers\Html;
?>
<div class="username">
<?= Html::encode($user->name) ?>
</div>
htmlspecialchars
— 将特殊字符转换为 HTML 实体。
字符 | 转换为 HTML 实体 | 说明 |
---|---|---|
& | & | |
< | < | |
> | > | |
" | " | ENT_NOQUOTES |
' | ' | ENT_QUOTES |
常量名称 | 描述 |
---|---|
ENT_QUOTES | 既转换双引号也转换单引号 |
ENT_SUBSTITUTE | 替换无效的代码单元序列为 Unicode 代替符(Replacement Character), U+FFFD (UTF-8) 或者 `�` (其他),而不是返回空字符串。 |
// 既转换双引号也转换单引号
htmlspecialchars($content, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8', $doubleEncode);
显示HTML内容 yii\helpers\HtmlPurifier::process()
使用第三方库:HTMLPurifier
要显示HTML内容,先调用 yii\helpers\HtmlPurifier 过滤内容, 例如如下代码将提交内容在显示前先过滤:
<?php
use yii\helpers\HtmlPurifier;
?>
<div class="post">
<?= HtmlPurifier::process($post->text) ?>
</div>
参考文档:
- http://php.net/manual/zh/function.htmlentities.php
- http://php.net/manual/zh/function.htmlspecialchars.php
- http://htmlpurifier.org/
按需加载 JavaScript
<?php
// 注入js文件
$this->registerJsFile('@web/js/order_step1.js');
// 注入js代码块
$script = <<<JS
$("input.address").click(function(){
var addressid = $(this).val();
$("input[name=addressid]").val(addressid);
});
JS;
$this->registerJs($script);
?>
按需加载 CSS
// 注入css文件
$this->registerCssFile('/admin/css/compiled/user-list.css');
// 注入css代码块
$style = <<<CSS
.span8 div{ display:inline; }
.help-block-error { color:red; display:inline; }
CSS;
$this->registerCss($style);
ActiveForm
http://haobing.wang/yii2-form/
Yii 2.0 How to generate form without <div class=“form-group”>
?
订制 form 表单的 filed,可以参考 ActiveField
中的 public 属性,设定值。
客户端验证
widgets\ActiveForm
的属性 enableClientScript
默认为 true,即执行客户端验证。如果需要禁用,需要在创建表单时设置:
$form = ActiveForm::begin([
'enableClientScript' => false,
'options' => [
'class' => 'form-horizontal',
'id' => 'product'
]
]);
显示验证错误
<?php $form = ActiveForm::begin(); ?>
<?= $form->errorSummary($model); ?>
<?php ActiveForm::end(); ?>
自定义 template
- radioList 的 template 要在 radioList() 中传入。
- 一般字段的 tepalte 要在 filed() 中传入。
echo $form->field($model, 'time')->inline()
->radioList(['','',''],['template' => '{label}<div class="col-sm-10">{input}</div>'])->label('时间:<span class="required">*</span>',['class' => 'col-sm-2 control-label']);
echo $form->field($model, 'mobile',['template' => '{label}<div class="col-sm-4">{input}</div>'])
->textInput(['class' => 'form-control col-sm-4'])->label('手机:<span class="required">*</span>',['class' => 'col-sm-2 control-label']);
显示数据(Dispaly Data)
- yii\data\Pagination.php
- yii\data\Sort.php
- yii\data\DataProviderInterface.php
- yii\data\BaseDataProvider.php
- yii\data\ActiveDataProvider.php
- yii\data\ArrayDataProvider.php
- yii\data\SqlDataProvider.php
- yii\data\BaseDataProvider.php
显示数据的常见任务是分页(Pagination)
和排序(Sort)
。
Data providers are components that sort and paginate data, and provide them to widgets such as [[\yii\grid\GridView]], [[\yii\widgets\ListView]].
Data Widgets
- DetailView,显示单一 model 数据详情。
- ListView,显示 data provider 提供的数据,
每个 model 用指定的 view file 来渲染
。提供pagination
、sort
、filter
特性,用户显示
数据。 - GridView
数据库关联的下拉菜单
<?php
use yii\helpers\ArrayHelper;
use app\models\Product;
?>
<?=
$form->field($model, 'parent_id')
->dropDownList(
ArrayHelper::map(Product::find()->asArray()->all(), 'parent_id', 'name')
)
?>
TreeGrid:无限分类的树形图
yii2-treegrid,使用要点:
- 不支持 Pagination
- 不支持 SearchModel
[
'class' => 'yii\grid\ActionColumn',
// 修复 TreeGrid 与 ActionColumn 配合使用 id 不正确的问题
'urlCreator' => function($action, $model, $key, $index) {
return Url::to([$action,'id'=>$model->not_id]);
},
],
从 view 向 layout 传值
通常需要将 title 和 content 传
在 view 中定义值:
<?php
$this->title = '标题名称';
$this->params['htmlClass'] = 'page-home';
$this->params['bodyClass'] = 'body-home';
?>
在 layout 中使用值:
<?php echo $this->params['htmlClass']?>
<?php echo $this->params['bodyClass']?>
layout 中有两个预定义变量:
/* @var $this \yii\web\View */
/* @var $content string */
我们自定义的变量通过 yii\base\View::$params
传递。
将 template 集成为 theme
搜索关键词: convert tempate to theme yii2
css 中图片的路径应该为相对路径。
assest
|--css/index.css
|--img/a.png
则 css/index.css 中引用图片:background: url("../img/a.png") no-repeat;
Theme
'basePath' => '@web/themes/v1/assets',
'baseUrl' => '@web/themes/v1/assets',