很不容易，我在这两周为了数据库的课程设计第一次学习到了动态网页的开发。首先是尊重知识，也是为了知识不被忘记，在这里写下这第一篇博客。才疏学浅如果有什么理解错误，多包涵。
首先是环境的配置，我自己使用的是Visual Studio 2022版本，选择ASP.NET Web应用程序（.NET Framework），很遗憾，vs2022版本好像没有能够直接找到我要是使用的架构，所以需要点开ASP.NET和Web开发，加装以前版本。
装好后，选择ASP.NET Web应用程序（.NET Framework）语言是C#语言，选择MVC项目模板，额外选Web窗口，点击创建，需要的项目框架就创建好了。
进入项目后，我想第一件事需要做的应该是链接数据库。连接数据库的方法大概就是在顶部的工具，选择链接数据库，之后，默认数据库，服务器名字就是SQL Server连接时候的一串字符。服务器选好后，点击下方需要连接的数据库，这里你需要提前创建好你在这个项目里需要用到的数据库。测试连接好就可以了。之后在Model文件添加新建项，选择ADO.NET实体数据模型，之后创建连接，选择表选项，创建完成。
这样，先期工作差不多完成。
在我的理解里MVC模型大概是这样的。Controller作为核心控制器出现，里面可以调用相当多的函数如Index，Add等，而视图是作为给用户肉眼能够直观的在浏览器中看的界面出现的。当用户点击按钮或触发某种操作而执行某种函数时如Add（假设在Admin控制器里），那么就会在网页网址跳转到XXXX/Admin/Add，然后每个函数需要一个或者多个的视图（我是这样写的，都会有return View()），这个视图就是网址跳转后显示给用户的东西，大概这个逻辑。然后数据库在MVC模式中大概可以理解成为一个类，其中的属性是表，对于这个类的操作就是对于数据库的修改。
之后首先做的大概是登录界面，首先需要做的是添加一个控制器，在Controller那里加一个空的控制器就可以。我自己对于他的命名是LoginController，之后在controller端最开头写入using 数据库.Models（using 项目名称.Models），并public后写入private dormitoryEntities db = new dormitoryEntities()用来新建数据库的实例化对象。
随后是对于登录逻辑的编写，代码如下：
public ActionResult Index() { return View(); //返回Index的视图 } //实现登录功能 [HttpPost] //一定要注意这个[HttpPost] 这个是前端View向控制器返回数据的形式，声明利用的Post方式返回 public ActionResult Index(String username,String password) //也是Index，是对于上个函数的重载 { if(String.IsNullOrEmpty(username)) { ViewBag.notice = "用户名不能为空"; //输出提示 return View(); //返回Index的视图 } if(String.IsNullOrEmpty(password)) { ViewBag.notice = "密码不能为空"; return View(); } //数据库中查询用户 w_admin admin = db.w_admin.FirstOrDefault(p => p.username == username);
//在数据库中检所w_admin表中username列为username的元组，没有则返回为空，有则将元组进行返回至变量amdin中； System.Web.HttpContext.Current.Session["result"] = admin.nickname; //这一行代码是实现数据在控制器之间的传输，被其他控制器调用 if(admin==null) //未查询到该用户 { ViewBag.notice = "用户不存在"; } else if(admin.password!= password) //密码不正确 { ViewBag.notice = "密码不正确"; } else //密码正确 { if (admin.power == 1) //Sa用户权限跳转 //登陆成功，跳转到后端的管理界面 return Redirect("/Sa/index"); //返回 导向至其他函数路径 else if (admin.power == 2) //普通用户权限跳转 return Redirect("/Admin/Index"); } return View(); }
这个是控制器端，虽然实现了登录的逻辑，但他还需要一个用户可以看到的前端视图用来给用户输入账号、密码，毕竟你不可能指望着用户给你写一个发数据包的脚本让你在后台审核权限对吧。那我们想要创建的前台的视图，首先应该点击侧栏的View在你的Login的文件夹下面添加一个视图。由于我比较菜，并没有学习过前端，审美又不太行，于是就找了个开源的网页的前端代码进行处理自己的登录界面。另外，如果有需要很多网页具有相同的基础视图，比如有个共同格式的边栏，那么可以选择在Views下面添加一个文件夹，在这个文件夹里添加视图。添加好之后想要使用这样的基础视图时，添加视图时，选择带有布局的MVC 5 视图页就可以。 而不需要时选择MVC 5 视图页就可以。
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="~/Content/assets/css/bootstrap-clearmin.min.css"> <link rel="stylesheet" type="text/css" href="~/Content/assets/css/roboto.css"> <link rel="stylesheet" type="text/css" href="~/Content/assets/css/font-awesome.min.css"> <title>宿舍管理系统</title> <style></style> </head> <body class="cm-login"> <div class="text-center" style="padding:90px 0 30px 0;background:#fff;border-bottom:1px solid #ddd"> <h1>宿舍信息管理系统</h1> </div> <div class="col-sm-6 col-md-4 col-lg-3" id="myForm" onsubmit="return checkForm()" style="margin:40px auto; float:none;"> <form method="post" action="/Logic/Index">
@*这里就是将下面直到</form>之间的input作为表单进行提交，提交方式是Post方式，提交给/Logic/Inde即Logic控制器下的Index函数中*@ <div class="col-xs-12"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-fw fa-user"></i></div> <input type="text" name="username" maxlength="16" id="userName" class="form-control" placeholder="Username"> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-fw fa-lock"></i></div> <input type="password" name="password" maxlength="16" id="pwd" class="form-control" placeholder="Password"> </div> </div> </div> <div class="col-xs-6"> <div class="checkbox"><label><input type="checkbox"> 记住密码</label></div> </div><div class="col-xs-6"> <button type="submit" class="btn btn-block btn-primary"> 登录</button>
@*这里是一个按钮，按钮类型为submit，即将表单提交上去*@ </div> <h5 class="col-xs-12" id="notice" style="color:grey;">@ViewBag.notice</h5> </form> </div> <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script> function checkForm() { var userName = $("#userName").val(); if (userName.length < 1) { $("#notice").text("用户名不能为空"); return false; } else if (pwd < 1) { $("#notice").text("密码不能为空"); return false; } } </script> </body> </html>
在代码中有说明具体数据是怎样加入输入框并怎样提交(也不是很具体，只不过大概说明了一下用法)；而script标签是一个功能函数，我没有使用它，想要使用使可以在form标签中加上onsubmit = "checkForm()" ，好像是这样。
这样大概就完成了登录界面，而在登录逻辑的控制器端可以看到登录后跳转到其他界面。
最后实现的是这样的界面。