Easyui + MVC 系列教程 第09-17 節 完成登錄 高清錄製

前面八節 在這裏

在接下來的 幾節裏面 我們完成登錄功能 打開頁面 首先進入登錄頁面 只有登錄成功了 才能進入管理頁面

我們添加一個 登錄 頁面 使用easyui 的window 控件

複製代碼
<head runat="server">
    <<span href="tag.php?name=title" onclick="tagshow(event)" class="t_tag">title</span>>Login</title>
    <script src="../../Content/Easyui/<span href="tag.php?name=jquery" onclick="tagshow(event)" class="t_tag">jquery</span>-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="../../Content/Easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/Common/Login.js" type="text/javascript"></script>
</head>
<body>
    <div id="win" class="easyui-window" title="登錄系統" style="width:260px;height:180px;"  data-options="iconCls:'icon-save',modal:true,closable:false,minimizable:false,maximizable:false,collapsible:false,draggable:false,resizable:false">   
        <table style=" padding-top:10px; padding-left:15px;">
            <tr>
                <td>用戶名:</td><td><input id="name" type="text" /></td>
            </tr>
            <tr>
                <td></td><td></td>
            </tr>
            <tr>
                <td>密 碼:</td><td><input id="pwd" type="text" /></td>
            </tr>
            <tr>
                <td></td><td></td>
            </tr>
            <tr>
                <td></td><td><input type="button" onclick="Login();" value="登錄" /></td>
            </tr>
            <tr>
                <td></td><td><label id="showInfo" style=" color:Red"></label></td>
            </tr>
        </table>
    </div> 
    <%--<input type="button" value="有種點我" /> --%>
</body>
複製代碼

修改window的屬性 使得它 不能最小化 最大化 和摺疊

然後 我們開始寫post部分

首先 從前臺到後臺 我們用ajax 異步post

我們添加一個登錄的按鈕 並且有一個點擊的事件

複製代碼
"button" οnclick="Login();"
複製代碼

通過ajax的異步提交

複製代碼
function Login() {
    var name = $('#name').val();
    var pwd = $('#pwd').val();
    //做一層驗證
    if (name == '') {
        alert('用戶名不能爲空!');
    }
    else {
        $.post("/account/DoLogin", { "name": name, "pwd": pwd }, //www.bamn.cn/dologin?name=admin&pwd=sadf
           function (data) {
               if (data == '-2') {
                   //alert('!');
                   $('#showInfo').html("用戶名或者密碼錯誤!");
               }
               else if (data == '-1') {
                   //alert('!');
                   $('#showInfo').html("用戶名爲空!");
               }
               else {
                   $('#showInfo').html("登錄成功!");
                   window.location.href = "/home/index";
               }
           });
    }
}
複製代碼

post 提交給mvc中的action

複製代碼
//asp.net mvc 的登錄action
UserSystem.Business.UserManager userManager = new Business.UserManager();

        public ActionResult DoLogin()
        {
            int res = 0;

            //獲取前臺js傳過來的用戶名和密碼
            string name = Request.Form["name"];
            string pwd = Request.Form["pwd"];

            //後臺的判斷
            if (string.IsNullOrEmpty(name))
            {
                res = -1;
            }
            else
            {
                //去<span href="tag.php?name=%CA%FD%BE%DD%BF%E2" οnclick="tagshow(event)" class="t_tag">數據庫</span>做判斷
               List<UserSystem.Model.UserManager> userList =  userManager.GetModelList(" name = '"+name+"' and pwd = '"+pwd+"'");
               if (userList.Count == 0)
               {
                   res = -2;
               }
               else
               {
                   //登錄成功
                   Session["user"] = userList[0];
               }
                 
            }
            return Content(res.ToString());
        }
複製代碼

講解一下 session的原理機制


以下是視頻下載地址: 百度網盤
第09節 tab動態顯示一個獨立的頁面(從講第八節)

http://pan.baidu.com/share/link?shareid=993959992&uk=3492938099
第10節 登錄窗體 通過ajax 提交給後臺 前端js驗證數據合法性

http://pan.baidu.com/share/link?shareid=997902236&uk=3492938099
第11節 登錄頁面的設計 和windows控件的屬性設計

http://pan.baidu.com/share/link?shareid=1001060000&uk=3492938099
第12節 登錄後臺進行一層過濾sqlite數據庫的創建 和設計 sqlitedeveloper的使用

http://pan.baidu.com/share/link?shareid=1003226698&uk=3492938099
第13節 sqlite數據庫簡單介紹 建管理員表 通過動軟代碼生成 搭建三層

http://pan.baidu.com/share/link?shareid=1005774050&uk=3492938099
第14節 實現登錄 跳轉

http://pan.baidu.com/share/link?shareid=1008142411&uk=3492938099
第15節 完善登錄 Session的使用

http://pan.baidu.com/share/link?shareid=1011124606&uk=3492938099
第16節 完善登錄 Session基礎知識補充

http://pan.baidu.com/share/link?shareid=1013858824&uk=3492938099
第17節 完善登錄 Session基礎知識補充2

http://pan.baidu.com/share/link?shareid=1016355744&uk=3492938099

源碼下載:http://www.bamn.cn/viewthread.php?tid=35&extra=page%3D1&fujian.rar

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章