(菜鸟要飞系列)二，基于Asp.Net MVC5的后台管理系统（实现登陆功能）
现在就开始动工了，因为是连接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">« 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">« 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刚好也上到这一块，两个灵感撞一起了
