登陆注册模块

来源：互联网发布：mac没有芒果tv 编辑：程序博客网时间：2024/05/30 23:23

我要完成一个添加登陆模块的任务，小编人仍然是菜鸟，所以我借鉴了百度的登陆模块，试图做出一个类似于百度那样的登陆模式。百度登陆模块有以下几个特点需要我学习，通过学习列出我的需求。第一，当点击“登陆”时，会弹出一个对话框实现登陆，它屏蔽了主页。第二，该对话框要有一些登陆的基本要素，例如：输入用户名，密码，验证码，错误提示等等。第三，点击“登陆”button后，登陆的信息会在网页右上角保存，并实现登出的功能。第四，实现后台数据库的查询用户信息，插入用户搜索信息，插入用户注册信息等功能。接下来我将依次实现这几个需求和在我在实现中遇到的技术难题，虽然做出来的页面外观并不是很好，但是基本功能还是齐全的。

一、登陆对话框：

<div id="Login1" style = "text-align:right;">    <div style="float:right"><a href="Register.aspx" id="Register1" style="display:block">注册</a></div>    <div style="float:right">&nbsp</div>    <div style="float:right"><a href="Login.aspx" id="linkLogin" style="display:block">登陆</a></div>
</div>

以上的代码可以看到两个<a>标签和中间的三个<div>标签来实现外观效果，<div>的效果是使得“登陆”和“注册”居右，这种方法是比较笨的，当然还有其他的方法，我感觉最正规的方法是使用<table>标签，但是小编不会用，只能采用一些肮脏却适合自己的方法，使用<a>标签可以说是个习惯吧。具体的外观结果如下：

是不是有点像百度嘞~~小编自满下。。。。其实还没加粗。。

说白了以上的代码只是实现了超链接，还未实现对话框的需求，下面我利用JQUI中的dialog来实现该效果，要用JQUI需要一些添加一些JQ的头文件（可以这么说吧），头文件怎么加我就不说了，看下面这段代码：

var LoginClick = function (e) {            $("<iframe id='editFrame' src='Login.aspx' scrolling='no' />").dialog({ autoOpen: true, modal: true, resizable: false, width: 300, height: 270, title: "登陆" });            e.preventDefault();        };        var insertClick = function (e) {            $("<iframe id='insertFrame' src='Register.aspx' />").dialog({ autoOpen: true, modal: true, resizable: false, width: 300, height: 300, title: "注册" });            e.preventDefault();        };        $(function () {            $("#linkLogin").click(LoginClick);            $("#Register1").click(insertClick);        });

从以上代码可以看到，我利用JQ的外部插件（UI）dialog实现对话框的弹出效果，但是具体的登陆页面需要利用iframe技术来实现。以上的代码就是为标签<a>添加点击事件。点击“登陆”具体效果如下：

上图其实还包括了iframe的效果，图中的一些Textbox控件，Button控件，验证码图片等等除了那个黄色的东东之外都是iframe的内容，下面介绍利用iframe来实现登陆。
其实对话框dialog中的白色区域可以加入各种东西，具体可以查看该网站http://www.jqui.net/，而我这里插入的是子页。父页是整个页面，而子页就是上图中白色的区域。这里有必要区分父页和子页，因为等下点击登陆按钮后，需要调用父页的JS函数实现网页的跳转（这里是一个关键）。先贴上前台外观的一些重要的代码，白色的区域，也就是需求二，我利用的是C#中的LOGIN控件实现：

<asp:Label ID="ErrorMessages" runat="server" Text="213" Visible="false"></asp:Label><asp:TextBox ID="UserName" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="必须填写用户名。" ToolTip="必须填写用户名" ValidationGroup="Login1">*</asp:RequiredFieldValidator><asp:Image ID="Image1" runat="server" Height="23px" ImageUrl="~/ValidateNum.aspx" style="margin-top: 0px" Width="74px" /><asp:CheckBox ID="RememberMe" runat="server" Text="下次记住我" /><asp:Button ID="LoginButton" runat="server"  Text="登录" ValidationGroup="Login1" onclick="LoginButton_Click" />

可以看到上面有6个控件，需要讲一讲的是RequiredFieldValidator控件，它的作用是保证用户名、密码和验证码必须填写，如果是空，则在它绑定的TextBox控件右边显示一个符号'*'，还有一个比较重要的东西就是Button控件中的ValidationGroup，作用就是触发RequiredFieldValidator控件的验证。接下来看看控件Button的事件，贴上一些重要的代码：

TextBox ValidateTextbox_1 = (TextBox)Login1.FindControl("ValidateTextbox1"); //你会发现如果要为一个控件添加一些按钮，不能直接使用Login1.ValidateTextbox1，而要用以上方法string s = "Data Source=.\\SQLEXPRESS;AttachDbFilename=E:\\search\\modelsearch\\App_Data\\user.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True";        SqlConnection con = new SqlConnection(s);        SqlDataAdapter dap = new SqlDataAdapter("select * from 系统管理员表 where 用户名称='" + Login1.UserName + "'and 密码='" + Login1.Password + "'", con);        DataSet ds = new DataSet();        dap.Fill(ds);     //连接数据库的代码
ValidateNum1 = Session["ValidateNum"].ToString(); //常用Session实现不同aspx页间传值
Page.ClientScript.RegisterStartupScript(this.GetType(), "pop", "ssss()", true);//该方法是用后台C#语言调用前台的JS语言

function ssss() { window.parent.CloseEditPage();
 } //iframe调用父页的js函数

通过以上代码注释可以看到一些我觉得关键的东西。点击登陆成功后，将会在右上角显示登陆的状态，这就实现了需求三，以上的代码也讲到了一些需求四的实现。

二、用户的搜索信息的收集

这里主要是实现，当一堆搜索结果展现在用户面前的时候（我们通过datalist来展现），收集的是用户的搜索输入和用户对搜索结果的选择信息。用户的搜索输入信息的收集较为容易，而用户对搜索结果的选择信息就好像某些电商网站的效果。不过我用的方法是为每个在datalist中显示的items下添加了一个CheckBox。又添加了两个按钮，一个是“选择”，另一个是“确定”。看下面的代码：

<asp:DataList ID="datalist1" RepeatColumns="5" RepeatDirection="Horizontal"                     GridLines="Both" runat="server" BorderWidth="2px">                    <ItemTemplate>                        <table>                              ...                            <tr>                            <td align="center"><asp:CheckBox ID="CheckBox1" runat="server" /> </td>                            </tr>                         </table>                    </ItemTemplate>                    <ItemStyle VerticalAlign="Bottom" /></asp:DataList>

其实为每datalist.items添加CheckBox 就那么简单的一条HTML的代码。下面来看看其后台的代码：

protected void Page_Load(object sender, EventArgs e)    {        string tmp = string.Empty;        tmp = Session["UserName"].ToString();  //页间传值，保存用户名称        this.HiddenField1.Value = tmp;        if (!IsPostBack)   //如果没有该行，你将会发现CheckBox选中却，CheckBox.Checked==false，我没查过为什么，我的感觉是，由于页面刷新导致。        {            interestNum = string.Empty;            ....       }    }

再接下来看看“选择”按钮事件：

    protected void Button1_Click(object sender, EventArgs e)    {        string chooseModel = string.Empty;        foreach(DataListItem it in datalist1.Items){                 //循环所有的datalist的item            CheckBox ck = it.FindControl("CheckBox1") as CheckBox;   //对于每个item都有一个checkbox            Label lk = it.FindControl("Label1") as Label;            //对于每个item都有一个label标签            if (ck.Checked) {                                        //如果被选中                chooseModel = chooseModel + " " + lk.Text + ",";     //保存被选中item的label            }        }        interestNum = interestNum + chooseModel;                     //这里有个关键静态变量interestNum，由于我们的item是分页显示，所以它的作用是保存所有子页面用户的选择信息。    }

再看看“确定”按钮事件：

protected void Button2_Click(object sender, EventArgs e)    {        string tmpUser, tmpF, tmpS, tmpT;        tmpUser = Session["UserName"].ToString();        tmpF = Session["frontView"].ToString();    //保存用户搜索输入        tmpS = Session["sideView"].ToString();        tmpT = Session["topView"].ToString();        string s = "Data Source=.\\SQLEXPRESS;AttachDbFilename=E:\\search\\modelsearch\\App_Data\\user.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True";        SqlConnection con = new SqlConnection(s);        con.Open();        SqlCommand cmd = new SqlCommand("INSERT INTO User_Model(UsNum,ModelNum,FrontView,SideView,TopView) values('" + tmpUser + "','" + interestNum + "','" + tmpF + "','" + tmpS + "','" + tmpT + "')", con);        cmd.ExecuteNonQuery();        con.Close();//如何向数据库插入数据    }

注册的功能类似于登陆，具体我就不写博客了，其实这里面还有超多的细节和功夫，例如用CSS调整格式，Session的clear，还有一些密码安全问题，验证码的实现等等。其实验证码的实现就是一个<img>标签再结合后台随即数字的生成。

以上就是我最近两星期做的东西。仔细看看感觉也没做什么，不过自己能做点东西多少能让我不平静的心平静下来，今天还有好声音哦~~向往事干杯吧~~

0 0