基于.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页面。设计好的页面如下图所示:(时间所迫,制作过于简陋,各位见谅)

附件: login.jpg



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



Login.aspx:

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

Login.aspx.css

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

2.表示逻辑

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

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



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

  1.       <add key="AdministartorName" value="admin"/>
  2.       <add key="AdministartorPassword" value="123456"/>
复制代码

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

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



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



Login.aspx.cs:

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

你可能感兴趣的:(.net)