ASP.NET中使用Entity Framework開發登陸注冊Demo

這裡更多的是當作随身筆記使用，記錄一下學到的知識，以便淡忘的時候能快速回顧

目前步驟是該項目的第一部分

第一部分（目前）

第二部分

大完結版本

直接上步驟，有類似的開發登陸注冊也可以參考。

登陸注冊的話，肯定要用到的就是Users表的注冊和登入

先示範一下怎麼通過資料庫添加EF

如果已經完成EF添加資料庫，點選跳到下一步

右鍵建立項，找到ADO.NET實體資料模型，點選下一步

選擇第一個，來自資料庫的EF設計器，

（如果想通過代碼，建構資料庫的話，選擇第三個Code First模型）

先建立連接配接，在選擇下一步

選好資料庫選好伺服器

選擇你需要的表，點選完成

已完成EF添加資料庫

建構一個BLL層，主要是注冊和登入有關資料庫的代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Cryptography;
using System.Text;
using System.Web;
using WebApplication1.DAL;

namespace WebApplication1.BLL
{
    public class UserService
    {
    //注冊代碼
        public static bool register(string Id, string Pwd, string name, string phone)
        {
            Pwd = PasswordEncryption(Pwd);
            using (OLMSDBEntities db = new OLMSDBEntities())
            {
                Users users = db.Users.Add(new Users
                {
                    LoginId = Id,
                    LoginPwd = Pwd,
                    UserName = name,
                    RoleId = 2,
                    Phone = phone,
                    DateCreated = DateTime.Now,
                    UserStatus = 1

                });
                if (db.SaveChanges() > 0)
                {
                    return true;
                }
                return false;
            }
        }
        //登入代碼
        public static Users Login(string loginId, string loginPwd)
        {
            loginPwd = PasswordEncryption(loginPwd);
            using (OLMSDBEntities db = new OLMSDBEntities())
            {
                Users users = db.Users.FirstOrDefault(u => u.LoginId == loginId
                && u.LoginPwd == loginPwd);
                return users;
            }
        }
        private static string PasswordEncryption(string pwd)
        { //建立SHA1加密算法對象 
            SHA1 sha1 = SHA1.Create(); //将原始密碼轉換為位元組數組 
            byte[] originalPwd = Encoding.UTF8.GetBytes(pwd); //執行加密 
            byte[] encryPwd = sha1.ComputeHash(originalPwd); //将加密後的位元組數組轉換為大寫字元串 
            return string.Join("", encryPwd.Select(b => string.Format("{0:x2}", b)).ToArray()).ToUpper();
        }
    }

}
           

這裡附上驗證碼的頁面， 不需要的自行跳過

右鍵添加建立項，選擇一般處理程式，點選完成即可

下面時handler的代碼

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.SessionState;

namespace WebApplication1
{
    /// <summary>
    /// Handler1 的摘要說明
    /// </summary>
    public class Handler1 : IHttpHandler, IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            //選取的顔色
            Color[] colors = { Color.White };
            //通過Bitmap構造Image
            Image img = new Bitmap(100, 60);
            //Graphics繪畫Image
            Graphics graphics = Graphics.FromImage(img);

            Random random = new Random(DateTime.Now.Millisecond);
            //驗證碼的四位數
            int charNum1 = random.Next('0', '9' + 1);
            int charNum2 = random.Next('0', '9' + 1);
            int charNum3 = random.Next('0', '9' + 1);
            int charNum4 = random.Next('0', '9' + 1);
            //把生成的随機數變成字元串，通過char進行轉換
            string validCode = string.Format($"{(char)charNum1}{(char)charNum2}{(char)charNum3}{(char)charNum4}");
            //放進Session進行存儲，記得繼承接口，否則瘋狂報空指針
            context.Session["verification_Code"] = validCode;
            //字型的大小和類别
            Font font = new Font("宋體", 24);
            //随機的顔色
            Brush brush1 = new SolidBrush(colors[random.Next(0, colors.Length - 1)]);
            //DrawString的四個參數，第一個是要寫的字元，第二個是字型，第三個是顔色，第四個是坐标x,y
            graphics.DrawString(((char)charNum1).ToString(), font, brush1, 7, -3);
            Brush brush2 = new SolidBrush(colors[random.Next(0, colors.Length - 1)]);
            graphics.DrawString(((char)charNum2).ToString(), font, brush2, 26, -9);
            Brush brush3 = new SolidBrush(colors[random.Next(0, colors.Length - 1)]);
            graphics.DrawString(((char)charNum3).ToString(), font, brush3, 50, 0);
            Brush brush4 = new SolidBrush(colors[random.Next(0, colors.Length - 1)]);
            graphics.DrawString(((char)charNum4).ToString(), font, brush4, 70, -7);
            //儲存，格式
            context.Response.ContentType = "image/jpeg";
            img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
            //釋放資源
            graphics.Dispose();
            img.Dispose(); 
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
           

驗證碼的handler已完成

然後就是一個登入的頁面Login.aspx

這裡添加的css就不給予了，頁面可自行調

我這裡有一個驗證碼的圖檔，如果沒做上面的驗證碼，請自行把驗證碼跳過

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebApplication1.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="Assets/css/login.css" rel="stylesheet" />
    <link href="Assets/css/animate.min.css" rel="stylesheet" />
    <link href="Assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="Assets/css/grids-responsive-min.css" rel="stylesheet" />
    <link href="Assets/css/input.css" rel="stylesheet" />
    <link href="Assets/css/main.css" rel="stylesheet" />
    <link href="Assets/css/pure-min.css" rel="stylesheet" />
    <link href="Assets/css/shop.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

        <div class="login-container pure-g">
            <div class="pure-u-md-3-4">
            </div>
            <div class="pure-u-md-1-4">
                <h4>線上音樂商店</h4>
                <asp:Panel ID="login" runat="server">
                    <div class="pure-u-1 pure-u-md-2-3">
                        登入賬号  
                    <br />
                        <asp:TextBox ID="login_id" runat="server"></asp:TextBox> 
                    </div>
                    <div class="pure-u-1 pure-u-md-2-3">
                        登入密碼
                     
                    <br />
                        <asp:TextBox ID="login_pwd" TextMode="Password" runat="server"></asp:TextBox> 
                    </div>

                    <div class="pure-u-1 pure-u-md-2-3">
                        驗證碼
                    
                     
                    <br />
                               <asp:TextBox ID="login_Code"  runat="server"></asp:TextBox> 
                 
                    </div>
					 <%--驗證碼的地方，一定要注意路徑--%>
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Handler1.ashx"  onclick="this.src=this.src+1" Width="100" Height="40"/>
                   
                </asp:Panel>
                <%--注冊--%>
                <asp:Panel ID="rex" runat="server" CssClass="">
                    <div class="pure-u-1 pure-u-md-2-3">
                        登入賬号  
                    <br />
                        
                        <asp:TextBox ID="reg_id" runat="server"></asp:TextBox> 
                    </div>
                    <div class="pure-u-1 pure-u-md-2-3">
                        登入密碼
                     
                    <br /><asp:TextBox ID="reg_pwd" runat="server" TextMode="Password"></asp:TextBox> 
                    </div>
                    <div class="pure-u-1 pure-u-md-2-3">
                        确認密碼
                     
                    <br />
                        <asp:TextBox ID="reg_pwd2" runat="server" TextMode="Password"></asp:TextBox> 
                    </div>
                    <div class="pure-u-1 pure-u-md-2-3">
                        使用者姓名  
                    <br />
                       <asp:TextBox ID="reg_Name" runat="server"></asp:TextBox> 
                    </div>
                    <div class="pure-u-1 pure-u-md-2-3">
                        聯系電話  
                    <br />
                       <asp:TextBox ID="reg_Phone" runat="server" TextMode="Phone"></asp:TextBox> 
                    </div>
                </asp:Panel>
                 <div>
                        <asp:Button ID="btnLogin" CssClass="pure-button  button-default pure-button-primary" runat="server" Text="登入" OnClick="btnLogin_Click" />


                        <asp:Button ID="btnReg" CssClass="pure-button  button-default " runat="server" Text="注冊" OnClick="btnReg_Click" />
                    </div>
            </div>

        </div>


    </form>
</body>
</html>

           

頁面的背景代碼，我頁面用了panel，所有要分開顯示，

兩個panel的名稱叫login和rex

//這裡的管理者頁面和使用者頁面我就不做了，可以自己根據需要做一下，注意路徑啊

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WebApplication1.BLL;
using WebApplication1.DAL;

namespace WebApplication1
{
    public partial class Login : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                login.Visible = true;
                rex.Visible = false;
            }
        }

        protected void btnLogin_Click(object sender, EventArgs e)
        {
            if (login.Visible)
            {
                string loginId = login_id.Text;
                string loginPwd = login_pwd.Text;
                string loginCode = login_Code.Text;
                //這裡是我驗證碼存入的時候的verification_Code，取出的時候需要用存入時的單詞
                string snCode = Session["verification_Code"] as String;
                //先判斷是不是驗證碼相同
                if (loginCode == snCode)
                {
                //這裡時BLL的登入代碼
                    Users users = UserService.Login(loginId, loginPwd);
                    if (users != null)
                    {
                    //看看是不是管理者，管理者的RoleId為1
                    //這兩個頁面我就不做了，自己做，稍微區分一下，主要是管理者和使用者登入的不是一個頁面
                        Session["user"] = users;
                        if (users.RoleId == 1)
                        {
                            Response.Redirect("~/Admin/Orders.aspx");
                        } else
                        {
                            Response.Redirect("~/User/WebForm1.aspx");
                        }
                    }
                    else
                    {
                        Response.Write("<script language='javascript'>");
                        Response.Write("alert('錯誤提示，賬号或密碼錯誤。單擊“确定”傳回網站。');");
                        Response.Write("</script>");

                    }
                }

            } else
            {
                login.Visible = true;
                rex.Visible = false;
            }
        }

        protected void btnReg_Click(object sender, EventArgs e)
        {
            if (rex.Visible)
            {
                string id = reg_id.Text;
                string pwd = reg_pwd.Text;
                string name = reg_Name.Text;
                string phone = reg_Phone.Text;
                bool bools = UserService.register(id, pwd, name, phone);
                if (bools)
                {
                //這裡用js是因為，Response的Redirect會覆寫掉Write的方法
                    string strUrl = "<script>alert('添加成功');window.location.href='Login.aspx'</script>";
                    Response.Write(strUrl);
                    //Response.Write("<script language='javascript'>");
                    //Response.Write("alert('添加成功');");
                    //Response.Write("</script>");
                    //Response.Redirect("Login.aspx");
                }
                else
                {
                    Response.Write("<script language='javascript'>");
                    Response.Write("alert('添加失敗');");
                    Response.Write("</script>");

                } 
               
            }
            else
            {
                login.Visible = false;
                rex.Visible = true;
            }
        }
    }
}
           

效果圖：

注冊

點選注冊，自動跳轉到登入

點選登入