【ASP.NET MVC】第一个登录页面（8）
一、准备工作
先从网上（站长之家、模板之家，甚至TB）下载一个HTML模板，要求一整套的CSS和必要的JS，比如下图：
登录页面的效果是：
首页：
利用这些模板可以减少前台网页的设计——拿来主义
网上模板很多，比如HUI：
SA-ADMIN
本例用比较简单的《蓝色超市模板》完成用户登录操作。
二、拷贝内容到工程
把CSS、JS和IMG目录拷贝到工程（类似文件拷贝粘贴）
右键拷贝，到工程目录下，右键，粘贴（可另外新建一个目录，也可以简单粘贴到工程根目录）
效果如下：
三、功能实现
功能：用户第一次登录 -》 输入用户账号密码 -》 读数据库验证 -》 通过进入首页
补充：
1、登录后的状态应该维持到关闭浏览器（使用Cookie）——后面解决
2、用户信息错误应该有相应提示
解决思路：
1、修改路由（还有其他解决方法），默认为 Login ；
2、收集用户信息，传送到指定Action (POST比较好）；
3、控制器读取数据库，验证用户信息，反馈相应的操作。
修改默认路由：
在HOME控制器，添加Login Action:
右键添加Login页面：
可以测试一下，默认进入登录页面：
删除上面 Login.cshtml的内容，并且粘贴模板中 ，Login.html 内容
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>系统登录 - 超市账单管理系统</title><link rel="stylesheet" href="css/style.css"/>
</head>
<body class="login_bg"><section class="loginBox"><header class="loginHeader"><h1>超市账单管理系统</h1></header><section class="loginCont"><form class="loginForm" action="welcome.html"><div class="inputbox"><label for="user">用户名：</label><input id="user" type="text" name="username" placeholder="请输入用户名" required/></div><div class="inputbox"><label for="mima">密码：</label><input id="mima" type="password" name="password" placeholder="请输入密码" required/></div><div class="subBtn"><input type="submit" value="登录" /><input type="reset" value="重置"/></div></form></section></section></body>
</html>修改CSS路径后，如下：
这时候，执行功能进入了登录页面：
页面上添加JS代码收集用户信息（推荐JQUERY，JS和JQUERY在菜鸟学堂有介绍）
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>系统登录 - 超市账单管理系统</title><link rel="stylesheet" href="~/css/style.css"/><script src="~/js/jquery.js"></script><script>function login() {var name = $("#user").val();var psw = $("#mima").val();$.post("/Home/Login", { id: name, password: psw }, function (data) {if (data == "OK")window.location.href = "/Home/Index";elsealert(data);});}</script>
</head>
<body class="login_bg"><section class="loginBox"><header class="loginHeader"><h1>超市账单管理系统</h1></header><section class="loginCont"><form class="loginForm" ><div class="inputbox"><label for="user">用户名：</label><input id="user" type="text" name="username" placeholder="请输入用户名" required/></div><div class="inputbox"><label for="mima">密码：</label><input id="mima" type="password" name="password" placeholder="请输入密码" required/></div><div class="subBtn"><input type="submit" value="登录" onclick="login()"/><input type="reset" value="重置"/></div></form></section></section></body>
</html>说明：
1、添加JQUERY : <script src="~/js/jquery.js"></script> ；
2、自定义login的JS函数，来响应按钮登录的点击事件：<input type="submit" value="登录" οnclick="login()"/>
3、登录事件处理：获取用户名+密码两个输入框的内容，利用post方式提交到服务器，获取服务器的反馈，如果是OK，转到index页面，否则弹出反馈信息
后台控制器再添加一个Login（需要与前面的有不同的参数，重载）：
public ActionResult Login(){ return View();}[HttpPost]public ActionResult Login(string id,string password){DataSet set = TestMysql.Query("select * from user where name='"+id+"'");if(set.Tables[0].Rows.Count <= 0){return Content("无此用户");}if (set.Tables[0].Rows[0]["psw"].ToString() != password){return Content("密码错误");}return Content("OK");}最后按照Login的方法，修改Index的内容：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>超市账单管理系统</title><link rel="stylesheet" href="~/css/public.css"/><link rel="stylesheet" href="~/css/style.css"/>
</head>
<body>
<!--头部-->
<header class="publicHeader"><h1>超市账单管理系统</h1><div class="publicHeaderR"><p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p><a href="login.html">退出</a></div>
</header>
<!--时间-->
<section class="publicTime"><span id="time">2015年1月1日 11:11 星期一</span><a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian"><div class="left"><h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2><nav><ul class="list"><li ><a href="billList.html">账单管理</a></li><li><a href="providerList.html">供应商管理</a></li><li><a href="userList.html">用户管理</a></li><li><a href="password.html">密码修改</a></li><li><a href="login.html">退出系统</a></li></ul></nav></div><div class="right"><img class="wColck" src="~/img/clock.jpg" alt=""/><div class="wFont"><h2>Admin</h2><p>欢迎来到超市账单管理系统!</p><span id="hours"></span></div></div>
</section>
<footer class="footer">
</footer>
<script src="js/time.js"></script>
<div style="text-align:center;">
<p>更多模板：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>运行结果：
密码错误
无用户：
正常登录：
总结：
本例基本上完成了，MVC三者之间的数据交互，其实MVC也没那么神秘，切记把握数据传递的主线来学习将会使学习路线更加清晰！
相关文章：
【ASP.NET MVC】第一个登录页面（8）
一、准备工作 先从网上（站长之家、模板之家，甚至TB）下载一个HTML模板，要求一整套的CSS和必要的JS，比如下图： 登录页面的效果是： 首页： 利用这些模板可以减少前台网页的设计——拿来…...
使用Openoffice或LibreOffice实现World、Excel、PPTX在线预览
使用Openoffice或LibreOffice实现World、Excel、PPTX在线预览 预览方案使用第三方服务使用前端库转换格式 jodconverterjodconverter概述主要特性OpenOfficeLibreOffice jodconverter的基本使用添加依赖配置创建DocumentConverter实例上传与转换预览启动上传与预览World 与Spri…...
20天学会rust（三）没有object的rust怎么面向对象？
面向对象我们都很熟悉，可以说它是一种软件开发最重要的编程范式之一，它将程序中的数据和操作数据的方法组织成对象。面向对象有几个重要特性： 封装、继承和多态，基于这些特性带来了在可重用性、可维护性、扩展性、可靠性的优点。 …...
整数规划——第三章 全单模矩阵
整数规划——第三章 全单模矩阵 若线性规划问题的约束矩阵为全单模矩阵，则该问题可行域的顶点都是整数点，从而线性规划与整数规划的最优解相同。 3.1 全单模性与最优性 考虑线性整数规划问题： (IP) min c T x , s . t . A x ≤ b , x …...
数据结构和算法
数据结构和算法目录表 CCJava线性结构 1. 数组、单链表和双链表 2. Linux内核中双向链表的经典实现 数组、单链表和双链表 数组、单链表和双链表 栈 栈 栈 队列 队列 队列树形结构 二叉查找树 二叉查找树 二叉查找树 AVL树 AVL树 AVL树 伸展树 伸展树 伸展树 1. 红黑树(一)之…...
[Vulnhub] matrix-breakout-2-morpheus
目录 <1> 信息收集 <2> getshell <3> Privilege Escalation（提权） <1> 信息收集 nmap -sP 192.168.236.0/24 扫描一下靶机ip 靶机ip: 192.168.236.154 nmap -A -p 1-65535 192.168.236.154 扫描一下靶机开放哪些服务 开放…...
JDK, JRE和JVM之间的区别和联系
JDK, JRE和JVM是与Java编程语言相关的三个重要的概念，它们分别代表Java Development Kit（Java开发工具包）、Java Runtime Environment（Java运行时环境）和Java虚拟机（Java Virtual Machine）。它们…...
mac电脑访问windows共享文件夹连接不上（设置445端口）
前提：首先需要保证mac和windows都在同一局域网内，如果不在肯定是连不上的，就不用往下看了。 事情是这样的，公司入职发了mac电脑，但是我是window重度用户，在折腾mac的过程中，有许多文件需要从wi…...
metersphere性能压测执行过程
(1) 首先在controller层，通过RunTestPlanRequest接收请求参数 PostMapping("/run")public String run(RequestBody RunTestPlanRequest request) (2) 在PerformanceTestService中的run中进行具体的逻辑处理， 首先根据请求中ID来获取库中存储…...
揭秘Word高级技巧：事半功倍的文字处理策略
Microsoft Word是一款广泛使用的文字处理软件，几乎每个人都有使用过它的经历。但是，你是否知道Word中隐藏着许多高级技巧和功能，可以帮助你事半功倍地处理文字？在本文中，我们将揭秘一些Word的高级技巧，让你…...
06-1_Qt 5.9 C++开发指南_对话框与多窗体设计_标准对话框
在一个完整的应用程序设计中，不可避免地会涉及多个窗体、对话框的设计和调用，如何设计和调用这些对话框和窗体是搞清楚一个庞大的应用程序设计的基础。本章将介绍对话框和多窗体设计、调用方式、数据传递等问题，主要包括以下几点。 Qt 提供的…...
模拟实现消息队列项目(系列7) -- 实现BrokerServer
目录 前言 1. 创建BrokerServer类 1.1 启动服务器 1.2 停止服务器 1.3 处理一个客户端的连接 1.3.1 解析请求得到Request对象 1.3.2 根据请求计算响应 1.3.3 将响应写回给客户端 1.3.4 遍历Session的哈希表,把断开的Socket对象的键值对进行删除 2. 处理订阅消息请求详解(补充) …...
vscode插件不能搜索安装
1 现象 vscode搜索自己的插件，报错： Error while fetching extensions. HXR failed2 原因 之前用vscode开发golang语言，设置了proxy代理，所以导致错误，删除即可 重启vscode 3 结果...
路由器工作原理(第二十九课)
路由器工作原理(第二十九课) 一图胜过千言 1） 路由：数据从一个网络到另外一个网络之间转发数据包的过程称为路由 2） 路由器：连接不同网络，实现不同网段之间的通信 3）路由表：路由器选择数据的传输路径的依据 原始的路由表 Destination/Mask Proto Pre Cost …...
linux log 日志
/* author: hjjdebug * date: 2023年 08月 08日 星期二 13:18:08 CST * descriptor: linux log 日志 * destinator: 搞清linux 下log 日志 * 下面代码编译通过即可运行 */ #include <stdio.h> #include <syslog.h> int main(void) { // 打开系统日志, 可…...
uniapp获取当前页面高度
设置动态高度:style"{height: pageHeightpx}" <view class"uni-content" :style"{height: pageHeightpx}" >... </view>获取当前页面高度： onLoad() {// 获取当前窗口高度this.pageHeight uni.getSystemInfoSync().wi…...
Java课题笔记~ Spring 集成 MyBatis
Spring 集成 MyBatis 将 MyBatis 与 Spring 进行整合，主要解决的问题就是将 SqlSessionFactory 对象交由 Spring 来管理。所以该整合，只需要将 SqlSessionFactory 的对象生成器SqlSessionFactoryBean 注册在 Spring 容器中，再将其注入给 Dao…...
分布式系统理论基础
文章目录 介绍目标 正文CAPConsistencyAvailabilityPartition tolerance BASEBasically AvailableSoft StateEventually Consistent ACIDatomicityconsistencyisolationdurability 参考文档 介绍 分布式系统面临的场景往往是众口难调，“这也要，那也要”…...
mfc 编辑框限制
DoDataExchange由框架调用，作用是交互并且验证对话框数据，主要由(DDX) 和 (DDV)宏实现。 永远不要直接调用这个函数，而是通过UpdateData(TRUE/FALSE)实现控件与变量之间值的传递。 当然你也可以不使用DoDataExchange而完成控件与变量之间值…...
web基础与tomcat环境部署
一. 简述静态网页和动态网页的区别。 请求响应信息，发给客户端进行处理，由浏览器进行解析，显示的页面称为静态页面。处理文件类型如.html、jpg、.gif、.mp4、.swf、.avi、.wmv、.flv等 请求响应信息，发给事务端进行处理࿰…...
Go 变量
在Go中，有不同的变量类型，例如： int 存储整数（整数），例如123或-123float32 存储浮点数字，带小数，例如19.99或-19.99string - 存储文本，例如“ Hello World”。字符串值用…...
【雷达通信】非相干多视处理（CSA）（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
73. 矩阵置零
题目链接：力扣 解题思路： 方法一：比较容易想到的方向，使用两个数组row和col保存有0的行或者列，然后将有0的那一行或那一列的所有元素都设置为0 AC代码 class Solution {public void setZeroes(int[][] matrix) {in…...
‘大数据技术与应用’和‘数据科学与大数据技术’有什么区别
一、侧重点不同 ‘大数据技术与应用’主要侧重于大数据的存储、处理和分析技术、包括数据挖掘、机器学习、数据仓库、分布式计算等方面的研究，旨在开发大数据相关的应用程序和系统，以满足商业和企业的需求。 ‘数据科学与大数据技术’则更加注重数据本…...
没有jsoup，rust怎么解析html呢？
在 Rust 中，你可以使用各种库来解析网页内容。一个常用的库是 reqwest ，它提供了一个简单的方式来发送 HTTP 请求并获取网页内容。另外，你可以使用 scraper 或 select 等库来解析 HTML 或 XML 格式的网页内容。 下面是一个使用 reqwest 和 sc…...
【C高级】Day4 shell脚本 排序
1. 整理思维导图 2. 写一个函数，获取用户的uid和gid并使用变量接收 #!/bin/bash function getid() {uidid -ugidid -g }getid echo "uid$uid" echo "gid$gid"3. 整理冒泡排序、选择排序和快速排序的代码 #include <myhead.h>void Inp…...
大模型开发(十六)：从0到1构建一个高度自动化的AI项目开发流程(中)
全文共1w余字，预计阅读时间约40~60分钟 | 满满干货(附代码)，建议收藏！ 本文目标：通过LtM提示流程实现自动构建符合要求的函数，并通过实验逐步完整测试code_generate函数功能。 代码下载点这里 一、介绍 此篇文章为…...
【深入了解pytorch】PyTorch强化学习：强化学习的基本概念、马尔可夫决策过程（MDP）和常见的强化学习算法
【深入了解pytorch】PyTorch强化学习：强化学习的基本概念、马尔可夫决策过程（MDP）和常见的强化学习算法 PyTorch强化学习：介绍强化学习的基本概念、马尔可夫决策过程（MDP）和常见的强化学习算法引言强化学习的基本概念状态（State）动作（Action）奖励（Reward）策略（Pol…...
尚硅谷张天禹Vue2+Vue3笔记（待续）
简介 什么是Vue？ 一套用于构建用户界面的渐进式JavaScript框架。将数据转变成用户可看到的界面。 什么是渐进式？ Vue可以自底向上逐层的应用 简单应用:只需一个轻量小巧的核心库 复杂应用:可以引入各式各样的Vue插件 Vue的特点是什么？ 1.采…...
深度学习（35）—— StarGAN（2）
深度学习（34）—— StarGAN（2） 完整项目在这里：欢迎造访 文章目录 深度学习（34）—— StarGAN（2）1. build model（1）generator（2&#…...
用虚拟机做网站服务器吗/做市场推广应该掌握什么技巧
最近项目中需要在SQL SERVER中进行分页，需要编写分页查询语句。之前也写过一些关于分页查询的语句，但是性能不敢恭维。于是在业务时间，在微软社区Bing了一篇老外写的关于SQL SERVER分页的文章。看过之后，感觉自己之前写的语句&…...
一个网站做app/爱站权重查询
Linux之ARM（IMX6U）BSP工程管理实验1、工程管理简介1.1、创建bsp、imx6ul、obj和project这四个文件夹1.2、文件分类2、实验程序编写2.1、创建 imx6ul.h 文件2.2、创建个.vscode文件修改includePath2.2.1、修改includePath2.3、编写led驱动文件2.2.1、 bsp…...
建设银行官方网站打不开/googleseo优化
参考：https://blog.csdn.net/maweifei/article/details/51221259 # 示例： img_ cv::Mat::zeros(pic_height_, pic_width_, CV_8UC1);Mat不但是一个非常有用的图像容器类，同时也是一个通用的矩阵类。 Mat矩阵(图像容器)创建时CV_8UC1、CV_8U…...
广东品牌网站建设/微信推广朋友圈广告
详解Linux命令中；、|、& 、&& 、 ||之间的区别?一、";"分号的用法方式：command1 ; command2用;号隔开每个命令, 每个命令按照从左到右的顺序,顺序执行， 彼此之间不关心是否失败， 所有命令都会执行。二、&q…...
私人做网站可靠吗/李江seo
2019独角兽企业重金招聘Python工程师标准>>> dim name dim fs, sname Inputbox("姓名") msgbox(name)set fs wscript.createobject("scripting.filesystemobject") fs为FSO实例if (fs.folderexists("c:\temp")) then 判断c:\te…...
无锡网站建设和/优化网站界面的工具
由于使用别人的Dll，导出的是一个实体类，在C#里封送很难，百度下，有个朋友回复一篇英文的，虽然不一定使用，但可以作为一个知识点，现把原文贴下： c#调用C写的dll导出类，包含…...