js 实现登录成功 首页显示用户名和退出登录

最新推荐文章于 2023-10-08 10:07:26 发布
最新推荐文章于 2023-10-08 10:07:26 发布
阅读量3.7w 收藏 211
点赞数 25
分类专栏： jsp网页学习专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37591637/article/details/89278115
版权

需求说明

网站开发过程中，最常见的就是用户的登录和退出

在用户登录成功的时候，首页要显示用户名，把用户名存储在浏览器中

在点击退出的时候，要消除用户名，把用户名存储信息删除

应用的技术

jquery的localStorage技术+模块的隐藏和显示

填写用户登录信息，点击登录触发js事件

登录成功的话，就会把用户名和密码永久存储

//用户登录
function ulogin(){
	//获取用户名和密码,登录成功以后，把用户名存储在session里面，然后显示在首页里面
	var username=$("#uusername").val();
	var password=$("#password").val();
	$.ajax({
		method : 'post',
		url : "http://localhost:8080/LawerSys/user_l.action",
		dataType : "text",
		data : {
			username : username,
			password : password
		},
		success : function(ret) {
			//提示注册成功
			if(ret=="success"){
				//关闭模态框
				 $("#close_lo").click(); 
				 //把用户名密码存储在session里面，首页显示用户名称
				 localStorage.setItem("username",username);	
				 load_data();
			}else{
				alert("用户名或者密码输入错误，请重新输入");
				$("#password").val('');
			}
			
			 
		},
	})	
}

 在首页刚加载的时候，就开始判断，如果浏览器里面有存储信息的话，就显示用户名，不然的话，先显示游客状态

没有登录的时候

有用户名的时候

 

 html代码

  <body onload="load_data()">

js代码

//页面刚加载的时候，开始判断，如果有用户名，就显示在页面上，如果没有用户名的话，就显示登录名称
function load_data(){
	 var theme=localStorage.getItem("username");
	 if(theme==null||theme==""){
		$("#cue").show(); 
		 $("#uname").html('');
	 }else{
		 $("#cue").hide();  
		 $("#uname").html(theme);
	 }
}
//页面刚加载的时候，开始判断，如果有用户名，就显示在页面上，如果没有用户名的话，就显示登录名称

退出

html代码

                 <button type="button"  class="btn btn-danger" onclick="exitu()">退出</button>

js代码

//退出登录
function exitu(){
	localStorage.removeItem("username"); 
	//刷新部分
	load_data();
}
//退出登录

根据状态来决定要显示什么内容

//页面刚加载的时候，开始判断，如果有用户名，就显示在页面上，如果没有用户名的话，就显示登录名称
function load_data(){
	 var theme=localStorage.getItem("username");
	 if(theme==null||theme==""){
		$("#cue").show(); 
		 $("#uname").html('');
	 }else{
		 $("#cue").hide();  
		 $("#uname").html(theme);
	 }
}
//页面刚加载的时候，开始判断，如果有用户名，就显示在页面上，如果没有用户名的话，就显示登录名称

 

qq_37591637
关注
  • 25
    点赞
  • 踩
  • 211
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论
专栏目录
注册登录界面（能显示用户信息）
01-05
这是一个用access作数据库的登录和注册界面,登录成功后可以显示用户信息
JavaScript实现页面登陆功能
最新发布
java_de_road的博客
05-13 267
【代码】JavaScript实现页面登陆功能。
EASweb端（waf2）js中获取当前用户的方法
cxfjava的博客
12-03 673
var userId = waf.getContext().currentUser.id; //获取当前操作用户id var username = waf.getContext().currentUser.name; ////获取当前操作用户name
JavaScript网页制作--登录进入首页显示用户名
Dreamer
12-06 5440
JavaScript网页制作–登录进入首页显示用户名 用户在登录页面输入自己的用户名，在登录后的首页会显示用户的用户名。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录
html 怎么获取当前用户名和密码,JavaScript - 如何获取当前用户的名称
weixin_42551508的博客
06-03 2129
Smart猫小萌JavaScript中没有完全兼容的替代方案，因为它具有不安全的安全问题，允许客户端代码了解登录用户。也就是说，以下代码将允许您获取登录的用户名，但它只能在Windows上运行，并且只能在Internet Explorer中使用，因为它使用了ActiveX。此外，Internet Explorer很可能会显示一个弹出窗口，提醒您注意与使用此代码相关的潜在安全问题，这不会完全有助于提...
html+js实现简单登录校验和登录进入显示用户名
qq_41732727的博客
11-22 8185
无需后台，使用js实现简单登录校验和登录进入显示用户名 话不多说，直接上代码！ index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> &l
实现用户的登录，并且登录后显示用户名
weixin_47098642的博客
04-15 1万+
利用servlet，jsp实现用户的登录，并且登录后显示用户名（连接数据库） 显示用户名这里是通过session传递数据，登陆成功后点击退出时要清除页面session。 使用软件：tomcat-8.5.34，mysql，java 我们一共需要写： 位于src下的服务器端用于登录的LoginServlet，登陆成功后用于退出的SuccessServlet 位于web下的前端登录页面login.html，登陆成功后的页面success.jsp，登录失败的页面error.html; 首先我们来写登录的服务器端
登录页面显示用户名称
qq_44538193的博客
05-28 5279
登录页面显示用户名称 开发工具与关键技术：Visual Studio 2015 作者：李德新 撰写时间：2019年5月24日 在我们的学习过程中、或者生活中，我们总是能看到许许多多网页中总是有很多的登录按钮，而且在点击了登录按钮之后就可以跳转到我们想要登录的页面，这样的效果能让我们的收集到更多的用户数据，而且在登录之后我们...
Html实现登录完显示用户名
热门推荐
syh_146的博客
12-11 2万+
Html实现登录完显示用户名 实现方式：把用户名和跳转路径进行拼接。简单来说就是登陆完成后，跳转到首页，在路径后面携带一个用户名，在主页面截取，获得用户名！！！ 话不多说！！！直接开撸！！ 1.首先我们看一下login.html(登录页面) ## **登录表单** <form id="sun"> <h3>用户登录</h3> 用户：<input type="...
for循环实例——用户登陆程序
weixin_42213622的博客
11-22 2103
题目： 用户登陆程序需求： 1.输入用户名和密码 2.判断用户名和密码是否正确(name = ‘root’,passwd=‘westos’) 3.为了防止暴力破解，登陆仅有三次机会，如果超过三次，程序就报错。 代码编译： 运行测试： ...
js实现登录时记住用户名
08-05
NULL 博文链接：https://hw1287789687.iteye.com/blog/2053897
登录验证，只有三次机会，输入特定的用户名和密码后显示登陆成功
07-26
内容概要：简单登录验证，只有3次输入机会，第4次时自动退出（当然，这可以自己设定，本资源只提供简单的方法，希望通过简单方法能使新手快速上手） 适合人群：新手小白，和我一起学习JAVA 学会什么：输入输出语句、...
实现用户注册登录的简单程序
11-10
简单实现用户注册登录系统： ... 对前端提交的数据，通过js进行合法性判断（用户名只能使用字母数字下划线组成，密码只能使用数字，注册时，两次输入的...主页面显示登录人的信息（比如，欢迎某某某访问），提供退出按钮
Javaweb用户登录注册系统
03-17
本系统使用 Session 来存储用户名，以便在登录和退出功能中使用。在登录时，将用户名存入 Session，当 Session 中有值时能够进行相关访问。注销功能是清空 Session，以便完成一次登录和退出的功能。 MySQL 数据库 ...
java web中使用cookie记住用户的账号和密码
08-31
在Java Web开发中，实现“记住用户名和密码”的功能通常涉及到使用Cookie技术。Cookie是一种小型文本文件，由服务器发送到用户的浏览器并存储在本地，以便在用户下次访问同一网站时，浏览器可以将这些Cookie发送回...
根据session解析当前登陆人信息
会写Bug的攻城狮
10-08 477
根据session解析当前登陆人信息
JavaWeb~使用HttpServer和Html 实现登录界面并跳转到个人简历(体会Cookie的用途)
Shangxingya的博客
07-01 2073
文章目录实现请求解析实现返回响应实现Http Sever登录界面代码个人简历代码体会Cookie的功能体会Session的功能cookie vs session两者有什么区别呢？ 实现请求解析 注释详解 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.util.HashMap; impor
node.js和mysql实现登录的案例
05-30
以下是使用 Node.js 和 MySQL 实现登录的示例代码，供参考： 1. 安装依赖 ```bash npm install express mysql body-parser express-session --save ``` 2. 创建数据库 在 MySQL 中创建一个名为 `test` 的数据库，并在其中创建一个名为 `users` 的表，表结构如下： ```sql CREATE TABLE users ( id INT(11) NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL, password VARCHAR(50) NOT NULL, PRIMARY KEY (id) ); ``` 3. 编写服务器代码 ```javascript const express = require('express'); const session = require('express-session'); const bodyParser = require('body-parser'); const mysql = require('mysql'); const app = express(); // 创建 MySQL 连接池 const pool = mysql.createPool({ host: 'localhost', user: 'root', password: '', database: 'test' }); // 配置中间件 app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.use(session({ secret: 'session secret', resave: false, saveUninitialized: true, cookie: { secure: false } })); // 处理登录请求 app.post('/login', (req, res) => { const { username, password } = req.body; const sql = `SELECT * FROM users WHERE username = ? AND password = ?`; pool.query(sql, [username, password], (err, results) => { if (err) { console.error(err); res.sendStatus(500); return; } if (results.length > 0) { req.session.username = username; res.json({ success: true }); } else { res.json({ success: false }); } }); }); // 处理退出请求 app.post('/logout', (req, res) => { req.session.destroy(); res.json({ success: true }); }); // 监听端口 app.listen(3000, () => { console.log('Server is running on port 3000.'); }); ``` 在上述代码中，我们创建了一个 MySQL 连接池，用于连接数据库。在处理登录请求时，我们通过查询数据库判断用户名和密码是否匹配，如果匹配则将用户名存储在 session 中，并返回登录成功的消息。在处理退出请求时，我们销毁 session，以达到退出登录的效果。 4. 编写客户端代码 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <h1>Login</h1> <form id="login-form"> <label>Username:</label> <input type="text" name="username"><br> <label>Password:</label> <input type="password" name="password"><br> <button type="submit">Login</button> </form> <p id="message"></p> <script> const form = document.getElementById('login-form'); const message = document.getElementById('message'); form.addEventListener('submit', (event) => { event.preventDefault(); const data = new FormData(form); fetch('/login', { method: 'POST', body: data }) .then(response => response.json()) .then(result => { if (result.success) { message.textContent = 'Login success.'; } else { message.textContent = 'Login failed.'; } }) .catch(error => { console.error(error); }); }); </script> </body> </html> ``` 在上述代码中，我们创建了一个登录表单，当用户提交表单时，通过 Fetch API 发送 POST 请求到服务器端，以验证用户的用户名和密码。如果登录成功，则在页面上显示一条消息，否则显示登录失败的消息。 以上就是一个使用 Node.js 和 MySQL 实现登录的示例代码。请注意，此代码仅供参考，实际应用中可能需要进行更多的安全性和稳定性方面的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_37591637

请给我持续更新的动力~~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值