当我们做动态页面时,我们会发现一个网站的头部和尾部是相同的,那么我们如何用tp框架来做模板呢 ?
先看一下注意事项:
(1)每个区块由<block></block>
标签组成
(2)子模板中使用extend标签继承模板
(3)注释语法:{/* 注释内容 */ } 或 {// 注释内容 }
一、看一下基本的模板继承
(1)先做出模板页面 Home/View/Index/base.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><block name="title">无标题文档</block></title> <style type="text/css"> #head{100%;height:100px;background-color:red} #footer{width100%;height:50px;background-color:blue} </style> <block name="tou"> </block> </head> <body> <div id="head"> <h1>这是头部</h1> </div> <block name="nr"></block> <div id="footer"> <h1>这是尾部</h1> </div> </body> </html>
(2)做操作方法Home/Controller/IndexController.class.php
<?php namespace HomeController; use ThinkController; class IndexController extends Controller { public function test(){ $this->show(); } public function base(){ $n=M("title"); $arr=$n->select(); $this->assign("arr",$arr); $this->show(); } }
(3)做子页面 Home/View/Index/test.html
<!--调用模板--> <extend name="base" /> <block name="title">子页面</block> <block name="tou"> <style type="text/css"> #nr{100%;height:400px;background-color:yellow} </style> </block> <block name="nr"> <div id="nr"> <h1>这是中间</h1> </div> </block>
效果图(样式有点简单)
注意事项:当模板页面有链接数据库的数据时怎样做
(二)举例:删除和修改
(1)先做显示页面 Home/View/Index/mains.html
<extend name="base" /> <block name="tou"> <style type="text/css"> #nr{100%;height:430px;background-color:yellow} </style> </block> <block name="nr"> <div id="nr"> <table width="100%" border="1"> <tr> <td>代号</td> <td>名称</td> <td>系列</td> <td>油耗</td> <td>价格</td> <td>操作</td> </tr> <foreach name="arr" item="v" > <tr> <td>{$v.code}</td> <td>{$v.name}</td> <td>{$v.brand}</td> <td>{$v.oil}</td> <td>{$v.price}</td> <td><a href="__CONTROLLER__/del/code/{$v.code}" />删除 <a href="__CONTROLLER__/upd/code/{$v.code}" />修改 </td> </tr> </foreach> </table> </div> </block>
(2)做操作方法 Home/Controller/IndexController.class.php
<?php namespace HomeController; use ThinkController; class IndexController extends Controller { public function mains(){ $m=M("car"); $arr=$m->select(); $this->assign("arr",$arr); $this->show(); } public function del($code){ //$code以形参的方式传值 $m=M("car"); if($m->delete($code)){ $url=U("mains"); //第二个参数,表示返回的路径;第三个参数:表示停留时间 $this->success("删除成功",$url); }else{ //不写第二个参数,默认返回上一个页面 $this->error("删除失败"); } } public function upd(){ $m=M("car"); //get方式取到值 $code=$_GET["code"]; $attr=$m->find($code); //注册变量 $this->assign("attr",$attr); if(empty($_POST)){ $this->show(); }else{ //修改 //自动获取表单数据 $m->create(); $m->save(); } } }
(3)修改页面 Home/View/Index/update.html
<extend name="base" /> <block name="tou"> <style type="text/css"> #nr{ 100%;height: 400px;background-color: yellow;} </style> </block> <block name="nr"> <form action="__ACTION__" method="post"> <div><input type="hidden" name="Code" value="{$attr.code}" /></div> <div>名称:<input type="text" name="Name" value="{$attr.name}" /></div> <div>系列:<input type="text" name="Brand" value="{$attr.brand}" /></div> <div>油耗:<input type="text" name="Oil" value="{$attr.oil}" /></div> <div>价格:<input type="text" name="Price" value="{$attr.price}" /></div> <input type="submit" value="修改" /> </form> </block>
看一下效果:
点击删除code=c018
;
再看原来页面c018就没有了
点击修改code=c017
点击修改提交数据,重新刷新页面,会发现油耗和价格已经被修改了