很不容易,我在这两周为了数据库的课程设计第一次学习到了动态网页的开发。首先是尊重知识,也是为了知识不被忘记,在这里写下这第一篇博客。才疏学浅如果有什么理解错误,多包涵。

首先是环境的配置,我自己使用的是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()" ,好像是这样。

这样大概就完成了登录界面,而在登录逻辑的控制器端可以看到登录后跳转到其他界面。

        

最后实现的是这样的界面。

ASP.NET MVC-动态网页开发-宿舍管理系统的更多相关文章

  1. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  2. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  3. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  4. 在ASP.NET MVC应用中开发插件框架(中英对照)

    [原文] Developing a plugin framework in ASP.NET MVC with medium trust [译文] 在ASP.NET MVC应用中开发一个插件框架 I’v ...

  5. ASP.NET MVC动态加载数据

    ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分:  Source Code 上图中,有一行代码: <tbody ...

  6. 基于ASP.NET MVC的快速开发平台,给你的开发一个加速度!

    基于ASP.NET MVC的快速开发平台,给你的开发一个加速度! bingo炸了 2017/4/6 11:07:21 阅读(37) 评论(0) 现在的人做事情都讲究效率,最好能达到事半功倍那种效果,软 ...

  7. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发

    进行本文之前需要在数据库用户表里面增加一条用户数据,直接手动添加即可,未安全考虑密码一定要使用Md5加密后的,这里提供666666的Md5密文为(c831b04de153469d),本文完成登录模块的 ...

  8. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

    /****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...

  9. ASP.NET MVC动态生成网站菜单及子菜单

    在开发ASP.NET MVC网站时,Insus.NET想实现动态产生网站的主菜单及子菜单. 你需要在网站管理后台管理此2张表(Menu,SubMenu)的信息,添加,删除,编辑,更新等. Sequen ...

随机推荐

  1. XCTF练习题---MISC---Test-flag-please-ignore

    XCTF练习题---MISC---Test-flag-please-ignore flag:flag{hello_world} 解题步骤: 1.观察题目,下载附件 2.打开文件,发现又是一个没有名字的 ...

  2. 【译】defer-panic-and-recover

    Go 有通用的控制流程:if,for,switch,goto.它也有go语句用于让代码运行在单独的协程.这里我将讨论一些不常见的问题:defer,panic 和 recover. defer语句将函数 ...

  3. Resource wordnet not found. Please use the NLTK Downloader to obtain the resource:

    第一次使用nltk的时候,出现了这样的错误: from nltk.stem.wordnet import WordNetLemmatizer lemmatizer = WordNetLemmatize ...

  4. 基于SqlSugar的开发框架循序渐进介绍(3)-- 实现代码生成工具Database2Sharp的整合开发

    我喜欢在一个项目开发模式成熟的时候,使用代码生成工具Database2Sharp来配套相关的代码生成,对于我介绍的基于SqlSugar的开发框架,从整体架构确定下来后,我就着手为它们量身定做相关的代码 ...

  5. 设置VisualStudio以管理员身份运行

    以vs2013为例 vs右键属性 ----- 找到目标位置如下 "C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\ID ...

  6. 106_Power Pivot之HR入离调转、在职、离职率相关指标

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 之前有帮公司HR做了些员工入离调转.在职.人工成本分析等(体量:4000人左右).在和其他朋友交流的时候得知,貌 ...

  7. STM32 CubeMx使用教程

    一.STM32CubeMX 简介 STM32CubeMX 是 ST 意法半导体近几年来大力推荐的STM32 芯片图形化配置工具,目的就是为了方便开发者, 允许用户使用图形化向导生成C 初始化代码,可以 ...

  8. 【Java】在IDEA中将Javafx项目打包成为可运行的.jar文件

    在使用Javafx制作一个图形化界面程序的时候,我遇到了打包文件的难题. 按照网上给出的解决方案构建出来的jar文件总是没有办法运行. 以下是我最终的解决方案. 我使用的IDE是IntelliJ ID ...

  9. 逻辑运算符——JavaSE基础

    逻辑运算符 运算符 说明 逻辑与 &( 与) 两个操作数为true,结果才是true,否则是false 逻辑或 |(或) 两个操作数有一个是true,结果就是true 短路与 &&am ...

  10. 开源的.Net 工作流引擎Elsa初试——创建工作流服务器和图形化工作流配置管理应用

    微软的Workflow Foundation基于.Net Framework,并且没有向.Net Core迁移的计划.我们的很多项目使用了工作流引擎,这些项目向.Net Core以及更高版本迁移时遇到 ...