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错误（页面找不到），如下图所示界面。



仔细观察，发现单击登录请求的页面为：

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，这样不管项目部署的路径如何，程序都不用做任何路径的修改了。

时间： 2024-10-07 23:16:56

3 视图分离的相关文章

记一次数据、逻辑、视图分离的原生JS项目实践

一切的开始源于这篇文章:一句话理解Vue核心内容. 在文章中,作者给出了这样一个思考: 假设现在有一个这样的需求,有一张图片,在被点击时,可以记录下被点击的次数. 这看起来很简单吧, 按照上面提到到开发方式,应该很快就可以搞定. 那么接下来,需求稍微发生了点变动, 要求有两张图片,分别被点击时,可以记录下各自的点击次数.这次似乎也很简单,只需把原先的代码复制粘贴一份就可以了. 那么当这个需求变成五张图片时,你会怎么做? 还是简单复制粘贴吧,这样完全可以完成这个需求,但是你会觉得很别扭,因为你的代

命名空间namespace、smarty使用（视图分离，MVC）、smarty模板语法、smarty缓存、MVC模式

一.命名空间:namespace 命名空间 可以理解为逻辑上的使用,为了防止重名 namespace :关键字 加载:require_once();//加载一次 include_once() 申明命名空间注意:名称空间一定是在最顶部 在他上面不能有任何内容,名称空间申明不能写在类的内部 use App\Stu; 引入,导入 名称空间\引入类名 as:取别名 二.smarty使用 smarty是一个使用php写出来的模板引擎,拥有独立简单的模板语法,它实现了逻辑代码与模板的分离,把原本HTML与P

数据与视图分离2

1.用简单的方式操作table,现在有一个普通的table,比如要编辑某一行数据 1.1获取选中的row 1.2遍历row的cell 1.3将得到的数据赋值给弹出框 1.4保存,上传给服务器 1.5服务器响应完成,重新给row的cell赋值 这个是比较传统的方式,在1.2这一步比较麻烦,因为每获取一个值就需要首先得到一个cell,显得非常臃肿,它可能是这样的 var obj={}; obj.p1=dom1.value; obj.p2=dom2.value; obj.p3=dom3.value;

asp.net 视图引擎归类

1. ASPX View Engine 第一个也是我们最熟悉的---aspx,相信做过WebForm开发对Aspx都比较了解: 小示例: <%@ Control Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" %> <% if(model.Any()) { %> <ul> <% foreach(var p in model){%> <li>

第57课 模型视图设计模式（下）

1. Qt中标准模型定义 (1)预期的模型逻辑结构 (2)代码实现 //main.cpp #include "Widget.h" #include <QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); Widget w; w.show(); return a.exec(); } //Widget.h #ifndef WIDGET_H #define WIDGET_H #in

模型-视图 教程

模型/视图 教程 每一个UI开发者都应该了解Model/View编程,这篇教程的目标就是对这个主题提供一个容易理解的介绍. Table, list and tree 窗口部件都是在图形用户界面中常用的组件.这些窗口部件能够通过两种不同的方式访问他们的数据.传统方式是通过窗口部件的内部容器来存储数据.这种方法很直观,然而在一些大型应用中,通常会引起数据同步问题.第二张方法是Model/View编程,用这种方法窗口部件不需要维护内部的数据容器.他们通过一个标准化的接口访问外部数据,因此避免了数据复制

用 php 实现一个视图组件和模板引擎——基础

只要不是做后端接口开发和一些作为守护进程之类的服务器脚本,大多数时候都是在和浏览器打交道,因此合理组织并展现 html 标签是最为常见的工作.一般大家使用框架时,都会自带有一套视图组件和模板引擎. 我们不讨论这些组件和引擎的好坏.因为这些东西已经经过考验,可以在生产环境下使用.我们现在只是为了学习一些东西,这时候了解一些原理上的可能对以后的帮助更大,如果一些人真的很有时间,利用这些基础知识完全可以写一个自己的组件,即可当做练习,也可以拿去自用. 好了,说这么多,我还是希望很多人明白,视图和模板引

MVC 于三层架构最大的区别，，，（Controller 控制器-MVC为设计视图角度）

转载:http://blog.csdn.net/csh624366188/article/details/7183872 当然啊,你要明白三层架构的MVC的区别和联系: 三层架构是最基本的项目分层结果,而MVC则是三层架构的一个变体,MVC是一种好的开发模式.首先你要明白MVC分别代表的是什么意思.M 即Model(模型层),主要负责出来业务逻辑以及数据库的交互V 即View(视图层),主要用于显示数据和提交数据C 即Controller(控制器),主要是用作捕获请求并控制请求转发 三层:UI

Qt--模式视图设计

一.模型视图设计模式 A.模型视图设计模式1.模型与视图相分离2.模型对外提供标准接口存取数据(不关心数据如何显示)3.视图自定义数据的显示方式(不关系数据如何组织存储)模型视图模式的直观理解模型视图的工作机制1.当数据发生改变时--模型发出信号通知视图2.当用户与视图进行交互时--视图发出信号提供交互信息Qt中的模型类层次结构QAbstractItemModel类为项模型类提供抽象接口.QAbstractItemModel类定义项模型必须使用的标准接口,以便能够与模型/视图体系结构中的其他组件