(菜鳥要飛系列)二，基於Asp.Net MVC5的后台管理系統（實現登陸功能）

本文轉載自查看原文 2016-03-27 20:28 6607 JqueryUI+EasyUI+EXT+bootstrapUI+Oracle/ ASP.NET MVC5/ 菜鳥要飛系列Asp.Net MVC5+Oracle

現在就開始動工了，因為是連接Oracle數據庫，這里我們就把基本的數據庫操作寫好，首先就是連接字符串

1 <connectionStrings>
2     <add name="OracleConnection" connectionString="Data Source=orcl;Persist Security Info=True;User ID=SYSTEM;Password=111;Provider=OraOLEDB.Oracle.1" />
3 </connectionStrings>

這里我用是Oracle11g 32位，因為我用64位Oracle從來就沒有用Visual Studio2013連上過，發誓以后輕易不用64位的Oracle了，連接字符串自己視情況而定

這里我們新建一個文件夾DBUtility來管理數據庫，這是現在的項目，什么都沒有，我們來慢慢添加，

我們先添加OracleHelper 類

 1 public class OracleHepler
 2     {
 3         public static string connectionString = ConfigurationManager.ConnectionStrings["OracleConnection"].ConnectionString;
 4         private OleDbConnection oleCon = new OleDbConnection();
 5         private DataTable dt;
 6         OleDbDataAdapter oleAdapter;
 7 
 8         public DataTable Connect()
 9         {
10             oleCon.ConnectionString = connectionString;
11             string sql = "select * from tbuser";
12             oleAdapter = new OleDbDataAdapter(sql, oleCon);
13             dt = new DataTable();
14             oleAdapter.Fill(dt);
15             return dt;
16         }
17     }

先試試數據庫有沒有連上，SQL語句奉上,

CREATE TABLE tbUSER
(
  USERID INT NOT NULL CONSTRAINT ck_pkey PRIMARY KEY,
  SEX CHAR(2) NOT NULL CONSTRAINT ck_sex CHECK(SEX='男' or SEX ='女'),
  USERNAME VARCHAR(20) NOT NULL CONSTRAINT ck_name CHECK (length(USERNAME)>=6) UNIQUE,
  DISPLAYNAME VARCHAR(30) NOT NULL CONSTRAINT ck_disname CHECK (length(DISPLAYNAME)>=6) UNIQUE,
  PORTRAIT BLOB,
  AUTHORITY INT not null CONSTRAINT ck_authority check (AUTHORITY=0 or AUTHORITY=1 or AUTHORITY=2 or AUTHORITY=3 or AUTHORITY=4),
  PLACE VARCHAR(40)  DEFAULT '北京',
  JIFEN INT DEFAULT 0,
  USERPASSWORD VARCHAR(40) NOT NULL CONSTRAINT ck_pwd CHECK (length(USERPASSWORD)>=6) 
)


begin
insert into tbUSER values(1,'男','江寒aty_','我是天涯的寒寶寶','',4,'湖南',100,'abc123456');
insert into tbUSER values(2,'女','艾天涯ajh','天涯何處覓芳草','',4,'湖南',100,'abc123456');
insert into tbUSER values(3,'男','紀戎歌grg','我一直在等你','',4,'湖南',100,'abc123456');

insert into tbUSER values(4,'女','姜生jssj','姜還是我最辣','',4,'山東',100,'abc123456');
insert into tbUSER values(5,'男','涼生lsjs_','心在何處js','',4,'山東',100,'abc123456');
insert into tbUSER values(6,'女','小九9999','九九99啾啾','',4,'山西',100,'abc123456');
insert into tbUSER values(7,'男','程天佑cty','生姜花開了_','',4,'上海',100,'abc123456');
end;

HomeController中的Index如下所示，運行，如下所示


表示數據庫連接成功

現在我們要做登陸界面了，首先我們要先將css文件夾復制到Content中，然后再BundleConfig類中，對css文件進行壓縮，js文件同理，復制到Scricpt文件夾中，進行壓縮，

如圖，然后將Login.html里面的html代碼復制到Login.cshtml中

 1 @model MatrixAdmin.Areas.Member.Models.LoginViewModel
 2 
 3 @{
 4     ViewBag.Title = "Login";
 5     Layout = null;
 6 }
 7 
 8 
 9 
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8" />
15     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16     <link rel="stylesheet" href="~/Content/css/bootstrap.min.css" />
17     <link rel="stylesheet" href="~/Content/css/bootstrap-responsive.min.css" />
18     <link rel="stylesheet" href="~/Content/css/matrix-login.css" />
19     <link href="~/Content/font-awesome/css/font-awesome.css" rel="stylesheet" />
20     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
21 </head>
22 <body>
23     <div id="loginbox">
24         <form id="loginform" class="form-vertical" action="http://themedesigner.in/demo/matrix-admin/index.html">
25             <div class="control-group normal_text"> <h3><img src="~/Content/img/logo.png" alt="Logo" /></h3></div>
26             <div class="control-group">
27                 <div class="controls">
28                     <div class="main_input_box">
29                         <span class="add-on bg_lg"><i class="icon-user"></i></span><input type="text" placeholder="Username" />
30                     </div>
31                 </div>
32             </div>
33             <div class="control-group">
34                 <div class="controls">
35                     <div class="main_input_box">
36                         <span class="add-on bg_ly"><i class="icon-lock"></i></span><input type="password" placeholder="Password" />
37                     </div>
38                 </div>
39             </div>
40             <div class="form-actions">
41                 <span class="pull-left"><a href="#" class="flip-link btn btn-info" id="to-recover">Lost password?</a></span>
42                 <span class="pull-right"><a type="submit" href="index.html" class="btn btn-success" /> Login</a></span>
43             </div>
44         </form>
45         <form id="recoverform" action="#" class="form-vertical">
46             <p class="normal_text">Enter your e-mail address below and we will send you instructions how to recover a password.</p>
47 
48             <div class="controls">
49                 <div class="main_input_box">
50                     <span class="add-on bg_lo"><i class="icon-envelope"></i></span><input type="text" placeholder="E-mail address" />
51                 </div>
52             </div>
53 
54             <div class="form-actions">
55                 <span class="pull-left"><a href="#" class="flip-link btn btn-success" id="to-login">&laquo; Back to login</a></span>
56                 <span class="pull-right"><a class="btn btn-info" />Reecover</a></span>
57             </div>
58         </form>
59     </div>
60 
61     <script src="~/Scripts/js/jquery.min.js"></script>
62     <script src="~/Scripts/js/matrix.login.js"></script>
63 </body>
64 </html

顯示如圖,現在重頭戲來了。

先在Matrix.Core項目下新建一個文件夾Types,里面新建一個_Response類，再建一個Manager文件夾，新建UserManager類如圖所示，

namespace Matrix.Core.Types
{

    /// <summary>
    /// Response類是一個常用的方法返回數據類型，包含返回代碼、返回消息和返回數據3個屬性。
    /// </summary>
    public class _Response
    {
        /// <summary>
        /// 返回代碼. 0-失敗，1-成功，其他-具體見方法返回值說明
        /// </summary>
        public int Code { get; set; }

        /// <summary>
        /// 返回消息
        /// </summary>
        public string Message { get; set; }

        /// <summary>
        /// 返回數據
        /// </summary>
        public dynamic Data { get; set; }

        public _Response()
        {
            Code = 0;
        }
    }
}

在UserManager類中寫下如下代碼

 1 /// <summary>
 2         /// 驗證
 3         /// </summary>
 4         /// <param name="accounts">帳號</param>
 5         /// <param name="password">密碼【密文】</param>
 6         /// <returns>Code:1-成功;-1-帳號不存在;2-密碼錯誤</returns>
 7         public static _Response Verify(string accounts, string password)
 8         {
 9             _Response _resp = new _Response();
10             OracleHelper oraHelper = new OracleHelper();
11             DataTable dt = oraHelper.Connect(accounts);
12             if(dt.Rows.Count==0)
13             {
14                 _resp.Code = -1;
15                 return _resp;
16             }
17             else
18             {
19                 if (dt.Rows[0]["userpassword"].ToString() == password)
20                 {
21                     _resp.Code = 1;
22                 }
23                 else
24                     _resp.Code = 2;
25             }
26             return _resp;
27         }
28     }

仔細研究一下還是比較簡單的，就是驗證賬號是否存在，如果不存在返回-1，存在且密碼正確，返回1，否則返回2

在OracleHelper.cs文件中（這里我又將他放回了Matrix.Core下，因為感覺還是這樣好一點），現在已有代碼如下

 1  public class OracleHelper
 2     {
 3         public static string connectionString = ConfigurationManager.ConnectionStrings["OracleConnection"].ConnectionString;
 4         private OleDbConnection oleCon = new OleDbConnection();
 5         private DataTable dt;
 6         OleDbDataAdapter oleAdapter;
 7 
 8         public DataTable Connect()
 9         {
10             oleCon.ConnectionString = connectionString;
11             string sql = "select * from tbuser";
12             oleAdapter = new OleDbDataAdapter(sql, oleCon);
13             dt = new DataTable();
14             oleAdapter.Fill(dt);
15             return dt;
16         }
17 
18         public DataTable Connect(string userName)
19         {
20             oleCon.ConnectionString = connectionString;
21             string sql = "select * from tbuser where username='"+userName+"'";
22             oleAdapter = new OleDbDataAdapter(sql, oleCon);
23             dt = new DataTable();
24             oleAdapter.Fill(dt);
25             return dt;
26         }
27        
28     }
29 }

這里我用了方法重載，因為現在還不是太成熟，姑且這么寫，以后我會一步一步修改。

在MatrixAdmin項目上右鍵新建Areas,命名為Member,在Member/Controllers文件夾下新建_HomeController.cs. 添加登陸方法如下

 1 /// 登錄
 2         /// </summary>
 3         /// <returns></returns>
 4         [AllowAnonymous]
 5         public ActionResult Login()
 6         {
 7             return View();
 8         }
 9 
10         [AllowAnonymous]
11         [ValidateAntiForgeryToken]
12         [HttpPost]
13         public ActionResult Login(LoginViewModel loginViewModel)
14         {
15             _Response resp = UserManager.Verify(loginViewModel.Accounts, loginViewModel.Password);
16 
17                 if (resp.Code==-1)
18                 {
19                     Response.Write("<h1><center>該用戶不存在</center></h1>");
20                 }
21                 else if (resp.Code==1)
22                 {
23                     return RedirectToAction("Index", "_Home");
24                 }
25                 else if (resp.Code==2)
26                 {
27                     Response.Write("<h1><center>該用戶密碼輸入錯誤</center></h1>");
28                 }
29             
30             return View(loginViewModel);
31         }
32 
33     }

其中第二個Login方法上面[httppost]是指頁面做出了反應后將作出的反應送回后台，然后在Models文件夾下新建LoginViewModel.cs(這個其實我是先在Login方法之前寫的，只是昨晚學校10點半斷電，就沒能傳上來，今天寫的是昨晚上就寫好的，所以可能有點亂，所以有問題可以留言，也可以加QQ)，代碼如下

放圖是因為不希望大家一個勁兒的復制粘貼，寫代碼和復制代碼的感覺是不一樣的，

Control層和Model層做好了，只剩下View層了，在_HomeController中選中Login方法右鍵添加視圖，Model選LoginViewModel，不用選Layout,點擊確認，這里我直接放代碼了

 1 @model MatrixAdmin.Areas.Member.Models.LoginViewModel
 2 
 3 @{
 4     ViewBag.Title = "Login";
 5     Layout = null;
 6 }
 7 
 8 
 9 
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8" />
15     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16     <link rel="stylesheet" href="~/Content/css/bootstrap.min.css" />
17     <link rel="stylesheet" href="~/Content/css/bootstrap-responsive.min.css" />
18     <link rel="stylesheet" href="~/Content/css/matrix-login.css" />
19     <link href="~/Content/font-awesome/css/font-awesome.css" rel="stylesheet" />
20     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
21 </head>
22 <body>
23     <div id="loginbox">
24         @*<form id="loginform" class="form-vertical" method="post">*@
25         @using (Html.BeginForm())
26         {
27             @Html.AntiForgeryToken()
28             @Html.ValidationSummary(true, "", new { @class = "text-danger" })
29             <div class="control-group normal_text"> <h3><img src="~/Content/img/logo.png" alt="Logo" /></h3></div>
30             <div class="control-group">
31                 <div class="controls">
32                     <div class="main_input_box">
33                         @* <span class="add-on bg_lg"><i class="icon-user"></i></span><input type="text" placeholder="Username" />*@
34                         <span class="add-on bg_lg"><i class="icon-user"></i></span>@Html.EditorFor(model => model.Accounts, new { htmlAttributes = new { @class = "form-control", placeholder = "Username" } })
35                        <br/> @Html.ValidationMessageFor(model => model.Accounts, "", new { @class = "text-danger" })
36                     </div>
37                 </div>
38             </div>
39             <div class="control-group">
40                 <div class="controls">
41                     <div class="main_input_box">
42                         @*<span class="add-on bg_ly"><i class="icon-lock"></i></span>*@@*<input type="password" placeholder="Password" />*@
43                         <span class="add-on bg_ly"><i class="icon-lock"></i></span>@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", placeholder = "Password" } })
44                         <br/>@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
45                     </div>
46                 </div>
47             </div>
48             
49             
50             
51             @*@if (Model.IsVerifyCode)
52             {
53                 <dl>
54                     <dt>驗證碼</dt>
55                     <dd><input type="text" name="verifyCode" autocomplete="off" class="YZM text left" /><img id="verifyImage" style="cursor:hand" title="點擊刷新驗證碼" onclick="this.src='/tool/verifyimage?time=' + new Date()" src="/tool/verifyimage" height="34" class="left" /><div class="clear"></div></dd>
56                 </dl>
57             }*@
58             
59             
60             
61             
62             <div class="form-actions">
63                 <span class="pull-left"><a href="#" class="flip-link btn btn-info" id="to-recover">Lost password?</a></span>
64                 <span class="pull-right"><input type="submit" class="btn btn-success" value="Login" /></span>
65             </div>
66             @*</form>*@
67         }
68         <form id="recoverform" action="#" class="form-vertical">
69             <p class="normal_text">Enter your e-mail address below and we will send you instructions how to recover a password.</p>
70 
71             <div class="controls">
72                 <div class="main_input_box">
73                     <span class="add-on bg_lo"><i class="icon-envelope"></i></span><input type="text" placeholder="E-mail address" />
74                 </div>
75             </div>
76 
77             <div class="form-actions">
78                 <span class="pull-left"><a href="#" class="flip-link btn btn-success" id="to-login">&laquo; Back to login</a></span>
79                 <span class="pull-right"><a class="btn btn-info" />Reecover</a></span>
80             </div>
81         </form>
82     </div>
83 
84     <script src="~/Scripts/js/jquery.min.js"></script>
85     <script src="~/Scripts/js/matrix.login.js"></script>
86 </body>
87 </html

下面就讓我們來測試一下吧，代碼部分我這里全貼出來了，如果你自己寫的有問題，也別着急，剛好給自己思考的時間，我覺的我這個代碼還是比較好理解的
還有，這里代碼我部分借鑒了【洞庭夕照】大哥的代碼，這是個大神級人物，你們可以多去他博客看看，只可惜他全是SqlServer的，Entity Framework
的，不是特別適合我，但是他的代碼特別給人以啟發

這是測試的圖




如果密碼用戶全寫對了，就直接進去了，注意我這里的路徑，http://http://localhost:35271/Member/_Home/Login ,我只是實現登陸這個功能
其實后台換個鏈接也可以進去，這里指明，我怕別人不理解，以為自己搞錯了，我的博客大神可以忽略了，因為我本人也是菜鳥，哈哈，希望大家有所收獲

哦哦，這里給大家看一下我的項目結構

MatrixAdmin才是Asp.Net MVC5的項目，還有MatrixAdmin引用了Matrix.Core項目，這里引用比較簡單，相信你們都會，我就不上圖了


如果還是不行，這里是目前的所有代碼，自行下載，我是Visual Studio 2013 Update5 不知道你的能不能運行 。  MatrixAdmin+Oracle+Asp.Net MVC5實現后台登陸



下一篇是對數據庫中的數據進行增刪改查，剛好這幾天JSP剛好也上到這一塊，兩個靈感撞一起了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 (菜鳥要飛系列)一，基於Asp.Net MVC5的后台管理系統（前言） (菜鳥要飛系列)三，基於Asp.Net MVC5的后台管理系統（用戶的增刪改查功能） (菜鳥要飛系列)四，基於Asp.Net MVC5的后台管理系統（zTree綁定Json數據生成樹） asp.net后台管理系統-登陸模塊-是否自動登陸 asp.net后台管理系統-登陸模塊-路由權限控制_1 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系統（3）-漂亮系統登陸界面 ASP.NET MVC5 + EF6 + LayUI實戰教程，通用后台管理系統框架（3） ASP.NET MVC5+EF6+EasyUI 后台管理系統--系統級模塊功能圖 ASP.NET MVC5+EF6+EasyUI 后台管理系統（69）-微信公眾平台開發-功能概述 ASP.NET MVC5+EF6+EasyUI 后台管理系統（66）-MVC WebApi 用戶驗證 (2)