表示层是一个系统的“门脸”,不论你的系统设计的多么优秀,代码多么漂亮,系统的可扩展性多么高,但是最终用户接触到的大多是表示层的东西。所以,表示层的优劣对于用户最终对系统的评价至关重要。一般来说,表示层的优劣有一下两个评价指标:
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页面。设计好的页面如下图所示:(时间所迫,制作过于简陋,各位见谅)

首先,我们要在“Web”工程下建立一个新的aspx文件,叫做Login.aspx,这就是管理员登录的Web页面。完成后这个文件的代码如下:
Login.aspx:
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> 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>密 码: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
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> 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
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> 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,在节点下添加如下项:
这里很明显,前一个是系统管理员的用户名,这里设为“admin”,而后一项为密码,设为“123456”
由于一般情况下Web.config是不允许请求的,所以这里不用担心密码泄露。
普通管理员登录的业务已经在业务逻辑层实现了,表示层可以直接调用。而系统管理员的判断、Session的操作检查及页面跳转都放在表示层里。而这一套逻辑,都放在“Submit”这个button控件的Click事件中,具体代码参考如下:
Login.aspx.cs:
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> 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.Page16


{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

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-406680/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/12639172/viewspace-406680/
本文探讨了表示层的重要性及其设计方法,包括界面设计与逻辑实现。强调了美观与易用性两大关键指标,并通过管理员登录功能的实际案例,展示了如何利用ASP.NET进行界面搭建与交互逻辑处理。
1477

被折叠的 条评论
为什么被折叠?



