文章目录
前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、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"> </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;">
版权所有
© 武汉城市学院
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>
实例效果: