PHP-smarty技术
引入
解决前端后端代码分离,将php代码和html代码分离的技术。
----------------------------------------------------------------------------------------------------------------------------------------------
简单模拟smarty
// 02.html
<body>
<div>{$title}</div>
<div>{$content}</div>
</body>
// 02.php
<?php
//1、引入迷你smarty类
require "MiniSmarty.class.php";
//2、实例化该对象
$smarty=new MiniSmarty;
$smarty->assign('title','国家开会');
$smarty->assign('content','北京机动车限行');
//3、调用compile方法,传递文件名参数,
//把模板文件中的内部标记替换成PHP标记
$smarty ->compile('02.html');
?>
// MiniSmarty.class.php
class MiniSmarty{
//“编译”模块文件({}标记替换为php标记)
public $tpl_var=array();
function assign($k,$v){
$this->tpl_var[$k]=$v;
}
function compile($tpl){
$cont=file_get_contents($tpl);
$cont=str_replace("{\$","<?php echo \$this->tpl_var['",$cont);
$cont=str_replace("}","'];?>",$cont);
file_put_contents('02.html.php',$cont);
require "02.html.php";
}
}
Smart安装配置
- 将下载后的libs文件夹拷贝到工程目录
- 可以在项目php文件中修改设置
<?php
include "./libs/Smarty.class.php";
$sm=new Smarty;
//配置html中的分隔符
$sm->left_delimiter="<@@@";
$sm->right_delimiter="@@@>";
//配置模板文件,编译文件目录
$sm->setTemplateDir("./View/");
$sm->setCompileDir("./View_c/");
$sm->assign('version','3.1.33');
$sm->assign('cto','jim');
$sm->display('01.html');
三种变量信息使用
- assign变量信息
- 保留变量信息
超级全局数组变量信息,例如:$_GET 、 $_POST、 $_SESSION…
$sm->assign('name',$_GET['name']);
<body>
<h2>保留变量使用</h2>
<div>{$name}</div>
</body>
他可以通过assign的方式,但是由于全局变量作用域大,他可以不需要assign指定,直接通过smarty保留关键字调用($smarty.get.name),比如在模板文件中直接使用:
<body>
<h2>保留变量使用</h2>
<div>名字:{$smarty.get.name}</div>
<div>年龄:{$smarty.get.age}</div>
<div>主机名:{$smarty.const.HOST}</div> // 常量
</body>
- 配置变量信息
模板开发人员可以自定义简单当地配置文件,而不依赖php传递。
配置文件路径:在核心类Smarty.class.php中可以找到成员:setConfigDir
在目录下创建配置文件如下图:
在模板中使用配置变量: - 在模板中包含配置文件:{config_load file=“xxx”}
- 使用方法1:左标记#变量名称#右标记
- 使用方法2:{$smarty.config.变量名}
{config_load file="site.conf"}
<!DOCTYPE html ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h2>配置变量使用</h2>
{#ENGINE#} <br/>
{#VERSION#}<br/>
{#PROGRAM#}<br/>
{$smarty.config.PROGRAM}
</body>
</html>
冲突解决
对于{ }与css 或者js中的 { }有冲突的解决方案:
- 把smarty中的{ }改为其他标识
- 在css或者js中,给{ } 加空格:{空格 空格}
- 常用方式:设置{literal} {/literal}标识,其中内容不被smarty解析。
数组元素访问及foreach遍历
1、索引数组访问
{$数组名[数组下标]}
{$数组名.数组下标}
// php 传递
$smarty->assign('jim','man','programer','php');
// 模板html中引用
<body>
<h2>数组元素使用</h2>
{$user[2]}<br/>
{$user.3}<br/>
</body>
2、关联数组访问
// php 传递
$smarty->assign('user',array('username'=>'jim','sex'=>'man','major'=>'programer','hobby'=>'php'));
// 模板html中引用
<body>
<h2>数组元素使用</h2>
用户名:{$user['username']}<br/>
岗位:{$user.major}<br/>
</body>
3、数组循环foreach
// php 传递
$smarty->assign('info',array('jim','man','major','hobby','php'));
// 模板html中引用
<body>
<h2>数组遍历</h2>
索引数组遍历<br />
{foreach $info as $k=>$v}
{$k}------{$v} <br />
{foreachelse}
数组没有任何元素!<br />
{/foreach}
<hr />
关联数组遍历<br />
// {[email protected]}- 从0开始的序号,[email protected]}:从1开始的序号
{foreach $user as $m=>$n}
{[email protected]}---{[email protected]}---{$m}---{$n} <br />
{foreachelse}
数组没有任何元素!<br />
{/foreach}
数组元素总个数:{[email protected]}
是否遍历出元素:{[email protected]}
</body>
foreach遍历数组内部关键字
值变量@interation ---->从1开始的序号信息
值变量@index --------->从0开始的序号信息
值变量@first --------->判断第一个元素,返回boolean
值变量@last ---------->判断最后一个元素,返回boolean
值变量@total --------->获得数组元素长度(个数)
值变量@show ---------->判断当前数组是否遍历元素出来,返回boolean
分支结构
- 单路分支
{if 条件}
分支逻辑
{/if}
- 双路分支
{if 条件}
{else}
{/if}
- 多路分支
{if 条件}
{elseif 条件}
{elseif 条件}
{else}
{/if}
条件设置:与php完全一致,可以使用比较(><=),逻辑(&& !! !),算术(+-*/) 等各种运算符
复选框,下拉列表,单选按钮应用
- 复选框
//在php文件中传递一个关联数组,键表示复选框的value,值表示外面显示的信息
$smarty->assign('seled',array('a','c')); //选中值
$smarty->assign('outval',array('a'=>'篮球','b'=>'足球','c'=>'保龄球','d'=>'台球'));
// 在模板html中 一行简单的代码即可搞定
<body>
<h2>复选框应用</h2>
爱好:
{html_checkboxes name="hobby" options=$outval selected=$seled separator=" "}
</body>
- 下拉列表
$smarty->assign('area',array('1'=>'中国','2'=>'泰国','3'=>'日本','4'=>'美国'));
<body>
<h2>下拉列表应用</h2>
国家选择:
{html_options name="country" options=$area}
</body>
已有模板与smarty结合
1.模板文件引入css,js,img 文件
路径相对“入口 程序”文件设置
2.设置css样式文件本身的图片路径
路径相对css本身设置
结合具体步骤:
1、把模板复制到View目录
2、复制js,css,img静态资源文件到public指定目录
3、在模板文件中设置路径引入静态资源
4、css文件本身有引入img图片
5、在入口php文件获得变量信息用于模板显示
布局/继承使用(重点)
为了使得许多页面共同头部,脚部开发/维护方便,我们制作一个布局页面,
其他具体业务页面来填充该"布局"页面。
布局继承使用注意点:
1、布局页面可以有许多block,子级页面也可以有许多block,他们通过name属性进行关联
2、子级页面除了extends和block其他内容不给显示
3、布局页面的block可以有默认内容,子级页面不实现就直接显示
4、布局页面的block可以彼此嵌套,子级实现可以有针对性实现。
5、{$smarty.block.child}布局可以调用子级的内容
$smarty.block.parent}子级页面可以调用父级页面内容