3 视图分离

Posted 2020-07-23 河职院杨浪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3 视图分离相关的知识，希望对你有一定的参考价值。

在讲解session和kookie的应用之前，我们必须将代码进行适当的分离。如果把页面的html与php写在一起，那么就表示1个文件由2个人负责（网页设计师负责html代码，程序员负责php代码），若这2个人同时更新文件，则会造成混乱，为了方便管理，一般会把视图（前端html）分开放置，并由php加载。
这样我们通过浏览器访问的是php文件，html文件由php文件负责加载。

1 创建文件夹

回到我们的wlvsoft项目，由于现在都是针对后台编写功能，因此在wlvsoft目录下创建admin文件夹，将resource资源文件夹和相关文件放入admin中，并创建protected文件夹存放功能模块，目录结构如下图所示。

目录结构

在上图中，在protected文件夹下有三个文件夹，其中：

controller文件夹用来存放需要保护的PHP文件，目前我们仅仅有admin模块。
lib文件夹用来存放公共函数。
template文件夹用来存放html文件，目前也仅仅有admin功能模块。

接着，将login.html放入template/admin文件夹中，login.php放入controlle/admin文件夹中。然后通过：http://localhost/wlvsoft/admin/protected/template/admin/login.html 访问登陆界面，将会看到下图所示界面。

登录界面

应用于login.html界面的css、javascript和图片显示都没有效果，前面我们移动了resource文件夹，css、javascript和图片就存放在这里。因此我们初步判断是由于resource移动造成css、javascript和图片定位错误。修改login.html中的css、javascript、图片引用代码，如代码清单1所示。
代码清单1：login.html

……
<head>
……
<!-- Reset Stylesheet -->
<link rel="stylesheet" href="/wlvsoft/admin/resources/css/reset.css" type="text/css" media="screen" />
<!-- Main Stylesheet -->
<link rel="stylesheet" href="/wlvsoft/admin/resources/css/style.css" type="text/css" media="screen" />
……
<link rel="stylesheet" href="/wlvsoft/admin/resources/css/invalid.css" type="text/css" media="screen" />
<!--  Javascripts -->
<!-- jQuery -->
<script type="text/javascript" src="/wlvsoft/admin/resources/scripts/jquery-1.3.2.min.js"></script>
<!-- jQuery Configuration -->
<script type="text/javascript" src="/wlvsoft/admin/resources/scripts/simpla.jquery.configuration.js">
</script>
<!-- Facebox jQuery Plugin -->
<script type="text/javascript" src="/wlvsoft/admin/resources/scripts/facebox.js"></script>
<!-- jQuery WYSIWYG Plugin -->
<script type="text/javascript" src="/wlvsoft/admin/resources/scripts/jquery.wysiwyg.js"></script>
</head>
<body id="login">
<div id="login-wrapper" class="png_bg">
  <div id="login-top">
    <h1>Simpla Admin</h1>
    <!-- Logo (221px width) -->
<a href="http://www.865171.cn">
<img id="logo" src="/wlvsoft/admin/resources/images/logo.png" alt="Simpla Admin logo" />
</a>
 </div>
……

刷新浏览，登陆界面恢复原来的效果。但是输入用户名和密码登录，将会提示404错误（页面找不到），如下图所示界面。

404错误

仔细观察，发现单击登录请求的页面为：
http://localhost/wlvsoft/admin/protected/template/admin/login.php
也就说，单击登录时，提交的login.php页面会在当前目录中寻找，如如果寻找不到，提示404错误信息。前面我们将login.php移到controlle/admin文件夹中，因此，需要修改login.html页面form表单中的数据，如代码清单2所示。
代码清单2：login.html

……
<form action="/wlvsoft/admin/protected/controller/admin/login.php" method="post">
……

继续登录，将会调用login.php中的代码验证用户信息，如果输入正确，将会看到404错误。
查看浏览器路径，还是文件路径问题，开始的时候我们将index.html放入admin文件夹中，因此，验证跳转页面需要修改路径，如代码清单3所示。
代码清单3：login.php

//如果存在用户，跳转到后台首页面
    if($row){
        $url = "http://localhost/wlvsoft/admin/index.html";
        echo "<script language='javascript' type='text/javascript'>";
        echo "alert('登陆中...');";
        echo "window.location.href='{$url}'";
        echo "</script>";
    }
    else{
        $url = "http://localhost/wlvsoft/admin/protected/template/admin/login.html";
        echo "<script language='javascript' type='text/javascript'>";
        echo "alert('用户名或密码错误！');";
        echo "window.location.href='{$url}'";
        echo "</script>";
    }

注意，如果登陆成功，但是跳转的页面不对的话，很大可能是firefox缓存在作怪，清理一下缓存重新登陆就可以了。

2 加载视图

前面我们一直在浏览器中访问html文件，视图分离技术要求html页面由php文件加载。因此修改login.php代码，如代码清单4所示。
代码清单4：login.php

<?php
    ……
    include("D:/software/xampp/htdocs/wlvsoft/admin/protected/template/admin/login.html");
?>

当我们通过：http://localhost/wlvsoft/admin/protected/controller/admin/login.php
访问login.php文件的时候，将会显示登录界面。虽然我们没有直接访问login.html文件，但是却可以通过PHP的include嵌入视图来达到显示网页效果。

3 初始化文件

不知道大家有没有注意到login.html引入资源文件的一串路径？如果我将resource文件夹再一次移动位置，你会怎么做？继续修改login.html中的资源引用，还是像我一样将电脑关闭、睡觉。
我们希望这些路径应该像常量一样，在需要的地方拿来用，修改的时候只需修改一次，所有调用常量的地方都能跟着改变。下面是网页编程需要了解的定义：

常量：只要在定义值的时候定义常量的值（只能定义一次），任何时候不可修改（指不能在程序执行期间修改），为了区分常量与变量，常量的名字规范统一使用大写，而且不加$。
绝对路径：把地址写全，如：include(“D:/software/xampp/htdocs/wlvsoft/admin/protected/template/admin/login.html”);
相对路径：相对当前文件的路径，以这个的所在位置为中心，如:/wlvsoft/admin/resources/scripts/facebox.js

一般来说，将常量的定义域赋值统一放到一个文件中管理，在protected\\lib文件夹中创建init.php文件，如代码清单5所示。
代码清单5：init.php

<?php
    //定义常量，存放管理员文件夹路径
    define("BASE_URL", "http://localhost/wlvsoft/admin/");
?>

代码清单5中定义一个全局变量：BASE_URL，值为：http://localhost/wlvsoft/admin。下面如何在login.html页面中应用init.php文件呢？
还记得前面我们是如何在login.php中用include导入login.html吧。修改login.php代码，如代码清单6所示。
代码清单6：login.php

<?php
    ……
    //导入init文件
    include("D:/software/xampp/htdocs/wlvsoft/admin/protected/lib/init.php");
    include("D:/software/xampp/htdocs/wlvsoft/admin/protected/template/admin/login.html");
?>

导入初始化文件后，就可以在login.html中使用里面定义的常量BASE_URL了，修改login.html代码，将/wlvsoft/admin/用

……
<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" />
<link rel="stylesheet" href="<?php echo BASE_URL ?>resources/css/invalid.css" type="text/css" media="screen" />
<!—Javascripts -->
<!-- jQuery -->
<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>
</head>
<body id="login">
<div id="login-wrapper" class="png_bg">
  <div id="login-top">
    <h1>Simpla Admin</h1>
    <!-- Logo (221px width) -->
<a href="http://www.865171.cn">
<img id="logo" src="<?php echo BASE_URL ?>resources/images/logo.png"
alt="Simpla Admin logo" />
</a>
 </div>
……

4 魔术常量

前面虽然解决了login.html中引用路径的问题，但是include导入路径的问题却还没有解决。如果我们的web项目部署的路径有所改动，那么include中的绝对路径也要跟着修改。为了解决include导入路径的问题，我们分析代码清单4中的代码，发现当web项目重新部署时，include包含的文件容易发生改变的路径为：D:/software/xampp/htdocs/wlvsoft/，即当前web项目的根目录。我们希望有一种动态获取当前项目路径的方法，好在PHP提供了魔术常量。
可以通过调用系统方法dirname(FILE)来获取文件当前目录，其中FILE 表示魔术常量。为了获取web项目的根目录，我们在根目录wlvsoft/下创建admin.php，如代码清单8所示。
代码清单8：admin.php

<?php

    //定义出一个“系统根路径”的常量
    //__FILE__表示文件所在绝对位置，即D:/software/xampp/htdocs/wlvsoft/cms/admin.php
    //dirname(__FILE__)表示文件所在目录，即D:/software/xampp/htdocs/wlvsoft
    define("ROOT", dirname(__FILE__));  //  __XXX__ : 魔术常量

    echo(ROOT);
?>

在浏览器中访问此文件，将会看到此文件的绝对路径，如下图所示。

访问绝对路径

通过运行可以知道，dirname(FILE)获取的是访问文件的绝对路径，这样我们就可以使用ROOT常量替换掉容易发生变化的路径：D:/software/xampp/htdocs/wlvsoft/了。
修改wlvsoft/下的admin.php，让其负责初始化工作，并跳转到login.php页面，如代码清单9所示。
代码清单9：admin.php

<?php

    //定义出一个“系统根路径”的常量
    //__FILE__表示文件所在绝对位置，即D:/software/xampp/htdocs/wlvsoft/cms/admin.php
    //dirname(__FILE__)表示文件所在目录，即D:/software/xampp/htdocs/wlvsoft
    define("ROOT", dirname(__FILE__));  //  __XXX__ : 魔术常量
    //加载初始化
    include(ROOT . "/admin/protected/lib/init.php");    
    //加载login.php
    include(ROOT . "/admin/protected/controller/admin/login.php");  
?>

既然在admin.php中包含了init.php初始化文件，那么在login.php中就可以将导入初始化文件语句去掉，如代码清单10所示。
代码清单10：login.php

<?php
    ……
    //导入init文件,admin.php中导入，这里注释掉
    //include("D:/software/xampp/htdocs/wlvsoft/admin/protected/lib/init.php");
    include(ROOT . "/admin/protected/template/admin/login.html");
?>

包含login.html的时候，我们使用了全局变量ROOT，这样不管项目部署的路径如何，程序都不用做任何路径的修改了。

以上是关于3 视图分离的主要内容，如果未能解决你的问题，请参考以下文章

CI框架3.x 之实现前后端分离

python基础:os模块分离扩展名

MVVM：GUI 和 ViewModel 之间的真正分离

android如何跨片段分离/附加保留视图状态

在分离的视图控制器上呈现视图控制器

有没有办法将视图与视图模型分离，如下所示？