jsp+java servlet實作簡單用戶登錄（使用資料庫，包括注冊頁面）
- 功能介紹
- 前期作業準備
- 實作登錄頁面
- 創建資料庫
- 三個頁面處理
- 歡迎界面（LoginServlet.jsp）
- 驗證碼(index.jsp)
- 登錄處理頁面（LoginCl.java(servlet)）
- 歡迎界面（welcome.jsp）
- 實作注冊頁面
- 資訊注冊(register.jsp)
- 注冊成功頁面(registerMessage.jsp)
- 功能演示
- 總結
功能介紹
本專案通過使用jsp和servlet實作簡單的用戶登錄，主要邏輯為：
- 如果用戶不存在，則首先進行注冊（注冊資訊同步到資料庫中），
- 進行注冊后，可進入登錄頁面對賬號進行登錄，
- 如果賬號存在，則正確跳轉到歡迎界面，否則提示用戶賬號資訊輸入錯誤，
- 用戶進行登錄頁面時需要填寫驗證碼同時可勾選是否兩周內免登陸，
- 用戶進入歡迎界面，則會顯示這是用戶第幾次登錄，如果不是第一次登錄則會顯示上次登錄時間，
- 如果用戶直接進入welcome，（沒有進行登錄，直接打開welcome.jsp)則會跳轉到登錄頁面，防止非法登錄，
前期作業準備
1.安裝了Tomcat并可以成功使用，
2.由于需要與資料庫連接，本專案使用的是mysql資料庫，需要引入
mysql-connector-java-5.1.9.jar包（可在官方下載或者通過maven引入mysql依賴），需要注意mysql-connector-java-5.1.9.jar需要放在C:\Program Files\Java\jdk1.8.0_201\jre\lib\ext路徑下，否則會出現連接資料庫例外，
引入maven依賴：
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.38</version>
</dependency>
實作登錄頁面
創建資料庫
CREATE TABLE `usert` (
`username` varchar(20) DEFAULT NULL,
`password` varchar(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=gbk
此時資料庫為空，無資料需要先進行注冊才能登陸成功，
三個頁面處理
歡迎界面（LoginServlet.jsp）
1.代碼
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>LoginServlet</title>
</head>
<body>
<script type="text/javascript">
<%--對輸入的賬號資訊進行判斷，賬號密碼不能為空且必須輸入驗證碼--%>
function validate() {
if(login.username1.value===""){
alert("賬號不能為空");
return;
}
if(login.passwd.value===""){
alert("密碼不能為空");
return;
}
if(login.code.value===""){
alert("請輸入驗證碼");
return;
}
login.submit();
}
function refresh() {
login.imgValidate.src="index.jsp?id="+Math.random();
}
</script>
<form name="login" action="/LoginCl" method="post">
用戶名:<input type="text" name="username1"><br>
密碼：<input type="password" name="passwd"><br>
<input type="checkbox" name="keep" >兩周內免登陸<br>
驗證碼：<input type="text" name="code" size=10>
<%--點擊圖片可進行驗證碼重繪--%>
<img name="imgValidate" src = "index.jsp" onclick="refresh()" ><br>
<%--注意此處的button和submit的區別--%>
<input type="button" value="登錄" onclick="validate()">
<%
String username = null;
String password = null;
Cookie[] cookies = request.getCookies();
for (int i = 0; i < cookies.length; i++) {
if ("username".equals(cookies[i].getName())) {
username = cookies[i].getValue();
} else if ("password".equals(cookies[i].getName())) {
password = cookies[i].getValue();
}
}
if (username != null && password != null) {
response.sendRedirect("welcome.jsp?uname=" + username + "&password=" + password);
}
%>
</form>
<form action="register.jsp" method="post">
<input type="submit" value="注冊">
</form>
</body>
</html>
2.頁面如下：
驗證碼(index.jsp)
（點擊驗證碼可以實作更新驗證碼）
<script type="text/javascript">
function refresh() {
src="index.jsp?id="+Math.random();
}
</script>
<%@ page contentType="charset=UTF-8" language="java"
import ="java.awt.*"
import ="java.awt.image.BufferedImage"
import="java.util.*"
import="javax.imageio.ImageIO"
pageEncoding="gb2312"%>
<%
response.setHeader("Cache-Control","no-cache");
//在記憶體中創建影像
int width=60,height=20;
BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//獲取畫筆
Graphics g=image.getGraphics();
//設定背景色
g.setColor(new Color(200,200,200));
g.fillRect(0,0,width,height);
//取隨機產生的驗證碼(4位數字)
Random rnd=new Random();
int randNum=rnd.nextInt(8999)+1000;
String randStr=String.valueOf(randNum);
//將驗證碼存入session
session.setAttribute("randStr",randStr);
//將驗證碼顯示到影像中
g.setColor(Color.black);
g.setFont(new Font("", Font.PLAIN,20));
g.drawString(randStr,10,17);
//隨機產生100個干擾點，使影像中的驗證碼不易被其他程式探測到
for (int i = 0; i < 100; i++) {
int x=rnd.nextInt(width);
int y=rnd.nextInt(height);
g.drawOval(x,y,1,1);
}
//輸出影像到頁面
ImageIO.write(image,"JPEG",response.getOutputStream());
out.clear();
out=pageContext.pushBody();
%>
登錄處理頁面（LoginCl.java(servlet)）
業務邏輯處理頁面
package Register;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.*;
@WebServlet("/LoginCl")
public class LoginCl extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
//中文亂碼解決方法
response.setContentType("text/html;charset=gb2312");
//防止非法登錄 得到session
HttpSession httpSession=request.getSession(true);
//修改session的存在時間為20s
httpSession.setMaxInactiveInterval(20);
httpSession.setAttribute("pass","ok");
//獲取用戶名的賬號和密碼
String u=null;
//針對jsp 其username為username1
u=request.getParameter("username1");
String p=null;
p=request.getParameter("passwd");
//得到提交的驗證碼
String code = request.getParameter("code");
//獲取session驗證碼
HttpSession session = request.getSession();
String randStr = (String) session.getAttribute("randStr");
response.setCharacterEncoding("gb2312");
//當賬號資訊和驗證碼輸入正確時才可以訪問
try {
//啟動mysql驅動器
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","123456");
String sql="select * from usert where username=? and password=?";
PreparedStatement preparedStatement = con.prepareStatement(sql);
preparedStatement.setString(1,u);
preparedStatement.setString(2,p);
ResultSet rs = preparedStatement.executeQuery();
if(!rs.next()){
response.getWriter().println("<a href=LoginServlet.jsp>抱歉：賬號或密碼錯誤，請注意核實資訊重新輸入</a>");
return;
}
else {
//獲取到
if(code.equals(randStr)) {
String keep = request.getParameter("keep");
//勾選了兩周內免登陸選項
if (keep != null) {
//創建cookie
Cookie cookie1 = new Cookie("username", u);
Cookie cookie2 = new Cookie("password", p);
//設定關聯路徑
cookie1.setPath(request.getContextPath());
cookie2.setPath(request.getContextPath());
//設定cookie的消亡時間 兩周
cookie1.setMaxAge(2 * 7 * 24 * 60 * 60);
cookie1.setMaxAge(2 * 7 * 24 * 60 * 60);
//把cookie資訊寫給瀏覽器
response.addCookie(cookie1);
response.addCookie(cookie2);
}
//跳轉到歡迎界面
response.sendRedirect("welcome.jsp?uname=" + u + " &password=" + p);
}
rs.close();
preparedStatement.close();
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
this.doGet(request,response);
}
}
如果當前不存在該用戶，則會輸出賬號密碼錯誤等資訊，存在該用戶則會跳轉到歡迎界面，
歡迎界面（welcome.jsp）
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="bean.*"
%>
<html>
<head>
<title>welcome</title>
</head>
<body>
<%
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
HttpSession httpSession=request.getSession(true);
String val=(String)httpSession.getAttribute("pass");
//如果打開此頁面則會跳轉到登錄頁面，防止非法登錄
if(val==null){
response.sendRedirect("LoginServlet.jsp");
}
%>
<jsp:useBean id="mycount" class="bean.Counter" scope="application"/>
<jsp:useBean id="user" class="bean.User" scope="session">
<jsp:setProperty name="user" property="name" param="uname"/>
<jsp:setProperty name="user" property="pd" param="password"/>
</jsp:useBean>
<h1>主界面</h1>
<%--welcome name =<%=u%> password =<%=p%><br>--%>
welcome name :<jsp:getProperty name="user" property="name" />
password:<jsp:getProperty name="user" property="pd" /><br>
<%--這是你第:<%=counter%>次訪問本網站!<br>--%>
這是你第:<jsp:getProperty name="mycount" property="count"/>
次訪問本網站!<br>
<a href='LoginServlet.jsp'>回傳重新登錄</a><br>
<%
Cookie[] cookies = request.getCookies();
if(cookies!=null) {
for (int i = 0; i < cookies.length; i++) {
if (cookies[i].getName().equals("lastAccessTime")) {
out.println("您上次訪問的時間是：");
Long lastAccessTime = Long.parseLong(cookies[i].getValue());
Date date = new Date(lastAccessTime);
out.println(date.toLocaleString());
}
}
}
//用戶訪問過后重新設定用戶的訪問時間，存盤在cookie中，然后發送到客戶端瀏覽器
Cookie cookie=new Cookie("lastAccessTime",System.currentTimeMillis()+"");
//設定cookie的有效期為1min
cookie.setMaxAge(60);
//將cookie物件添加到response物件中，這樣服務器在輸出response物件中的內容時
// 就會把cookie也輸入到客戶端瀏覽器
response.addCookie(cookie);
%>
</body>
</html>
實作注冊頁面
資訊注冊(register.jsp)
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2020/10/20
Time: 9:44
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="gb2312" %>
<html>
<head>
<title>register</title>
</head>
<body>
<h1>歡迎您進行注冊</h1>
<script language="JavaScript" type="text/javascript">
function checkPassword() {
if (register.password1.value.length < 6 || register.password1.value.length > 20) {
alert("請注意密碼長度應該不超過20同時不小于6位");
return;
}
else {
values = register.password1.value;
var flag = false;
for (var i = 0; i < values.length; i++) {
if ((values.charAt(i) >= 'A' && values.charAt(i) <= 'Z') || (values.charAt(i) >= 'a' && values.charAt(i) <= 'z')) {
if ((values.charAt(i) >= 'A' && values.charAt(i) <= 'Z')) {
for (var k = 0; k < values.length; k++) {
if ((values.charAt(k) >= 'a' && values.charAt(k) <= 'z')) {
flag = true;
break;
}
}
}
else {
for (var k = 0; k < values.length; k++) {
if ((values.charAt(k) >= 'A' && values.charAt(k) <= 'Z')) {
flag = true;
break;
}
}
}
}
}
if (flag == false) {
alert("密碼必須同時包含大小寫字母");
return;
}
var flag1=false;
for (var k = 0; k < values.length; k++) {
if((values.charAt(k)>='0'&&values.charAt(k)<='9')){
flag1=true;
}
}
if(flag1==false){
alert("密碼中必須含有數字");
return;
}
}
register.submit();
}
</script>
<form name="register" action="registerMessage.jsp" method="post">
請輸入賬號：<input type="text" name="name"><br>
請輸入密碼(要求：必須包含大小寫英文和數字無非法字符，長度大于6位小于20位):<input type="password" name="password1"><br>
請選擇性別：<input name="sex" type="radio" value="男" checked>男
<input name="sex" type="radio" value="女" >女<br>
請選擇家鄉：<select name="home" >
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="陜西">陜西</option>
</select>
<br>
請選擇您的愛好：<input name="fav" type="checkbox" value="唱歌">唱歌
<input name="fav" type="checkbox" value="跳舞">跳舞
<input name="fav" type="checkbox" value="打球">打球
<input name="fav" type="checkbox" value="玩游戲">玩游戲<br>
<input type="button" value="注冊" onclick="checkPassword()">
</form>
</body>
</html>
點擊注冊后則會跳轉到注冊成功頁面，將其賬號和密碼進行存盤到資料庫中，后可以直接進行登錄，
注冊成功頁面(registerMessage.jsp)
<%@ page language="java" pageEncoding="gb2312" %>
<html>
<head>
<title>message</title>
</head>
<body>
<h2>資訊注冊成功!該用戶注冊資訊如下：</h2>
<%
request.setCharacterEncoding("gb2312");
String name=request.getParameter("name");
String password=request.getParameter("password1");
String sex = request.getParameter("sex");
String home = request.getParameter("home");
out.println("賬號："+name);
out.println("密碼："+password);
out.println("性別："+sex);
out.println("家鄉："+home);
out.println("興趣愛好：");
String[] fav = request.getParameterValues("fav");
for (int i = 0; i < fav.length; i++) {
out.print(fav[i]+" ");
}
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con= null;
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","123456");
PreparedStatement preparedStatement = con.prepareStatement("insert into usert values(?,?)");
preparedStatement.setString(1,name);
preparedStatement.setString(2,password);
preparedStatement.executeUpdate();
out.println("<a href=LoginServlet.jsp>資訊注冊成功，點擊此處進行登錄</a>");
} catch (SQLException e) {
e.printStackTrace();
}
catch (ClassNotFoundException e) {
e.printStackTrace();
}
%>
</body>
</html>
(如下所示，資料添加成功)
功能演示
至此此專案結束，我演示一下登錄時的場景，
1.資料庫資料
2.輸入資料庫中沒有的資訊
3.賬號密碼正確
ps:需要注意一定要填寫賬戶或者密碼或者驗證碼，否則則會彈出錯誤視窗，
eg:
總結
此專案需要用到的知識點比較多，其中包括 jsp，servlet，mysql，cookie， Javabean等，需要將學到的web知識聯系起來，有不懂的代碼問題歡迎提問，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/211709.html
標籤：其他