简洁版用户登录系统

前端页面:

用户登录首页:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>登录人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script></script>
</body></html>

登录页面:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body><h1>用户登录</h1>用户名:<input name="userName" type="text" id="userName"><br>密码:<input name="password" type="password" id="password"><br><input type="button" value="登录" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function login() {}</script>
</body></html>

后端代码:


@RestController
@RequestMapping("/user")
public class UserController {@RequestMapping("/login")public boolean login(String userName, String password , HttpSession session){if (userName==null || userName.length()==0 || password==null || password.length()==0){return false;}if ("admin".equals(userName) && "admin".equals(password)){//设置sessionsession.setAttribute("username","admin");return true;}return false;}@RequestMapping("/getUserInfo")public String getUserInfo(HttpServletRequest request){//从session获取登录用户HttpSession session = request.getSession(false);String userName=null;if (session !=null){userName = (String)session.getAttribute("username");}return "当前登录用户:"+userName;}
}

前端代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body>
<h1>用户登录</h1>
用户名:<input name="userName" type="text" id="userName"><br>
密码:<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>function login() {console.log("登录")$.ajax({url:"user/login",type:"post",data:{"userName":$("#userName").val(),"password":$("#password").val()},success:function(result){if(result){location.href="/index.html";//location.assign();}else{alert("密码错误!");}}});}</script>
</body></html>

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>
登录人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>//页面加载时,就去调用后端请求$.ajax({url:"/user/getUserInfo",type:"get",success:function(username){$("#loginUser").text(username);}});</script>
</body></html>

成果展示:

简洁版用户登录

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/513007.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab 实现模糊C均值聚类

1. 原理 模糊c均值算法步骤&#xff1a; 1. 设定聚类数目c和加权指数b&#xff1a; 2. 初始化各个聚类中心m 3. 重复下面的运算&#xff0c;直到各个样本的隶属度值稳定&#xff1a;用当前的聚类中心根据下式计算隶属度函数&#xff1a; 用当前的隶属度函数按下式更新计算各…

计算机组成原理之机器:计算机系统的基本概念

计算机组成原理之机器 笔记来源&#xff1a;哈尔滨工业大学计算机组成原理&#xff08;哈工大刘宏伟&#xff09; Chapter1&#xff1a;计算机系统的基本概念 1.1 计算机系统简介 从物理构成的角度对计算机系统分层 计算机组成原理主要关注微体系结构&#xff08;Mirco-arc…

分享77个Html杂七杂八模板,总有一款适合您

分享77个Html杂七杂八模板&#xff0c;总有一款适合您 77个Html杂七杂八模板下载链接&#xff1a;https://pan.baidu.com/s/1-RyIKaxdCu3dbnlMFMwviw?pwd8888 提取码&#xff1a;8888 学习知识费力气&#xff0c;收集整理更不易。知识付费甚欢喜&#xff0c;为咱码农谋福…

已经连接过github远程库,如何再次推送及删除远程库的内容

基于上次将文件推送到已经建好的github远程库上&#xff0c;此篇文章主要介绍如何再次推送文件去直接已经连接过的远程库&#xff0c;以此如何删除远程库中不想要的文件。 一、推送文件到远程库 1.将所需推送的文件拉入本地库所建的文件夹下&#xff1a;{ex&#xff1a;JVM相…

080|为什么阿里的价值观值得你关注?

在阿里巴巴20周年年会现场&#xff0c;万众瞩目之下&#xff0c;马云和张勇完成了阿里巴巴董事长职务的交接。 不过你也知道&#xff0c;这次接棒在一年前就已经公布了&#xff0c;在年会上只是一个仪式。在20周年年会过后&#xff0c;我找到了互联网圈的资深媒体人阳淼&#…

(3)(3.2) MAVLink2数据包签名(安全)

文章目录 前言 1 配置 2 使用 3 MAVLink协议说明 前言 ArduPilot 和任务计划器能够通过使用加密密钥添加数据包签名&#xff0c;为空中 MAVLink 传输增加安全性。这并不加密数据&#xff0c;只是控制自动驾驶仪是否响应 MAVLink 命令。 当自动驾驶仪处于激活状态时&#x…

Mybatis-Plus——04,自动填充时间(新注解)

自动填充&#xff08;新注解&#xff09; 一、数据库添加两个字段二、实体类字段属性上增加注解三、编写填充器四、查看结果4.1 插入结果4.2 修改结果 五、同步修改5.1实体类属性改成 INSERT_UPDATE5.2 在填充器的方法这里加上 updateTime5.3 查看结果————————创作不易…

DHCP自动获取IP地址实验(思科)

华为设备参考&#xff1a;DHCP自动获取IP地址实验&#xff08;华为&#xff09; 一&#xff0c;实验目的 路由器搭载DHCP&#xff0c;让PC通过DHCP自动获取IP地址 二&#xff0c;不划分vlan 实验拓扑 配置命令 Switch Switch>enable Switch#configure terminal Switch(c…

基于协同过滤的旅游推荐系统设计与实现

基于协同过滤的旅游推荐系统设计与实现 在当今旅游业蓬勃发展的背景下&#xff0c;人们对于旅游体验的需求日益增加&#xff0c;如何为用户提供更加个性化、精准的旅游推荐成为了旅游行业的一个重要课题。为解决这一问题&#xff0c;我们设计并实现了一个基于协同过滤的旅游推…

8个优秀的CSS实践,开发web应用

HTML面试题部分 1.H5的新特性有哪些 2.Label的作用是什么&#xff1f;是怎么用的&#xff1f; 3.HTML5的form如何关闭自动完成功能 4.dom如何实现浏览器内多个标签页之间的通信? 5.实现不使用 border 画出1px高的线&#xff0c;在不同浏览器的标准模式与怪异模式下都 能保持一…

【JavaSE】面向对象——多态性

多态性 多态性的概念 所谓多态性&#xff0c;理解为一个事物的多种形态。具体点就是去完成某个动作时&#xff0c;不同的对象会产生不同的状态。 多态性的好处 多态在Java中指的是父类的引用指向子类的对象&#xff0c;或者可以说是子类的对象赋给父类的引用。这样在我们的…

Tomcat概念、安装及相关文件介绍

目录 一、web技术 1、C/S架构与B/S架构 1.1 http协议与C/S架构 1.2 http协议与B/S架构 2、前端三大核心技术 2.1 HTML&#xff08;Hypertext Markup Language&#xff09; 2.2 css&#xff08;Cascading Style Sheets&#xff09; 2.3 JavaScript 3、同步和异步 4、…