当前位置： 首页 > news >正文

【ASP.NET MVC】第一个登录页面（8）

news 2026/3/27 9:57:46

一、准备工作

先从网上（站长之家、模板之家，甚至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）

一、准备工作 先从网上&#xff08;站长之家、模板之家&#xff0c;甚至TB&#xff09;下载一个HTML模板&#xff0c;要求一整套的CSS和必要的JS&#xff0c;比如下图&#xff1a; 登录页面的效果是&#xff1a; 首页&#xff1a; 利用这些模板可以减少前台网页的设计——拿来…...

编程日记 2023/8/9 4:21:43

使用Openoffice或LibreOffice实现World、Excel、PPTX在线预览

使用Openoffice或LibreOffice实现World、Excel、PPTX在线预览 预览方案使用第三方服务使用前端库转换格式 jodconverterjodconverter概述主要特性OpenOfficeLibreOffice jodconverter的基本使用添加依赖配置创建DocumentConverter实例上传与转换预览启动上传与预览World 与Spri…...

编程日记 2023/8/9 4:20:42

20天学会rust（三）没有object的rust怎么面向对象？

面向对象我们都很熟悉&#xff0c;可以说它是一种软件开发最重要的编程范式之一&#xff0c;它将程序中的数据和操作数据的方法组织成对象。面向对象有几个重要特性&#xff1a; 封装、继承和多态&#xff0c;基于这些特性带来了在可重用性、可维护性、扩展性、可靠性的优点。 …...

编程日记 2023/8/9 4:19:41

整数规划——第三章 全单模矩阵

整数规划——第三章 全单模矩阵 若线性规划问题的约束矩阵为全单模矩阵&#xff0c;则该问题可行域的顶点都是整数点&#xff0c;从而线性规划与整数规划的最优解相同。 3.1 全单模性与最优性 考虑线性整数规划问题&#xff1a; (IP) min ⁡ c T x , s . t . A x ≤ b , x …...

编程日记 2023/8/9 4:18:40

数据结构和算法

数据结构和算法目录表 CCJava线性结构 1. 数组、单链表和双链表 2. Linux内核中双向链表的经典实现 数组、单链表和双链表 数组、单链表和双链表 栈 栈 栈 队列 队列 队列树形结构 二叉查找树 二叉查找树 二叉查找树 AVL树 AVL树 AVL树 伸展树 伸展树 伸展树 1. 红黑树(一)之…...

编程日记 2023/8/9 4:17:39

[Vulnhub] matrix-breakout-2-morpheus

目录 <1> 信息收集 <2> getshell <3> Privilege Escalation&#xff08;提权&#xff09; <1> 信息收集 nmap -sP 192.168.236.0/24 扫描一下靶机ip 靶机ip: 192.168.236.154 nmap -A -p 1-65535 192.168.236.154 扫描一下靶机开放哪些服务 开放…...

编程日记 2023/8/9 4:16:37

JDK, JRE和JVM之间的区别和联系

JDK, JRE和JVM是与Java编程语言相关的三个重要的概念&#xff0c;它们分别代表Java Development Kit&#xff08;Java开发工具包&#xff09;、Java Runtime Environment&#xff08;Java运行时环境&#xff09;和Java虚拟机&#xff08;Java Virtual Machine&#xff09;。它们…...

编程日记 2023/8/9 4:15:36

mac电脑访问windows共享文件夹连接不上（设置445端口）

前提&#xff1a;首先需要保证mac和windows都在同一局域网内&#xff0c;如果不在肯定是连不上的&#xff0c;就不用往下看了。 事情是这样的&#xff0c;公司入职发了mac电脑&#xff0c;但是我是window重度用户&#xff0c;在折腾mac的过程中&#xff0c;有许多文件需要从wi…...

编程日记 2023/8/9 4:14:36

metersphere性能压测执行过程

(1) 首先在controller层&#xff0c;通过RunTestPlanRequest接收请求参数 PostMapping("/run")public String run(RequestBody RunTestPlanRequest request) (2) 在PerformanceTestService中的run中进行具体的逻辑处理&#xff0c; 首先根据请求中ID来获取库中存储…...

编程日记 2023/8/9 4:13:30

揭秘Word高级技巧：事半功倍的文字处理策略

Microsoft Word是一款广泛使用的文字处理软件&#xff0c;几乎每个人都有使用过它的经历。但是&#xff0c;你是否知道Word中隐藏着许多高级技巧和功能&#xff0c;可以帮助你事半功倍地处理文字&#xff1f;在本文中&#xff0c;我们将揭秘一些Word的高级技巧&#xff0c;让你…...

编程日记 2023/8/9 4:12:27

06-1_Qt 5.9 C++开发指南_对话框与多窗体设计_标准对话框

在一个完整的应用程序设计中&#xff0c;不可避免地会涉及多个窗体、对话框的设计和调用&#xff0c;如何设计和调用这些对话框和窗体是搞清楚一个庞大的应用程序设计的基础。本章将介绍对话框和多窗体设计、调用方式、数据传递等问题&#xff0c;主要包括以下几点。 Qt 提供的…...

编程日记 2023/8/9 4:11:26

模拟实现消息队列项目(系列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. 处理订阅消息请求详解(补充) …...

编程日记 2023/8/9 4:10:25

vscode插件不能搜索安装

1 现象 vscode搜索自己的插件&#xff0c;报错&#xff1a; Error while fetching extensions. HXR failed2 原因 之前用vscode开发golang语言&#xff0c;设置了proxy代理&#xff0c;所以导致错误&#xff0c;删除即可 重启vscode 3 结果...

编程日记 2023/8/9 4:09:24

路由器工作原理(第二十九课)

路由器工作原理(第二十九课) 一图胜过千言 1） 路由：数据从一个网络到另外一个网络之间转发数据包的过程称为路由 2） 路由器：连接不同网络，实现不同网段之间的通信 3）路由表：路由器选择数据的传输路径的依据 原始的路由表 Destination/Mask Proto Pre Cost …...

编程日记 2023/8/9 4:08:23

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) { // 打开系统日志, 可…...

编程日记 2023/8/9 4:07:20

uniapp获取当前页面高度

设置动态高度:style"{height: pageHeightpx}" <view class"uni-content" :style"{height: pageHeightpx}" >... </view>获取当前页面高度&#xff1a; onLoad() {// 获取当前窗口高度this.pageHeight uni.getSystemInfoSync().wi…...

编程日记 2023/8/9 4:06:19

Java课题笔记~ Spring 集成 MyBatis

Spring 集成 MyBatis 将 MyBatis 与 Spring 进行整合&#xff0c;主要解决的问题就是将 SqlSessionFactory 对象交由 Spring 来管理。所以该整合&#xff0c;只需要将 SqlSessionFactory 的对象生成器SqlSessionFactoryBean 注册在 Spring 容器中&#xff0c;再将其注入给 Dao…...

编程日记 2023/8/9 4:05:18

分布式系统理论基础

文章目录 介绍目标 正文CAPConsistencyAvailabilityPartition tolerance BASEBasically AvailableSoft StateEventually Consistent ACIDatomicityconsistencyisolationdurability 参考文档 介绍 分布式系统面临的场景往往是众口难调&#xff0c;“这也要&#xff0c;那也要”…...

编程日记 2023/8/9 4:04:17

mfc 编辑框限制

DoDataExchange由框架调用&#xff0c;作用是交互并且验证对话框数据&#xff0c;主要由(DDX) 和 (DDV)宏实现。 永远不要直接调用这个函数&#xff0c;而是通过UpdateData(TRUE/FALSE)实现控件与变量之间值的传递。 当然你也可以不使用DoDataExchange而完成控件与变量之间值…...

编程日记 2023/8/9 4:03:15

web基础与tomcat环境部署

一. 简述静态网页和动态网页的区别。 请求响应信息&#xff0c;发给客户端进行处理&#xff0c;由浏览器进行解析&#xff0c;显示的页面称为静态页面。处理文件类型如.html、jpg、.gif、.mp4、.swf、.avi、.wmv、.flv等 请求响应信息&#xff0c;发给事务端进行处理&#xff0…...

编程日记 2023/8/9 4:02:12

开源项目 Git 贡献全流程拆解：从入门到精通

好的&#xff0c;这是一篇关于开源项目 Git 贡献全流程拆解的技术文章大纲&#xff1a;开源项目 Git 贡献全流程拆解&#xff1a;从入门到精通引言开源精神与协作的重要性。Git 作为分布式版本控制系统在开源世界的核心地位。明确目标&#xff1a;清晰、完整地拆解向开源项目贡…...

编程新知 2026/3/27 9:00:47

OpenClaw镜像体验：无需本地安装快速测试Qwen3.5-4B-Claude

OpenClaw镜像体验&#xff1a;无需本地安装快速测试Qwen3.5-4B-Claude 1. 为什么选择云端镜像方案 上周我在本地尝试部署OpenClaw时&#xff0c;被Node版本冲突和系统权限问题折磨了整整两天。当看到星图平台提供预装好的OpenClawQwen3.5-4B-Claude镜像时&#xff0c;立刻决定…...

编程新知 2026/3/27 8:54:46

零基础WordPress建站：可视化编辑器推荐（2026版-含下载）

&#x1f645;‍♀️ 零基础学WP建站&#xff0c;怕代码&#xff1f;怕复杂&#xff1f;怕翻车&#xff1f; 2026最新可视化编辑器实测合集来啦✨ 纯干货无链接&#xff0c;全程拖拽操作、所见即所得&#xff0c;小白也能轻松搭出专业网站&#xff0c;告别技术焦虑&#xff0c;…...

编程新知 2026/3/27 8:34:33

vLLM-v0.17.1实操手册：vLLM服务升级策略与滚动更新最佳实践

vLLM-v0.17.1实操手册&#xff1a;vLLM服务升级策略与滚动更新最佳实践 1. vLLM框架概述 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;最新发布的v0.17.1版本带来了多项性能优化和功能增强。这个开源项目最初由加州大学伯克利分校的研究团队开发&am…...

编程新知 2026/3/27 8:34:33

个人开发者如何高效率APP上架安卓应用市场？软著、备案、资质、审核详解大全，一篇文章讲透流程规则！

一、上架前的资质准备 1. 软件著作权登记证书&#xff08;软著&#xff09; 软著是证明APP拥有自主知识产权的重要文件&#xff0c;多数应用商店要求上架时提供。申请周期通常为1-2个月&#xff0c;建议提前规划。 2. APP备案 根据工信部要求&#xff0c;APP主办者需要在接…...

编程新知 2026/3/27 8:32:32

FINCH聚类算法实战：5分钟搞定无参数聚类（附Python代码）

FINCH聚类算法实战&#xff1a;5分钟搞定无参数聚类&#xff08;附Python代码&#xff09; 在数据科学和机器学习领域&#xff0c;聚类分析一直是探索性数据分析的重要工具。传统聚类方法如K-means、DBSCAN等虽然广泛应用&#xff0c;但都面临一个共同挑战&#xff1a;需要人工…...

编程新知 2026/3/27 8:10:28

Gemma-3-12b-it实战教程：极简UI背后隐藏的12B模型内存映射优化策略

Gemma-3-12b-it实战教程&#xff1a;极简UI背后隐藏的12B模型内存映射优化策略 1. 项目概述 Gemma-3-12b-it是一款基于Google Gemma-3-12b-it大模型开发的本地多模态交互工具。这款工具针对12B大模型进行了全维度的CUDA性能优化&#xff0c;支持图片上传和文本提问的流式生成…...

编程新知 2026/3/27 7:48:15

如何用PPI网络community分析发现潜在药物靶点？微生信可视化保姆教程

从PPI网络到药物靶点&#xff1a;基于Community分析的生物标记物发现全流程 在生物医学研究的浩瀚海洋中&#xff0c;蛋白质-蛋白质相互作用(PPI)网络犹如一张精密的城市交通图&#xff0c;而community分析则帮助我们识别出其中的"功能街区"。想象一下&#xff0c;当…...

编程新知 2026/3/27 6:39:18

PyTorch 2.8镜像多场景落地：智慧农业病虫害识别模型田间部署方案

PyTorch 2.8镜像多场景落地&#xff1a;智慧农业病虫害识别模型田间部署方案 1. 田间AI的迫切需求 现代农业正面临病虫害防治的严峻挑战。传统人工巡查方式效率低下&#xff0c;一个熟练的技术员每天最多能检查3-5亩作物&#xff0c;而大型农场往往需要数十人同时作业。更棘手…...

编程新知 2026/3/27 6:29:16

3步打造Windows字体终极体验：MacType高清渲染全攻略

3步打造Windows字体终极体验&#xff1a;MacType高清渲染全攻略 【免费下载链接】mactype Better font rendering for Windows. 项目地址: https://gitcode.com/gh_mirrors/ma/mactype 一、视觉痛点全解析&#xff1a;谁在忍受模糊字体的煎熬&#xff1f; 设计师的色彩…...

编程新知 2026/3/27 5:44:55