tp5 后台开发公共部分的 html 页面分离方法。

最新推荐文章于 2023-12-27 17:41:31 发布

原创最新推荐文章于 2023-12-27 17:41:31 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

未经允许，不可转载 by张小三

文章标签：

#张小三 #tp5 #html

php 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何在后台项目开发中实现HTML页面的模块化分离，通过实例展示如何利用layui框架进行页面布局的拆分与复用，提高代码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发后台项目时，后台界面的导航等等的公共部分都是重复使用的，如果每个页面都要写公共部分的页面布局的话，代码会显得格外臃肿多余。此时，html页面分离引用就显得非常重要。

如下图的后台页面。（黑色部分是页面公用的部分）

接下来进行页面分离：

分析（使用layui基本的后台布局界面做分离例子，如上图的界面）：

layui基本后台的html页面代码的基本结构如下：

<!--   头部  -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>

<!--   文件引入部分  包括css 和 js 文件的引入      -->


<!--   躯干部分，导航部分  -->
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <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="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">

       <!--        内容主体区域           -->
    



    <!--     底部固定区域     -->
</div>
  </div>
  
  <div class="layui-footer">
    
    © layui.com - 底部固定区域
  </div>
</div>
</body>
</html>

在此将此界面分为：头部部分，文件引入部分，躯干（固定导航）部分，内容主体（需要改变）部分、页面底部部分。

建立对应html文件：head.html，files.html，nav.html，内容主体（需要改变）部分不需要创建页面，footer.html

注意：上述的html文件应该放在tp5中view文件夹下，新建文件夹存放起来。并在该文件夹下创建一个基础的html文件，用于页面继承，在此建立的基础继承html文件名为：Base.html 。如下图：

接下来介绍各个文件的代码：

head.html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>{$title}</title><!-- {$title} 在tp的控制器中通过   $this->assign('title',"title名");定义即可    -->

files.html

<link rel="stylesheet" href="__Layui__/css/layui.css">
<link rel="stylesheet" href="__STATIC__/iconfont/logo_icon.css">
<link rel="stylesheet" href="__STATIC__/css/admin/nav.css">

<script src="__STATIC__/layui/jquery.js"></script>
<script src="__Layui__/layui.all.js"></script>

nav.html

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">
          <span class="logoBox" id="logoBox" title="首页">
            <icon class="iconfont icon-cangku zhang_icon-cangku"></icon>
            <span class="SystemStyle">SystemName</span>
          </span>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item"><a href="">控制台</a></li>
          <li class="layui-nav-item"><a href="">商品管理</a></li>
          <li class="layui-nav-item"><a href="">用户</a></li>
          <li class="layui-nav-item">
            <a href="javascript:;">其它系统</a>
            <dl class="layui-nav-child">
              <dd><a href="">邮件管理</a></dd>
              <dd><a href="">消息管理</a></dd>
              <dd><a href="">授权管理</a></dd>
            </dl>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="__STATIC__/images/logo/logo.png" class="layui-nav-img">
              贤心
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">基本资料</a></dd>
              <dd><a href="">安全设置</a></dd>
              <dd><a href="">退出登录</a></dd>
            </dl>
          </li>
          <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="javascript:;">列表一</a></dd>
               <dd><a href="javascript:;">列表二</a></dd>
               <dd><a href="javascript:;">列表三</a></dd>
               <dd><a href="">超链接</a></dd>
             </dl>
           </li>
           <li class="layui-nav-item">
             <a href="javascript:;">解决方案</a>
             <dl class="layui-nav-child">
               <dd><a href="javascript:;">列表一</a></dd>
               <dd><a href="javascript:;">列表二</a></dd>
               <dd><a href="">超链接</a></dd>
             </dl>
           </li> 
            <li class="layui-nav-item">
              <a href="{:url('Partitions/index')}">仓库分区管理</a>
            </li>
            <li class="layui-nav-item">
              <a href="">发布商品</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">

footer.html

       </div>
      </div>

      <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
      </div>
    </div>
</body>
</html>

在Base.html文件中构建html的基本格式。即使用上述的分离出来的文件进行拼接。

拼接后代码如下：

{block name="head"}
    {include file="Public/head"/}  //头部部分
{/block}

{block name="files"}
    {include file="Public/files" /}  //文件引入部分
{/block}

{block name="nav"}
    {include file="Public/nav" /}  //固定部分
{/block}

{block name="contents"}
    主体内容部分   //主图内容部分，因为是变化的部分，不需要引入文件
{/block}

{block name="footer"}
    {include file="Public/footer" /}  //页底固定部分
{/block}
</body>
</html>

使用方法：

在需要使用的页面中继承上面的Base.html文件，若需要对各个部分进行修改的话，直接在当前页面对对应的部分进行修改即可。

继承方法如下：

{extend name="Public:Base"/}//继承Base页面。显示的结果受Base页面的影响。

{block name="files"}
    //同理，若要修改文件导入的部分，即可在此直接引入需要的css或者js文件即可。
{/block}
{block name="contents"}
    //因为主体部分是变化的，所以在这里写主体部分的html代码即可。
{/block}

更多内容:↓↓↓↓ ↓↓↓↓↓↓