TP框架---View视图层---模板继承（举例说明）

当我们做动态页面时，我们会发现一个网站的头部和尾部是相同的，那么我们如何用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{width: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 Home\Controller;
use Think\Controller;
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{width: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{width: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 Home\Controller;
use Think\Controller;
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{width: 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

点击修改提交数据，重新刷新页面，会发现油耗和价格已经被修改了

 

posted @ 2017-07-12 10:08  小牛吃青草  阅读(337)  评论(0)    收藏  举报