需求
- 编写login登录界面(用户名,密码,验证码,登陆按钮,注册按钮)
- 设计关系数据库(编号,用户名,密码)
- 编写注册功能,将数据存储在数据库中。(姓名不能重复,设为主键,重复会注册失败)
- 编写登录功能 。首先获取验证码,先判断验证码是否正确,不正确则显示验证码错误。验证码正确后再获取用户名和密码,进行数据库的搜索比对,若正确则重定向到成功的界面,并且将用户名显示。
jar包
技术选型
Servlet + JSP + Mysql + JDBCTemplate + Druid + BeanUtils + Tomcat
效果图
验证码或者用户名和密码错误
Navicat Premium 显示Mysql内容
登录成功
注册功能
源码
登录主界面 login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Login</title>
<script>
<%-- 增加时间戳来更换验证码图片 --%>
window.onload=function(){
document.getElementById("img").onclick=function(){
this.src = "/daydayup/checkCodeServlet?time" + new Date().getTime();
}
}
<%-- 用于打开注册的窗口--%>
function reg() {
window.open("register.jsp");
}
</script>
<style>
div{
color: red;
}
</style>
</head>
<body>
<form action="/daydayup/loginServlet" method="post">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="checkcode"></td>
</tr>
<tr>
<td colspan="2"><img id="img" src="/daydayup/checkCodeServlet" alt=""></td>
</tr>
<tr>
<td><input type="submit" value="登录"></td>
<td><input type="button" value="注册" onclick="reg()" ></td>
</tr>
</table>
</form>
<div>${
requestScope.login_error}</div>
<div>${
requestScope.checkcode_error}</div>
</body>
</html>
注册界面 register.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="/daydayup/registerServlet" method="post">
<table>
<tr>
<td>用户名<