javaweb实现输入账号密码验证码登录（登录过期验证）（购物车案例）

其他 2021-11-22 03:11:09 阅读次数: 0

文章目录

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、javaweb实现输入账号密码验证码登录

1.login.jsp

<%@page import="java.io.PrintWriter"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小红帽商城--用户登录</title>
<link type="text/css" rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
	<div class="layui-container">
		<div class="layui-row" style="margin-top:100px;">
			<div class="layui-col-md7">&nbsp;</div>
			<div class="layui-col-md5">
			 	<div class="layui-card layui-border-red">
			 		<div class="layui-card-header layui-bg-red">
			 		用户登录
			 		</div>
			 		<div class="layui-card-body" style="padding:40px 60px 40px 10px">
			 		<form action="login" method="post" class="layui-form layui-font-black"><!-- 处理数据页面login -->
			 			<div class="layui-form-item">
			 				<label class="layui-form-label">用户名:</label><!--提交name为username的密码  -->
			 				<div class="layui-input-block">
			 					<input type="text" name="username" class="layui-input layui-border-blue">
			 				</div>
			 			</div>
			 			 <div class="layui-form-item">
			 				<label class="layui-form-label">密码:</label>
			 				<div class="layui-input-block">
			 					<input type="password" name="password" class="layui-input layui-border-blue">><!--提交name为password的密码 -->
			 				</div>
			 			</div>
			 			<div class="layui-form-item">
			 				<label class="layui-form-label">验证码:</label>
			 				<div class="layui-input-block">
			 						<div class="layui-col-md6">
			 						<input type="text" name="vcode" class="layui-input layui-border-blue"><!--提交name为vcode的验证码 -->
			 						</div>
			 						<div class="layui-col-md6">
			 						<img class="vcode"alt="点击切换验证码" src="vcode.jpg" style="margin-left:20px;">
			 						</div>
			 					</div>
			 				</div>
			 				<div class="layui-form-item">
			 						<div class="layui-input-block">
			 						<button type="submit" class="layui-btn layui-btn-normal layui-btn-fluid">提交</button>
			 						</div>
			 					</div>
			 				<div class="layui-form-item">
			 				<div class="layui-input-block"><!-- 输出验证码错误或者用户名密码错误 -->
			 						<%
			 								String error=(String)request.getAttribute("error");
			 								if(error!=null){
    
    
			 									out.print(error);
			 								}
			 						%>
			 						</div>
			 					</div>
			 			</form>
			 			<p class="sj" style="margin-left:100px;"></p><!--当前时间-->
			 			<span class="hour" style="margin-left:100px;"></span><!-- 距离未来某个时间点的还剩多少时间 -->
			 			<span class="minute" style="margin-left:5px;"></span>
			 			<span class="second" style="margin-left:5px;"></span>
			 		</div>
			</div>
		</div>
	</div>
</div>	
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(['jquery'],function(){
    
    
	var $=layui.jquery;
	$('.vcode').css({
    
    'cursor':'pointer'}).click(function(){
    
    
		$(this).attr('src','vcode.jpg?_='+new Date().getTime());
	});
});
getdate();
setInterval(function () {
    
    //显示当前时间的函数
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();
    var p = document.querySelector('p');
    p.innerText = '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day] + ' ' + h + '时' + m + '分' + s + '秒';
}, 1000);

function getdate() {
    
    
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();
    var p = document.querySelector('.sj');
    p.innerText = '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day] + ' ' + h + '时' + m + '分' + s + '秒';
}

//距离未来某个时间点的还剩多少时间的函数
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
// var inputtime = +new Date('2021-8-10 22:00:00');
var inputtime = +new Date('2021-10-24 22:00:00')
countdown();
setInterval(countdown, 1000);
function countdown() {
    
    
    var nowtime = +new Date();
    var times = inputtime - nowtime;
    var h = parseInt(times / 1000 / 60 / 60 % 24);
    h = h >= 10 ? h : '0' + h;
    hour.innerHTML = "距离下课还剩下 "+h+"时";
    var m = parseInt(times / 1000 / 60 % 60);
    m = m >= 10 ? m : '0' + m;
    minute.innerHTML = m+"分";
    var s = parseInt(times / 1000 % 60);
    s = s >= 10 ? s : '0' + s;
    second.innerHTML = s+"秒";
}
</script>
</body>
</html>

2.LoginServlet

代码如下（示例）：

package javaweb.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;




@WebServlet("/login")//地址映射
public class loginServlet extends HttpServlet {
    
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
		request.getRequestDispatcher("/login.jsp").forward(request, response);//如果是get提交方式，之间重定向到登录页面
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
		String vcode = request.getParameter("vcode");//获取表单提交的验证码
		HttpSession session = request.getSession(true);//获取Session
		String sessionVcode = (String) session.getAttribute("VCODE");//获取验证码的值
		if(vcode==null||sessionVcode==null||!vcode.equalsIgnoreCase(sessionVcode)) {
    
    //如果表单提交的验证码为空、验证码为空或者表单提交数据与验证码的值不一样
			request.setAttribute("error", "验证码错误");//输出验证码错误
			request.getRequestDispatcher("/login.jsp").forward(request, response);//请求转发到登录页面，重新登录
			return; //return 不进行用户名密码判断
		}
		
		String username = request.getParameter("username");//获取用户名
		String password = request.getParameter("password");//获取密码
		
		if("admin".equalsIgnoreCase(username)&&           //检验用户名密码是否正确
				"admin".equalsIgnoreCase(password)) {
    
    
			session.setAttribute("userId", 1);            //如果正确，用session在服务器创建一个用户编号userId为1
			session.setAttribute("name", "系统管理员");   //用户名为系统管理员的用户
			response.sendRedirect("index.jsp");          //重定向到主页面（重定向的目的是为了防止表单重复提交）
		}else {
    
    
			request.setAttribute("error", "用户名密码错误");//用户名密码错误  
			request.getRequestDispatcher("/login.jsp").forward(request, response);//请求转发到登录页面，重新登录
			return;//结束函数
		}
	}

}

实例效果：
在这里插入图片描述
在这里插入图片描述

3.vcodeServlet

package javaweb.servlet;

import java.awt.Color;
import java.awt.Font;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;

@WebServlet("/vcode.jpg")//地址映射为验证码图片src
public class vcodeServlet extends HttpServlet {
    
    
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
		CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(120, 40, 4, 20);//使用hutool工具CircleCaptcha 创建一个验证码长、宽、验证码字符个数、干扰线的个数
		captcha.setBackground(Color.black);//设置背景
		captcha.setFont(new Font("Arial Black",Font.BOLD|Font.ITALIC,32));//设置字体  Arial Black 加粗  斜体
		captcha.write(response.getOutputStream());//将验证码图片写入带流中
		String code = captcha.getCode();//获取图片中的验证码
		HttpSession session = request.getSession(true);//获取session
		session.setAttribute("VCODE", code);//设置一个session 给服务器发送验证码VCODE
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
		doGet(request, response);
	}

}

4.logout

package javaweb.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/logout")//退出登录
public class logout extends HttpServlet {
    
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
		HttpSession session = request.getSession(true);//获取session
		session.invalidate();//设置为立即失效
		response.sendRedirect("login");//重定向到登录页面
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
		doGet(request, response);
	}

}

实例效果：
在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>武汉城市学院</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>
	<% 
		Integer userId = (Integer)session.getAttribute("userId");//获取用户编号
		String name = (String)session.getAttribute("name");      //获取用户名
		if(userId == null){
    
                                          //如果用户编号为空，就重定向到登录失效，请重新登录
			response.sendRedirect("session_out.jsp");
		}
	%>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header layui-bg-blue">
			<div class="layui-logo layui-bg-blue">
				<img alt="" src="res/city.jpg" class="layui-nav-img">
				武汉城市学院
			</div>	
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item">
					<a href="index.jsp">
						<i class="layui-icon layui-icon-cellphone"></i> 系统首页
					</a>
				</li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					<a href="javascript:;">
						<img alt="" src="res/city.jpg" class="layui-nav-img">
						<% out.print(name); %>
					</a>
					<dl class="layui-nav-child">
						<dd><a href="">修改密码</a></dd>
						<dd><a href="">个人信息</a></dd>
						<dd><a href="logout">退出登录</a></dd>
					</dl>
				</li>
			</ul>
		</div>
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<ul class="layui-nav layui-nav-tree layui-bg-black">
					<li class="layui-nav-item">
						<a href="javascript:;">Layui案例</a>
						<dl class="layui-nav-child">
							<dd><a href="layui_form.jsp" target="frame">Layui表单</a></dd>
							<dd><a href="layui_table.jsp" target="frame">Layui表格</a></dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<div class="layui-body">
			<iframe src="layout.jsp" name="frame" frameborder="0" width="100%" height="100%"></iframe>
		</div>
		<div class="layui-footer" style="text-align:center;">
			版权所有 
			&copy; 武汉城市学院
			&nbsp;&nbsp;&nbsp;&nbsp;1542043226@qq.com
		</div>
	</div>
<script type="text/javascript" src="layui/layui.js"></script>
</body>
</html>

6.sesstion_out.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>登录以过期，请重新<a href="login">登录</a></h2><!-- 登录失效，请重新登录 -->
</body>
</html>

实例效果：
在这里插入图片描述

7.实现购物车shoppingServlet

package javaweb.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import cn.hutool.json.JSONArray;
import javaweb.bean.Goods;

public class GoodsDao {
    
    
	public List<Goods> find(){
    
    
		List<Goods> list=new ArrayList<Goods>();
		Connection conn=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		try {
    
    
			Class.forName("com.mysql.jdbc.Driver");
			String url = "jdbc:mysql://localhost:3306/javaweb?useUnicode=true&characterEcoding=utf-8";
			String username = "root";
			String password = null;
			conn=DriverManager.getConnection(url,username,password);
			String sql="select id,name,price from t_goods";
			pstmt=conn.prepareStatement(sql);
			
			rs=pstmt.executeQuery();
			while(rs.next()) {
    
    
				Goods i=new Goods();
				i.setId(rs.getInt(1));
				i.setName(rs.getString(2));
				i.setPrice(rs.getDouble(3));
				list.add(i);
			}
		} catch (Exception e) {
    
    
			// TODO: handle exception
		}finally {
    
    
			if(pstmt!=null) {
    
    
				try {
    
    
					pstmt.close();
				} catch (SQLException e) {
    
    
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
			if(conn!=null) {
    
    
				try {
    
    
					conn.close();
				} catch (SQLException e) {
    
    
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
		return list;
	}
}

8.购物车页面shopping

<%@page import="javaweb.bean.Goods"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小红帽商城</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
		<div class="layui-bg-red">
       <div class="layui-container">
       <h4 class="layui-inline layui-bg-red">小红帽商城</h4>
       <ul class="layui-nav layui-inline layui-bg-red">
       		<li class="layui-nav-item">
      			 <a href="${pageContext.request.contextPath}/shopping" style="">系统首页</a>
       		</li>
       </ul>
        </div>
        </div>
           <div class="layui-container">
       		<table class="layui-table">
       			<thead>
       				<tr>
       					<th>编号</th>
       					<th>商品名称</th>
       					<th>价格</th>
       					<th></th>
       				</tr>
       			</thead>
  				<tbody>
  					<%
  						List<Goods> goods=(List<Goods>)request.getAttribute("goods");//获取传过来的商品参数
  						for(Goods i:goods){
    
    
  					%>
  					 <tr><!--调用函数求每个商品的值，并输出处理->
  					 	<td><%=i.getId()%></td>
  					 	<td><%=i.getName()%></td>
  					 	<td><%=i.getPrice()%></td>
  					 	<td style="width:140px;text-algin:center;"> 
  					 	<form action="${pageContext.request.contextPath}/shopping/add" methed="get" class="layui-form layui-inline">
  					 		<input type="number" value="1" class="layui-input layui-input-inline" style="width:60px;">
  					 		<button type="submit" class="layui-btn layui-bg-red">
  					 			<i class="layui-icon layui-icon-cart"></i>
  					 		</button>
  					 	</form>
  					 	
  					 	</td>
  					 </tr>
  					 <%
  						}
  					 %>
  				</tbody>
       		</table>
      </div>
<script type="text/javascript" src="layui/layui.js"></script>
</body>
</html>

实例效果：
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45879198/article/details/121001938
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022