基于.NET平台的分层架构实战(十一)—表示层的实现
2009-01-30 15:52
621 查看
在这篇文章中,将讨论一下表示层的实现方法。
表示层是一个系统的“门脸”,不论你的系统设计的多么优秀,代码多么漂亮,系统的可扩展性多么高,但是最终用户接触到的大多是表示层的东西。所以,表示层的优劣对于用户最终对系统的评价至关重要。一般来说,表示层的优劣有一下两个评价指标:
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:
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>
可以看到,在这个文件里,主要是各种页面元素的结构,但是他们的外观却没有定义。我们注意到,在这个文件的开头引用了两个外部的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
}
表示层是一个系统的“门脸”,不论你的系统设计的多么优秀,代码多么漂亮,系统的可扩展性多么高,但是最终用户接触到的大多是表示层的东西。所以,表示层的优劣对于用户最终对系统的评价至关重要。一般来说,表示层的优劣有一下两个评价指标:
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:
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>
可以看到,在这个文件里,主要是各种页面元素的结构,但是他们的外观却没有定义。我们注意到,在这个文件的开头引用了两个外部的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
}
相关文章推荐
- 基于.NET平台的分层架构实战(十一)——表示层的实现
- 基于.NET平台的分层架构实战(十一)——表示层的实现
- 基于.NET平台的分层架构实战(十一)——表示层的实现
- 基于.NET平台的分层架构实战(十一)——表示层的实现
- 基于.NET平台的分层架构实战(十一)——表示层的实现
- 基于.NET平台的分层架构实战(十一)——表示层的实现
- 基于.NET平台的分层架构实战(十一)——表示层的实现
- 基于.NET平台的分层架构实战(五)——接口的设计与实现
- 基于.NET平台的分层架构实战(五)——接口的设计与实现
- 基于.NET平台的分层架构实战(五)——接口的设计与实现
- 基于.NET平台的分层架构实战(七)——数据访问层的第一种实现:Access+SQL
- 基于.NET平台的分层架构实战(七)——数据访问层的第一种实现:Access+SQL
- 基于.NET平台的分层架构实战(八)——数据访问层的第二种实现:SQLServer+存储过程
- 基于.NET平台的分层架构实战(十)——业务逻辑层的实现
- 基于.NET平台的分层架构实战(六)——依赖注入机制及IoC的设计与实现
- 基于.NET平台的分层架构实战(四)——实体类的设计与实现
- 基于.NET平台的分层架构实战(六)——依赖注入机制及IoC的设计与实现
- 基于.NET平台的分层架构实战(七)——数据访问层的第一种实现:Access+SQL
- 基于.NET平台的分层架构实战(五)接口的设计与实现
- 基于.NET平台的分层架构实战(八)—数据访问层的第二种实现:SQLServer+存储过程