基于.NET平台的分层架构实战（十一）——表示层的实现

在这篇文章中，将讨论一下表示层的实现方法。

表示层是一个系统的“门脸”，不论你的系统设计的多么优秀，代码多么漂亮，系统的可扩展性多么高，但是最终用户接触到的大多是表示层的东西。所以， 表示层的优劣对于用户最终对系统的评价至关重要。一般来说，表示层的优劣有一下两个评价指标：

1.美观。即外观设计漂亮，能给人美的感觉。

2.易用。即具有良好的用户体验，用户用起来舒服、顺手。

表示层的设计牵扯到很多非技术性问题，如美工、用户心理学等问题，但是在这篇文章中，将不过多涉及这些问题，一来是我的水平有限，二来是这些内容和 本系列文章的关系不是很密切。这里将主要从技术实现的角度讨论表示层的设计。

一般来说，表示层的职责有以下两点：

1.接受用户的输入。

2.向用户呈现信息。

总体来说，就是与用户的交互。

而表示层的实现技术也是多种多样的，如C/S架构下一般使用Windows窗体技术（甚至是命令行窗体），而B/S架构下主要是使用Web页的形式 实现。而且在Ajax技术出现以后，又分出了同步模型的B/S架构实现和异步模型的B/S架构实现。在这篇文章中，将主要讨论同步模型下B/S架构的表示 层实现，而基于Ajax技术的异步模型将在下一篇中讨论。

另外，提到表示层的实现，大家一定会想到MVC这个词，不错MVC已经成为表示层设计的经典模式。J2EE平台上的Struts和最近微软推出的 ASP.NET MVC都是实现MVC模式的框架。但是为了突出本系列文章的的重点——分层，而且也为了照顾初学者。这里将不设计MVC模式，而是用传统的ASP.NET 编程模型来完成表示层的设计。

一下的所有讨论，将围绕“管理员登录”这个用例展开。下面我们来逐步实现管理员登录的表示层设计。

1.设计界面

为实现这个功能，我们首先要有一个Web页面。设计好的页面如下图所示：（时间所迫，制作过于简陋，各位见谅）

图11.1、管理员登录界面

 

首先，我们要在“Web”工程下建立一个新的aspx文件，叫做Login.aspx，这就是管理员登录的Web页面。完成后这个文件的代码如下：

Login.aspx:

 1 <% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Login.aspx.cs "  Inherits = " Login "   %>
 2
 3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 4
 5 < html  xmlns ="http://www.w3.org/1999/xhtml"   >
 6 < head  runat ="server" >
 7      < title > NGuestBook-管理员登录 </ title >
 8      < link  href ="Styles/Common.css"  rel ="stylesheet"  type ="text/css"   />
 9      < link  href ="Styles/Login.aspx.css"  rel ="stylesheet"  type ="text/css"   />
10 </ head >
11 < body >
12      < form  id ="form1"  runat ="server" >
13      < div  id ="container" >
14          < div  id ="box" >
15              < h1 > NGuestBook管理员登录 </ h1 >
16              < table  id ="forms"  cellpadding ="0"  cellspacing ="0" >
17                  < tr >
18                      < td > 用户名： </ td >
19                      < td >< asp:TextBox  ID ="Name"  TextMode ="SingleLine"  runat ="server" ></ asp:TextBox ></ td >
20                  </ tr >
21                  < tr >
22                      < td > 密 &nbsp;&nbsp;&nbsp;&nbsp; 码： </ td >
23                      < td >< asp:TextBox  ID ="Password"  TextMode ="Password"  runat ="server" ></ asp:TextBox ></ td >
24                  </ tr >
25              </ table >
26              < div  id ="buttons" >
27                  < asp:Button  ID ="Submit"  runat ="server"  Text ="登录"  OnClick ="Submit_Click"   />
28                  < asp:Button  ID ="Cancel"  runat ="server"  Text ="重填"  OnClick ="Cancel_Click"   />
29              </ div >
30          </ div >
31      </ div >
32      </ form >
33 </ body >
34 </ html >
35

 

可以看到，在这个文件里，主要是各种页面元素的结构，但是他们的外观却没有定义。我们注意到，在这个文件的开头引用了两个外部的CSS文件，那里才 是定义外观的地方。其中Common.css是全局通用外观，而Login.aspx.css是这个页面的专用外观。

这是我提倡的一种表示层设计的方法。即将结构与表现分离，其思想很类似目前的“标准化网页设计”（有人称之为DIV+CSS布局），其核心思想是一 样的，只不过我这里没那么严格，并且适当的地方可以考虑使用Table布局。我的一般方法是这样的：aspx文件中只存储页面结构，不存在任何与外观有关的代码。在工程中可以有一个专门的文件夹放置CSS文件，除 了通用样式外，每个文件有与自己同名的CSS文件，如Login.asxp配套的就是Login.aspx.css，这样，就可以使得结构与表现相分 离。 

在我的工程中，有一个Styles文件夹，专门存放CSS文件。下面把Common.css和Login.aspx.css文件的代码附上：

Common.css

 1 * { } {
 2     margin : 0 ;
 3     padding : 0 ;
 4 }
 5
 6 h1,h2,h3,h4,h5,h6 { } {
 7     font-size : 12px ;
 8 }
 9
10 #container { } {
11     width : 100% ;
12 }

 

Login.aspx.css

 1 #box { } {
 2     width : 40% ;
 3     margin : 200px auto auto auto ;
 4     border : 3px solid #036 ;
 5 }
 6
 7 h1 { } {
 8     margin : 1px ;
 9     padding : 5px 0 ;
10     font-size : 14px ;
11     color : #FFF ;
12     background : #036 ;
13     text-align : center ;
14 }
15
16 #forms { } {
17     margin : 20px auto ;
18     font-size : 12px ;
19     color : #036 ;
20 }
21
22 #forms input { } {
23     margin : 10px ;
24     border : 0 ;
25     border-bottom : 1px solid #036 ;
26     width : 160px ;
27 }
28
29 #buttons { } {
30     margin-bottom : 20px ;
31     text-align : center ;
32 }
33
34 #buttons input { } {
35     margin : 0 10px ;
36 }

 

2.表示逻辑

页面搞定了，但是要想页面发挥作用，还要有表示逻辑才行。我们登录的表示逻辑是这样的：首先根据用户输入的用户名和密码，检查是否是系统管理员（系 统管理员只有一个，其用户名和密码定义在Web.config中，系统管理员可以添加、修改和删除普通管理员），如果是，则在Session中存储相应信 息，并以系统管理员的身份登录后台管理页面。如果不是，则检查是否是普通管理员，如果是，则将此管理员的信息存储到Session中，以普通管理员身份返 回主页。如果不是，则显示登录失败的提示。

当然，这里身份的控制还需要在后台页面和主页那边有Session检查才能完成。例如，当请求后台页时，要检查Session中相应信息是否完整， 如果不完整则是非法请求，不允许访问此页面。而在主页也是，如果Session相应项中有普通管理员的信息，表明当前用户是管理员，要显示修改、回复、删 除等按钮，否则是游客，则不显示这些按钮。

我们首先要配置系统管理员的用户名和密码，打开Web.config，在<appSettings> 节 点下添加如下项：

<add key="AdministartorName" value="admin"/>
<add key="AdministartorPassword" value="123456"/>

这里很明显，前一个是系统管理员的用户名，这里设为“admin”，而后一项为密码，设为“123456”

由于一般情况下Web.config是不允许请求的，所以这里不用担心密码泄露。

普通管理员登录的业务已经在业务逻辑层实现了，表示层可以直接调用。而系统管理员的判断、Session的操作检查及页面跳转都放在表示层里。而这 一套逻辑，都放在“Submit”这个button控件的Click事件中，具体代码参考如下：

Login.aspx.cs:

 1 using  System;
 2 using  System.Data;
 3 using  System.Configuration;
 4 using  System.Collections;
 5 using  System.Web;
 6 using  System.Web.Security;
 7 using  System.Web.UI;
 8 using  System.Web.UI.WebControls;
 9 using  System.Web.UI.WebControls.WebParts;
10 using  System.Web.UI.HtmlControls;
11 using  NGuestBook.Entity;
12 using  NGuestBook.IBLL;
13 using  NGuestBook.Factory;
14
15 public   partial   class  Login : System.Web.UI.Page
16 {
17      protected   void  Page_Load( object  sender, EventArgs e)
18      {
19
20     }
21      protected   void  Cancel_Click( object  sender, EventArgs e)
22      {
23          this .Name.Text  =   "" ;
24          this .Password.Text  =   "" ;
25     }
26      protected   void  Submit_Click( object  sender, EventArgs e)
27      {
28          string  administratorName  =  ConfigurationManager.AppSettings[ " AdministartorName " ];
29          string  administratorPassword  =  ConfigurationManager.AppSettings[ " AdministartorPassword " ];
30
31          // 如果是系统管理员，则以系统管理员身份登录到后台
32          if  ( this .Name.Text  ==  administratorName  &&   this .Password.Text  ==  administratorPassword)
33          {
34             Session[ " Administrator " ]  =   " Administrator " ;
35             Response.Redirect( " ~/Manage.aspx " );
36              return ;
37         }
38
39          // 判断是否为普通管理员，如果是，则以管理员身份登录到留言本，否则显示登录失败
40         AdminInfo admin  =  BLLFactory.CreateAdminBLL().Login( this .Name.Text,  this .Password.Text);
41          if  (admin  !=   null )
42          {
43             Session[ " Admin " ]  =  admin;
44             Response.Redirect( " ~/Default.aspx " );
45         }
46          else
47          {
48             Response.Redirect( " ~/Error.aspx?errMsg= 登录失败 " );
49         }
50     }
51 }

 

作 者： T2噬菌体
出处： http://leoo2sk.cnblogs.com
本 文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。