31、三層架構、AJAX+FormsAuthentication實現登陸

三層架構

前段時間公司要求修改一個網站，打開后我瘋了，一層沒有都是調用的DB接口，遍地的SQL語句，非常雜亂。

什么是三層架構？

三層架構是將整個項目划分為三個層次：表現層、業務邏輯層、數據訪問層。目的為了高內聚低耦合思想。

三層結構

表現層（UI）：接受用戶請求，數據的返回呈現。

業務邏輯層（BLL ）：用來處理業務邏輯，處理用戶提交的數據。

數據訪問層（DAL）：用來與數據庫進行交互，處理增、刪、改、差。

實體類對象（Model）：用來存儲實體類。

三層關系

UI表現層：接收用戶輸入的數據，並傳遞給業務邏輯層。

BLL業務邏輯層：把接收到的數據傳遞給數據訪問層，並返回結果給UI層。

DAL數據訪問層：負責與數據庫進行交互，並將結果返回給BLL層。

什么時候需要分層？

當項目過大的時候可以分層開發，這樣可以每個人負責的不同，共同進行開發。如果一個項目非常小的話，獨立開發可以不分層。

操作步驟：

1、創建結構

新增三個類庫分別是：BLL、DAL、Model，並建立一個UI層（winform 或 webform 或 MVC項目）設置啟動項為UI層。

這里隨個人喜歡可以再加一個Common層，負責處理其他常用方法。

2、引用關系

DAL要用到Model，BLL要用到DAL、CL和Model，UI要用到BLL、Model和CL。相互引用即可。

實現登陸

登陸是所有系統的入口，相信大家一般都用session，本例使用FormsAuthentication微軟提供的身份認證，存儲在cookie中。

假設有如下管理員表：

mif_id：唯一標識，lever等級，usernmae,psw賬號密碼，trueName姓名,createTime創建日期，isLock是否鎖定，Power權限。

編寫實體類

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Model
{
    /// <summary>
    /// 管理員實體類
    /// </summary>
    public class ManagerInfo
    {
        /// <summary>
        /// 標識ID
        /// </summary>
        public int mif_id { get; set; }
        /// <summary>
        /// 暫時沒用
        /// </summary>
        public int mif_pid { get; set; }
        /// <summary>
        /// 管理員等級
        /// </summary>
        public int mif_lever { get; set; }
        /// <summary>
        /// 賬號
        /// </summary>
        public string mif_userName { get; set; }
        /// <summary>
        /// 密碼
        /// </summary>
        public string mif_psw { get; set; }
        /// <summary>
        /// 姓名
        /// </summary>
        public string mif_trueName { get; set; }
        /// <summary>
        /// 創建時間
        /// </summary>
        public DateTime mif_createTime { get; set; }
        /// <summary>
        /// 是否鎖定
        /// </summary>
        public bool mif_isLock { get; set; }
        /// <summary>
        /// 權限
        /// </summary>
        public string mif_power { get; set; }
    }
}

習慣性編寫完Model重新生成下Model層，檢查是否有錯誤。

編寫數據訪問層

引入sqlHelper文件（上一文章中找），修改UI中的web.config添加數據庫連接字符串，並在sqlHelper中修改相關名稱，注意引入System.configuration.dll。

編寫操作ManagerInfo的數據訪問類

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Model;
using System.Data.SqlClient;

namespace DAL
{
    /// <summary>
    /// 管理員數據訪問類
    /// </summary>
    public class ManagerInfoDal
    {
        /// <summary>
        /// 通過賬號查找
        /// </summary>
        /// <param name="userName"></param>
        /// <returns></returns>
        public static ManagerInfo row(string userName)
        {
            string sql = "select mif_id,mif_lever,mif_userName,mif_psw,mif_trueName,mif_createTime,mif_isLock from managerInfo where mif_userName = @uid";
            var v = new ManagerInfo();
            using (var dr = SQLHelper.ExecuteReader(sql, new SqlParameter("@uid", userName)))
            {
                if (dr.Read())
                {
                    v.mif_id = Convert.ToInt32(dr["mif_id"]);
                    v.mif_lever = Convert.ToInt32(dr["mif_lever"]);
                    v.mif_userName = dr["mif_userName"].ToString();
                    v.mif_psw = dr["mif_psw"].ToString();
                    v.mif_trueName = dr["mif_trueName"].ToString();
                    v.mif_createTime = Convert.ToDateTime(dr["mif_createTime"]);
                    v.mif_isLock = Convert.ToBoolean(dr["mif_isLock"]);
                }
            }
            return v;
        }
    }
}

編寫業務邏輯層

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DAL;
using System.Web.Security;
using System.Web;
using CL;
using Model;

namespace BLL
{
    /// <summary>
    /// 管理員
    /// </summary>
    public class ManagerInfoBll
    {
        /// <summary>
        /// 登陸
        /// </summary>
        /// <param name="userName"></param>
        /// <param name="passWord"></param>
        /// <param name="remember">是否記住</param>
        /// <returns></returns>
        public static string login(string userName, string passWord, string remember)
        {
            var v = ManagerInfoDal.row(userName);
            if (v.mif_id > 0)
            {
                if (v.mif_isLock == false)
                {
                    if (v.mif_psw.Equals(createMD5.getMD5(passWord)))
                    {
                        var expires = DateTime.Now.AddMinutes(20);
                        if (remember.Equals("on"))
                        {
                            expires = DateTime.Now.AddDays(8);
                        }
                        //將登陸的用戶存儲在Ticket中
                        var ticket = new FormsAuthenticationTicket(0, userName, DateTime.Now, expires, true, userName);
                        //使用Encrypt方法加密Ticket，並存儲在cookie中
                        var cookie = new HttpCookie(FormsAuthentication.FormsCookieName, FormsAuthentication.Encrypt(ticket));
                        //防止瀏覽器攻擊竊取、偽造cookie信息
                        cookie.HttpOnly = true;
                        cookie.Expires = expires;
                        HttpContext.Current.Response.Cookies.Add(cookie);
                        return "0";
                    }
                    return "1";
                }
                return "2";
            }
            return "3";
        }
        public static ManagerInfo row(string userName)
        {
            return ManagerInfoDal.row(userName);
        }
        /// <summary>
        /// 查詢權限(通過數字查詢名字)
        /// </summary>
        /// <param name="userRole">權限數字</param>
        /// <returns></returns>
        public static string getRole(int userRole)
        {
            switch (userRole)
            {
                case 0:
                    return "編輯";
                case 1:
                    return "管理員";
                case 2:
                    return "系統";
                default:
                    return "暫無";
            }
        }
    }
}

管理員等級這里建議寫成枚舉，本人較懶。

FormsAuthenticationTicket這個東西比傳統的session和cookie的好處就是 可以任意目錄設置他的訪問權限，如果沒有登陸直接跳出到登陸頁面。而不用每個頁面一開始都認證一番~

還有 cookie.HttpOnly 在使用cookie時這一項最好設置一下，否則可能會客戶端模擬cookie進行攻擊。

編寫通用層

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Cryptography;
using System.Text;

namespace CL
{
    public class createMD5
    {
        public static string getMD5(string str)
        {
            var md5 = MD5.Create();
            var buffer = Encoding.Default.GetBytes(str);
            var mdbuffer = md5.ComputeHash(buffer);
            StringBuilder result = new StringBuilder();
            for (int i = 0; i < mdbuffer.Length; i++)
            {
                result.Append(mdbuffer[i].ToString("x2"));
            }
            return result.ToString();
        }
    }
}

生成MD5的代碼，可不用。

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;

namespace CL
{
    public static class createVlidate
    {
        /// <summary>
        /// 字符
        /// </summary>
        /// <param name="len">幾位</param>
        /// <returns></returns>
        public static string validation(int cd)
        {
            var ran = new Random();
            int num, tem;
            string rtuStr = "";
            for (int i = 0; i < cd; i++)
            {
                num = ran.Next();
                if (i % 2 == 1)
                    tem = num % 10 + '0'; //數字
                else
                    tem = num % 26 + 'A'; //字母
                rtuStr += Convert.ToChar(tem).ToString();
            }
            //寫入cookie
            HttpCookie cookie = new HttpCookie("check");
            cookie.Value = rtuStr.ToLower();
            HttpContext.Current.Response.Cookies.Add(cookie);
            return rtuStr;
        }

        /// <summary>
        /// 生成圖像
        /// </summary>
        /// <param name="check">字符</param>
        public static byte[] drawImg(string check)
        {
            Bitmap img = new Bitmap(90, 34);
            var ht = Graphics.FromImage(img);
            ht.Clear(Color.White);
            ht.DrawLine(new Pen(Color.SpringGreen), 1, 1, 90, 34);
            Font font = new Font("微軟雅黑", 20, FontStyle.Bold);
            var jianbian = new LinearGradientBrush(new Rectangle(0, 0, img.Width, img.Height), Color.Teal, Color.Snow, 2f, true);
            ht.DrawString(check, font, jianbian, 0, 0);
            ht.DrawRectangle(new Pen(Color.Aqua), 0, 0, img.Width - 1, img.Height - 1);
            MemoryStream ms = new MemoryStream();
            img.Save(ms, ImageFormat.Jpeg);
            ht.Dispose();
            img.Dispose();
            return ms.ToArray();
        }
    }
}

生成驗證碼的，可自己寫。

編寫展現層

首先需要在web.config中設置authentication節點為Forms驗證模式，然后就可以在目錄中任意設置訪問級別了。

<authentication mode="Forms">
  <forms loginUrl="~/manage/index.html" timeout="10080" defaultUrl="~/manage/Net/" />
</authentication>

登陸頁面代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>漢之殤管理系統</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/admin.css" rel="stylesheet" />
    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="login">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a href="login.html" class="navbar-brand">漢之殤管理系統</a>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="ts"></div>
                <h4 class="page-header">登陸</h4>
                <div class="form-group has-feedback">
                    <label class="sr-only" for="userName">賬號</label>
                    <input type="text" id="userName" class="form-control" placeholder="賬號" maxlength="50" autofocus />
                    <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback">
                    <label class="sr-only" for="passWord">密碼</label>
                    <input type="password" id="passWord" class="form-control" maxlength="50" placeholder="密碼" />
                    <span class="glyphicon glyphicon-lock form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback">
                    <label class="sr-only" for="validateCode">驗證碼</label>
                    <input type="text" id="validateCode" class="form-control validateCode" placeholder="驗證碼" maxlength="4" />
                    <img src="checkLogin/ValidateCode.ashx" id="img" onclick="changeCode()" class="validateImg">
                    <a href="javascript:changeCode()">看不清，換一張</a>
                </div>
                <div class="form-group">
                    <input type="checkbox" id="remember" checked="checked" /> <span class="form-control-static">記住我 </span>
                    <button id="submit" type="button" class="btn btn-primary col-xs-offset-4" style="width:40%">登錄</button>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <p class="navbar-text">&copy; 2015 漢之殤 版權所有</p>
            </div>
        </div>
    </nav>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/status.js"></script>
    <script src="js/login.js"></script>
</body>
</html>

驗證碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using CL;

namespace UI.manage.checkLogin
{
    /// <summary>
    /// ValidateCode 的摘要說明
    /// </summary>
    public class ValidateCode : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "image/jpeg";

            var check = createVlidate.validation(4);
            byte[] buffer = createVlidate.drawImg(check);

            context.Response.BinaryWrite(buffer);
        }

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

登陸用的JS

$(function () {
    $.get("checkLogin/Validate.ashx?rand=" + Math.random(0, 1), function (data) {
        if (data == "0") {
            location.href="/manage/Net/"
        }
    });

    if (top.location != self.location) {
        top.location = self.location;
    }

    var lj = window.location.toString();
    if (lj.lastIndexOf("?") != -1) {
        status("info", "請先登錄！");
        $("#userName").focus();
    }

    $(".login").height(document.documentElement.clientHeight);
    document.onkeydown = function (e) {
        var ev = document.all ? window.event : e;
        if (ev.keyCode == 13) {
            $("#submit").click();
        }
    }
});
$("#submit").click(function () {
    //$("#submit").attr("disabled", "true");
    var userName = $("#userName").val();
    var passWord = $("#passWord").val();
    var validateCode = $("#validateCode").val();
    var remember = $("#remember:checked").val();
    if (userName != "") {
        if (passWord != "") {
            if (validateCode != "") {
                if (validateCode.toLowerCase() == getCode()) {
                    $.post("checkLogin/Validate.ashx", { userName: userName, passWord: passWord, remember: remember }, function (data) {
                        changeCode();
                        if (data == "0") {
                            location.href = "Net/";
                        } else if (data == "1") {
                            status("no", "登陸失敗，密碼錯誤！");
                            $("#passWord").focus();
                            return false;
                        } else if (data == "2") {
                            status("no", "登陸失敗，賬號已被禁止登陸！");
                            $("#userName").focus();
                            return false;
                        } else {
                            status("no", "登陸失敗，賬號不存在！");
                            $("#userName").focus();
                            return false;
                        }
                    });
                    return false;
                }
                status("no", "驗證碼不正確！");
                $("#validateCode").focus();
                return false;
            }
            status("info", "請輸入驗證碼！");
            $("#validateCode").focus();
            return false;
        }
        status("info", "請輸入您的密碼！");
        $("#passWord").focus();
        return false;
    }
    status("info", "請輸入您的賬號！");
    $("#userName").focus();
    return false;
});
function changeCode() {
    $("#img").attr("src", $("#img").attr("src") + "?");
}
function getCode() {
    var cookies = document.cookie.split(";");
    for (var i = 0; i < cookies.length; i++) {
        var validate = cookies[i].split("=");
        if (validate[0].replace(/(^\s*)|(\s*$)/g, "") == "check") {
            return validate[1].replace(/(^\s*)|(\s*$)/g, "");
        }
    }
}

驗證的一般處理程序

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

namespace UI.manage.checkLogin
{
    /// <summary>
    /// Validate 的摘要說明
    /// </summary>
    public class Validate : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            var userName = context.Request["userName"];
            var passWord = context.Request["passWord"];
            var remember = context.Request["remember"] == null ? "" : context.Request["remember"];
            if (!string.IsNullOrEmpty(userName) && !string.IsNullOrEmpty(passWord))
            {
                var result = BLL.ManagerInfoBll.login(userName, passWord, remember);
                context.Response.Write(result);
            }
            else
            {
                if (context.Request.IsAuthenticated)
                {
                    context.Response.Write("0");
                }
            }
        }

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

最后附上效果圖如下：

登陸后使用 Page.User.Identity.Name 獲取用戶標識。

如下：

獲取信息及退出登陸如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using BLL;
using Model;

namespace UI.manage.Net
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                var userName = Page.User.Identity.Name;
                int roleId = ManagerInfoBll.row(userName).mif_lever;

                this.userId.InnerText = userName;
                this.userRole.InnerText = ManagerInfoBll.getRole(roleId);
            }

            var logout = Request["logout"];
            if (!string.IsNullOrEmpty(logout))
            {
                FormsAuthentication.SignOut();
                Response.Redirect("../index.html");
            }
        }
    }
}

最后 在禁止匿名訪問的目錄下 新增一個web.config 內容如下

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <deny users="?"/>
    </authorization>
  </system.web>
</configuration>

這樣，當記住憑證后直接訪問登陸或者該目錄都可以直接跳轉，如果點擊退出或過期后，則自動跳出到登陸頁面中。至此大功告成~