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

時間 2019-11-09

標籤菜鳥系列基於 asp.net asp mvc5 mvc 後臺管理系統實現登錄功能欄目 ASP 简体版

原文原文鏈接

如今就開始動工了，由於是鏈接Oracle數據庫，這裏咱們就把基本的數據庫操做寫好，首先就是鏈接字符串css

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了，鏈接字符串本身視狀況而定html

這裏咱們新建一個文件夾DBUtility來管理數據庫，這是如今的項目，什麼都沒有，咱們來慢慢添加，jquery

咱們先添加OracleHelper 類sql

 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

顯示如圖,如今重頭戲來了。bootstrap

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

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類中寫下以下代碼ide

 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，不然返回2post

在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恰好也上到這一塊，兩個靈感撞一塊兒了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。