登录注册模块

 

 

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

     1、登录对话框：

<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函数

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

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

    这里主要是实现，当一堆搜索结果展示在用户面前的时候（咱们经过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>标签再结合后台随即数字的生成。

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