thinkphp5第36课：模板继承

最新推荐文章于 2023-11-20 17:31:42 发布

李书明

最新推荐文章于 2023-11-20 17:31:42 发布

阅读量673

点赞数 1

分类专栏： thinkphp5.0

本文链接：https://blog.csdn.net/lsmxx/article/details/103021599

版权

thinkphp5.0 专栏收录该内容

43 篇文章 13 订阅

订阅专栏

模板继承

模板继承其实并不难理解，就好比类的继承一样，模板也可以定义一个基础模板（或者是布局），并且其中定义相关的区块（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效果是一样的。

李书明

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
thinkphp5第36课：模板继承

模板继承模板继承其实并不难理解，就好比类的继承一样，模板也可以定义一个基础模板（或者是布局），并且其中定义相关的区块（block），然后继承（extend）该基础模板的子模板中就可以对基础模板中定义的区块进行重载。因此，模板继承的优势其实是设计基础模板中的区块（block）和子模板中替换这些区块。应用场景一般网站后台管理都有如下的布局方式网站的顶部、左侧属...
复制链接

扫一扫