视图分离与模块化-优快云博客

本文链接：https://blog.youkuaiyun.com/gdhyyanglang/article/details/51627621

在网站中，经常将常用的代码做成模块，以方便调用，这样不仅较少了代码量，也易于维护。对于网页，最常被做成模块的代码就是页头和页脚。
分析《3 视图分离》中的index.html代码及页面

首页面

其主要负责信息管理，我们可将其作为新闻模块的首页面进行管理。那么有新的模块增加，就要在controller文件夹下新建新模块【news文件夹】，在template文件夹下新建新模块【news文件夹】。他们主要存储新闻模块的php代码和html代码。此时，项目目录结构如下

目录结构

一般来说，一个页面由三部分构成，页头、页面内容、页脚构成。分解index.html，从中抽取出页头和页脚放入公共模块。
首先，在template文件夹下创建【public文件夹】，并在public文件夹下新建header.html和footer.html，如代码清单1、代码清单2所示。
代码清单1：header.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
……
</head>
<body>
<div id="body-wrapper">
  <!-- Wrapper for the radial gradient background -->
  <div id="sidebar">      
      ……
  </div>
  <!-- End #sidebar -->

代码清单2：footer.html

 <div id="footer"> <small>
     ……
  </div>
  <!-- End #main-content -->
</div>
</body>
<!-- Download From www.exet.tk-->
</html>

然后，将index.html放入template/news文件夹中，此时index.html代码看起来如代码清单3所示。
代码清单3：index.html

  <div id="main-content">
    ……
  <!-- End Notifications -->

此时代码结构如下图所示

目录结构

由于移动了index.html代码，且将index.html代码进行了分割。因此，登录跳转的时候将会提示404错误。
前面提到过，通过浏览器访问的是php文件，html文件由php文件负责加载。这样，我们需要在controller文件夹下的【news模块】新建index.php文件，它负责加载新闻页面的html代码，如代码清单4所示。
代码清单4：index.php

<?php 
    //加载初始化文件（路径初始化等）
    include("D:/software/xampp/htdocs/wlvsoft/admin/protected/lib/init.php");   
    //加载页头header
    include("D:/software/xampp/htdocs/wlvsoft/admin/protected/template/public/header.html");
    //加载页面内容
    include("D:/software/xampp/htdocs/wlvsoft/admin/protected/template/news/index.html");
    //加载页脚footer
    include("D:/software/xampp/htdocs/wlvsoft/admin/protected/template/public/footer.html");
?>

完成index.php之后，还需要修改跳转到index的链接，如代码清单5所示。
代码清单5：login.php

……
if($row){
    $url = "http://localhost/wlvsoft/admin/protected/controller/news/index.php";
    ……
}

首页面

和前面一样，移动了index.html，必然导致css、javascript和图片位置的改变，因此需要修改header.html代码，如代码清单6所示。
代码清单6：header.html

……
<link rel="stylesheet" href="<?php echo BASE_URL ?>resources/css/reset.css" type="text/css" media="screen" />
<!-- Main Stylesheet -->
<link rel="stylesheet" href="<?php echo BASE_URL ?>resources/css/style.css" type="text/css" media="screen" />
<!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
<link rel="stylesheet" href="<?php echo BASE_URL ?>resources/css/invalid.css" type="text/css" media="screen" />
<script type="text/javascript" 
src="<?php echo BASE_URL ?>resources/scripts/jquery-1.3.2.min.js"></script>
<!-- jQuery Configuration -->
<script type="text/javascript" 
src="<?php echo BASE_URL ?>resources/scripts/simpla.jquery.configuration.js"></script>
<!-- Facebox jQuery Plugin -->
<script type="text/javascript" 
src="<?php echo BASE_URL ?>resources/scripts/facebox.js"></script>
<!-- jQuery WYSIWYG Plugin -->
<script type="text/javascript" 
src="<?php echo BASE_URL ?>resources/scripts/jquery.wysiwyg.js"></script>
<!-- jQuery Datepicker Plugin -->
<script type="text/javascript" 
src="<?php echo BASE_URL ?>resources/scripts/jquery.datePicker.js"></script>
<script type="text/javascript" 
src="<?php echo BASE_URL ?>resources/scripts/jquery.date.js"></script>
</head>
<body>
<div id="body-wrapper">
  <!-- Wrapper for the radial gradient background -->
  <div id="sidebar">
    <div id="sidebar-wrapper">
      ……
      <a href="http://www.865171.cn">
<img id="logo" src="<?php echo BASE_URL ?>resources/images/logo.png" alt="Simpla Admin logo" />
</a>
      ……