第13讲 网站后台用户登录网页制作

《动态网站交互技术》教学单元设计方案

主要教学内容

本次任务是制作网站后台用户登录网页，以防止未授权用户登录网站后台。为了增加网站的安全性，登录表单要求输入验证码。

用户登录模块是网站建设最基本的功能之一。完成本次任务需要做以下几项工作：

①首先要在网站数据库中创建管理员表，表中有用户登录账号和密码等用户相关信息。

②登录页面需要有输入用户账号和密码的文本框。当用户输入正确的用户账号和密码后才可以进入网站后台管理页面，否则提示用户输入的账号或密码有误。

③显示验证码和输入验证码的文本框。本次任务采用第三方的验证控件Authcode控件，该验证控件使用简单，外观漂亮，不需要编写复杂的代码即可实现验证功能。

④从AdminLogin.aspx页面转到adminIndex.aspx使用到Response对象

1、 AdminLogin.aspx页面主要控件及其用途

AdminLogin.aspx页面用到的控件的属性设置及其用途

2、数据库设计

Admin管理员表的设置

3、 AdminLogin.aspx页面效果图

网站后台用户登录页面效果图如下：

4、 AdminLogin.aspx网页制作

1、在网站后台管理文件夹Admin中新建一个adminLogin.aspx文件，插入一个4行2列的表格，按图2所示制作表单。设置账号文本框ID为txtZhangHao，密码文本框ID为txtMiMa。

2、从工具箱将RequiredFieldValidator验证控件拖放到账号和密码文本框右边，并设置该控件的ErrorMessage和ControlToValidate属性。密码验证参考账号验证设置。（更多验证控件详细使用，参阅https://www.360docs.net/doc/d07834585.html,/JiaoXueRenWu.aspx?kechengbieming2=dwjs&mokuaiID=6&renwuxuhao=1）

3、安装验证码控件，验证码控件文件是Vincent.AutoAuthCode.dll，安装好该控件后工具箱显示该控件如图4。（注：从本教程提供的参考网站bin文件夹复制该文件到自己的网站bin文件夹，然后参考项目2的安装分页扩展控件的方法安装该控件）

4、将验证码控件拖放到用户登录表单的验证码行右边单元格。

5、adminLogin.aspx.cs文件代码如下：

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class admin_adminLogin : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnLogin_Click(object sender, EventArgs e)

{

if (!AuthCode1.IsMatch) //如果验证码不正确

{

Response.Write("");

}

else

{

string sqlCmd = "select * from admin where 账号='"+ txtZhangHao.Text + "' and 密码='"+ txtMiMa.Text + "'";

DataSet myDataSet = DbHelperOleDb.GetDataSet(sqlCmd);

if (myDataSet.Tables[0].Rows.Count > 0)

{

DbHelperOleDb.CloseDb();

Response.Redirect("adminIndex.aspx");

}

else

{

Response.Write("账号或密码错误！");

}

}

}

}

btnLogin_Click( ) 程序设计流程图

btnLogin_Click( )方法代码注释：

① if (!AuthCode1.IsMatch) //如果验证码不正确 ② Response.Write(" "); //向客户端输出变量数据或字符串

//显示对话框，对话框的文字是“您输入的验证码不正确，请重新输入！”

③ Response.Write(""); //即在页面弹出内容为“您输入的验证码不正确，请重新输入！”的对话框 ④ myDataSet.Tables[0].Rows.Count //即Tables 里存在的行数

if (myDataSet.Tables[0].Rows.Count > 0) //表示select * from admin where 账号='" + txtZhangHao.Text + "' and 密码='" + txtMiMa.Text + "'" 查询到admin 表里有该用户，即用户输入的账号和密码正确 ⑤ Response.Redirect("adminIndex.aspx"); //从当前网页转到adminIndex.aspx 网页。 ⑥ Response.Write("账号或密码错误！"); //在当前页面输出"账号或密码错误！"信息。

否

5、课内练习

1、模仿支付宝登录网页界面制作一个包含会员登录的动态网页。