模板继承
模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中 定义相关的区块(block),然后继承(extend)该基础模板的子模板中就可以对基础模板中定义的区块进行 重载。
因此,模板继承的优势其实是设计基础模板中的区块(block)和子模板中替换这些区块。
应用场景
一般网站后台管理都有如下的布局方式
网站的顶部、左侧属于导航(菜单)区,右侧属于内容区。使用后台各个功能模块时,发现顶部和左侧的一般是不变化的,变化的是右侧的内容。
传统的办法 :使用内联框架 iframe 实现 页面的布局。但iframe正在逐步地被淘汰
学习了tp5中的模板继承,我们能很好地解决这一问题。
我们可以把web版的个人简历的后台改造成模板继承的方式,首先要改造的是主框架 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>个人简历后台管理</title>
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/admin/admin.css">
<script src="__STATIC__/layui/layui.js"></script>
<{block name="head"}><{/block}>
</head>
<body class="layui-layout-body" style="background: #f5f5f5">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">个人简历后台管理</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item"><a href="">退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">个人简历</a>
<dl class="layui-nav-child">
<dd><a href="{:url('resume/personinfo')}">基本信息</a></dd>
<dd><a href="{:url('resume/photo')}">个人照片</a></dd>
<dd><a href="{:url('works/index')}">工作经历</a></dd>
<dd><a href="{:url('skill/index')}">专业技能</a></dd>
<dd><a href="{:url('grzp/index')}">个人作品</a></dd>
<dd><a href="">自我评价</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">其它操作</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">安全设置</a></dd>
<dd><a href="javascript:clearcache()" target="frame">清除缓存</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body" style="padding: 15px">
<div class="frame-container">
<{block name="content"}><{/block}>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© wwww.lishuming.top
</div>
</div>
<script>
//JavaScript代码区域
var element,layer,$
layui.use(['element','layer','jquery'], function () {
element = layui.element
,layer = layui.layer
,$ = layui.jquery
});
//清除缓存
function clearcache() {
layer.confirm('是否要清除缓存?', {icon: 3, title:'提示'}, function(index){
$.post('{:url("other/clearcache")}',{},function (ret) {
layer.msg(ret.msg)
})
layer.close(index);
});
}
</script>
<{block name="script"}><{/block}>
</body>
</html>
认真阅读上面的代码,一共有三处使用block:
<{block name="head"}><{/block}><{block name="content"}><{/block}><{block name="script"}><{/block}>说明这三处地方,可以被子模板的内容替换
我们看其中的一个子模板:基本信息
<{extend name="index/index" /}>
<{block name="content"}>
<form class="layui-form form" action="" lay-filter="form">
<h2>个人基本信息</h2>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" value="{$info.name}" lay-verify="required" placeholder="请输入姓名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked>
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="birthday" name="birthday" value="{$info.birthday}"
placeholder="请选择出生日期">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">QQ</label>
<div class="layui-input-block">
<input type="text" name="qq" value="{$info.qq}" lay-verify="required" placeholder="请输入QQ" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="tel" value="{$info.tel}" lay-verify="required" placeholder="请输入电话"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">网站</label>
<div class="layui-input-block">
<input type="text" name="website" value="{$info.website}" lay-verify="required" placeholder="请输入网站地址"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">求职意向</label>
<div class="layui-input-block">
<input type="text" name="qzyx" value="{$info.qzyx}" lay-verify="required" placeholder="请输入求职岗位"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">个人简介</label>
<div class="layui-input-block">
<textarea name="brief" placeholder="请输入内容" class="layui-textarea">{$info.brief}</textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
</div>
</div>
</form>
<{/block}>
<{block name="script"}>
<script>
//Demo
layui.use(['form', 'laydate', 'jquery', 'layer'], function () {
var form = layui.form
, laydate = layui.laydate
, $ = layui.jquery
, layer = layui.layer
laydate.render({
elem: '#birthday'
})
//表单赋值
form.val('form', {
'sex': '{$info.sex}'
})
//监听提交
form.on('submit(*)', function (data) {
$.post("{:url('save_personinfo')}", data.field, function (ret) {
layer.msg(ret.msg)
})
return false;
});
});
</script>
<{/block}>
第一行代码:<{extend name="index/index" /}>
表示继承 父模板:index/index,父模板所在的目录位置关系到name的值
另外,我们会看到 <{block name="content"}> ...... ..... ..... <{/block}>
表示:子模板的内容 会替代父模板的名称相同的 “块”
其它的模块类似,最后网站后台最终呈现的方式和使用iframe效果是一样的。