1.6 登录与注册模块设计

1.6.1 登录和注册模块概述

登录用户可以进行发帖和回帖,被赋予权限的用户还可以审核帖子、设置精华以及删帖等操作。对于没有账号的用户,系统会提供一个注册用户的页面。如图1.11所示为用户登录页面。图1.12为用户注册页面。

图1.11 登录页面

图1.12 注册页面

1.6.2 登录和注册模块技术分析

实现登录和注册模块时,使用了ASP.NET MVC中的Razor视图引擎,Razor是其中常用的视图引擎之一,视图文件的后缀名为.cshtml文件,它是在MVC3中出现的,语法格式上,与ASPX页面的语法也是有区别,下面对Razor视图引擎中常用的语法标记和一些帮助类进行讲解。

1. @符号标记代码块

@符号是Razor视图引擎的语法标记,它的功能和ASPX页面中的<%%>标记相同,都是用于调用C#指令的。不过,Razor视图引擎的@标记使用起来更加灵活简单,下面将说明@符号的各种用法。

(1)单行代码:使用一个“@”符号作为开始标记并且无结束标记,代码如下:

<span>@DateTime.Now</span>

(2)多行代码:多行代码使用“@{code...}”标记代码块,在大括号内可以编写C#代码,并且可以随时切换C#代码与输出Html标记,代码如下:

(3)输出纯文本:如果在代码块中直接输出纯文本则使用“@:内容...”,这样就可以在不使用Html标签的情况下直接输出文本,代码如下:

(4)输出多行纯文本:如果要输出多行纯文本则使用“<text>”标签,这样就可以更方便的输出多行纯文本,代码如下:

(5)输出连续文本:如果需要在一行文本内容中间输出变量值则使用“@()”标记,这样就可以避免出现文本空格的现象,代码如下:

2. Html帮助器

在设计cshtml页面时我们会用到各种html标签,这些标签通常都是手动构建,例如<a href="">link</a>这样的写法,但在Razor视图引擎中使用HtmlHelper类可以更加方便快速地实现这些标签的定义。所以,在MVC中表单和链接推荐使用Html帮助器实现,其他标签可根据需求选择实现方式。

以下列举几个简单常用的HtmlHelper类扩展方法:

(1)Raw方法:返回非HTML编码的标记,调用方式如下:

@Html.Raw("<font color='red'>颜色</font>")

调用前页面将显示“<font color="red">颜色</font >”。

调用后页面将显示颜色为红色的“颜色”二字。

(2)Encode方法:编码字符串,以防止跨站脚本攻击,调用方式如下:

@Html.Encode("<script type=\"text/javascript\"></script>")

返回编码结果为“<script type="text/javascript"></script>”。

(3)ActionLink方法:生成一个连接到控制器行为的a标签,调用方式如下:

@Html.ActionLink("关于", "About", "Home")

页面生成的a标签格式为“<a href="/Home/About">关于</a>”

(4)BeginForm方法:生成form表单,调用方式如下:

1.6.3 登录和注册模块实现过程

本模块使用的数据表:tb_UsersByCustomer、tb_ZY_Sex

1. 制作登录页面

由于登录按钮被放在了网站公共布局页面中,所以在前台的每个页面中都能随时登录到系统中。那么,如果此时用户是从某一个子版块帖子列表中进行登录系统的,则用户登录后页面还需跳转回上次阅读的页面中,这就需要在登录前先记录最后一次停留的页面。

在设计布局页面时,登录按钮就已经添加到了页面上。再来看一下登录按钮的链接标签:

例程18 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Shared\_LayoutBBSSite.cshtml

   <a href="/Account/Login/@Convert.ToBase64String(System.Text.Encoding
.Default.GetBytes(Request.Url.AbsolutePath))">登录</a>

上面使用Base64将当前页面的路径进行了编码操作,并作为参数传递到登录页面。这样,即可以实现登录后目标页的跳转工作。使用Base64编码主要有两个好处,一是由于当前页面路径也会存在以“/”斜线分割的路径格式,所以会产生歧义性,从而导致无法准确地跳转到登录页。二是在用户的浏览器地址栏中不必将明文路径呈现给用户。

由于登录模块属于用户账户部分,所以,需要新建立一个控制器和对应的视图文件夹来管理用户的登录或注册功能。接下来首先设计登录的页面,在Views文件夹下的Account(如果没有则创建)文件夹内添加一个Login.cshtml视图文件,然后在视图文件内设计页面布局标签。

首先,文件顶部需要引用LoginUsersByCustomerEntity模型用于绑定登录控件。同时,设定登录页面不需要任何布局页面,所以,指定Layout为空,代码如下:

例程19 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Account\Login.cshtml

登录控件使用了Html帮助类进行绑定,其中,Html帮助类中的ValidationMessage方法是在登录失败时,用于提示用户错误消息的方法,代码如下:

例程20 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Account\Login.cshtml

视图完成后,添加对应的控制器和动作用于处理用户请求。在控制器文件夹下建立Account(如果不存在)控制器,然后添加Login方法并指定一个参数,代码如下:

例程21 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\AccountController.cs

当用户单击登录后,对应控制器中的DoLogin方法会执行验证登录逻辑代码,其主要核心代码如下:

例程22 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\AccountController.cs

这是验证登录的核心代码,在得到IsLoginSuccess的值后,按照成功与否选择登录成功的跳转或提示用户错误消息。

2. 制作注册页面

如果用户在登录时发现自己没有可用的账号进行登录,则可以选择注册一个用户。同样,注册用户需要在Account文件夹内添加一个Register.cshtml视图文件,然后在页面中设计布局标签。注册页面的标签格式以及样式基本与登录页面相同,只是用户输入控件要多于登录页面。

下面只列出form内的部分控件标签,其他部分可参见本书资源包文件。

例程23 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Account\Register.cshtml

可以看到,每一个控件的后面都定义了提示信息,因此绑定控件的Html帮助类的方法也不同于登录控件,因为注册控件需要更多的属性和事件,这些事件可以实现当用户单击了控件后,提示用户文本内容的输入标准等信息。

同样,控制器中Action方法是必不可少的,在Register方法中,使用ViewBag动态类型绑定了性别下拉框项,代码如下:

例程24 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\AccountController.cs

当用户单击注册按钮后,会执行Account控制器中的DoRegister方法,代码如下:

例程25 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\AccountController.cs

当用户注册成功后会执行else中的代码,这一部分主要将用户信息保存到了session中,然后执行了页面跳转的过程。