基于.NET平台的分层架构实战(十一)——表示层的实现
2008-07-21 13:43 T2噬菌体 阅读(8067) 评论(37) 编辑 收藏 举报在这篇文章中,将讨论一下表示层的实现方法。
表示层是一个系统的“门脸”,不论你的系统设计的多么优秀,代码多么漂亮,系统的可扩展性多么高,但是最终用户接触到的大多是表示层的东西。所以,表示层的优劣对于用户最终对系统的评价至关重要。一般来说,表示层的优劣有一下两个评价指标:
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:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
可以看到,在这个文件里,主要是各种页面元素的结构,但是他们的外观却没有定义。我们注意到,在这个文件的开头引用了两个外部的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
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
Login.aspx.css
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
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:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![Creative Commons License](http://i.creativecommons.org/l/by-nc/3.0/88x31.png)
本文基于署名-非商业性使用 3.0许可协议发布,欢迎转载,演绎,但是必须保留本文的署名张洋(包含链接),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系。