登陸注冊模塊

 

 

    我要完成一個添加登陸模塊的任務，小編人仍然是菜鳥，所以我借鑒了百度的登陸模塊，試圖做出一個類似於百度那樣的登陸模式。百度登陸模塊有以下幾個特點需要我學習，通過學習列出我的需求。第一，當點擊“登陸”時，會彈出一個對話框實現登陸，它屏蔽了主頁。第二，該對話框要有一些登陸的基本要素，例如：輸入用戶名，密碼，驗證碼，錯誤提示等等。第三，點擊“登陸”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>標簽再結合后台隨即數字的生成。

以上就是我最近兩星期做的東西。仔細看看感覺也沒做什么，不過自己能做點東西多少能讓我不平靜的心平靜下來，今天還有好聲音哦~~向往事干杯吧~~