jsp+dao+bean+servlet(MVC模式)實現(xiàn)簡單用戶登錄和注冊頁面
功能介紹
本項目通過使用jsp和servlet實現(xiàn)簡單的用戶登錄。主要邏輯為:
- 如果用戶不存在,則首先進行注冊(注冊信息同步到數(shù)據(jù)庫中)。
- 進行注冊后,可進入登錄頁面對賬號進行登錄。
- 如果賬號存在,則正確跳轉到歡迎界面,否則提示用戶賬號信息輸入錯誤。
- 用戶進行登錄頁面時需要填寫驗證碼同時可勾選是否兩周內(nèi)免登陸。
- 用戶進入歡迎界面,則會顯示這是用戶第幾次登錄,如果不是第一次登錄則會顯示上次登錄時間。
- 如果用戶直接進入welcome,(沒有進行登錄,直接打開welcome.jsp)則會跳轉到登錄頁面,防止非法登錄。
前期工作準備
1.安裝了Tomcat并可以成功使用。
2.由于需要與數(shù)據(jù)庫連接,本項目使用的是mysql數(shù)據(jù)庫,需要引入
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路徑下,否則會出現(xiàn)連接數(shù)據(jù)庫異常。
引入maven依賴:
<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.38</version> </dependency>
創(chuàng)建數(shù)據(jù)庫
如果在DOS窗口下創(chuàng)建表的話則應該加上ENGINE=InnoDB DEFAULT CHARSET=utf-8:表示可以添加中文字符,否則直接添加中文字符會出現(xiàn)亂碼 。
CREATE TABLE `usert` ( `username` varchar(20) DEFAULT NULL, `password` varchar(20) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf-8
此時數(shù)據(jù)庫為空,無數(shù)據(jù)需要先進行注冊才能登陸成功。
Bean封裝的數(shù)據(jù)信息
User:
public class User { private String name; private String pd; public User(){} public String getPd() { return pd; } public void setPd(String pd) { this.pd = pd; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
Count:
public class Counter { private int count=1; public Counter(){} public int getCount() { return count++; } public void setCount(int count) { this.count = count; } }
Dao對數(shù)據(jù)庫進行操作
package Dao; import java.sql.*; import java.util.ArrayList; public class UserDao { public boolean SearchUser(String u,String p) throws SQLException { PreparedStatement preparedStatement = null; ResultSet rs =null; Connection con = null; //啟動mysql驅(qū)動器 try { Class.forName("com.mysql.jdbc.Driver"); con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8", "root", "123456"); String sql = "select * from usert where username=? and password=?"; preparedStatement = con.prepareStatement(sql); preparedStatement.setString(1, u); preparedStatement.setString(2, p); rs = preparedStatement.executeQuery(); if(rs.next()){ return true; } else { return false; } } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } finally { if(rs!=null) { rs.close(); } if(preparedStatement!=null) { preparedStatement.close(); } if(con!=null){ con.close(); } } return false; } public void insertUser(String u,String p) throws SQLException { ArrayList users=new ArrayList(); PreparedStatement preparedStatement = null; Connection con = null; //啟動mysql驅(qū)動器 try { Class.forName("com.mysql.jdbc.Driver"); con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8", "root", "123456"); preparedStatement = con.prepareStatement("insert into usert values(?,?)"); preparedStatement.setString(1,u); preparedStatement.setString(2,p); preparedStatement.executeUpdate(); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } finally { if(con!=null) { con.close(); } if(preparedStatement!=null) { preparedStatement.close(); } } } }
實現(xiàn)登錄頁面
三個頁面處理
歡迎界面(LoginServlet.jsp)
1.代碼
<%@ page import="java.net.URLEncoder" %> <%@ page contentType="text/html;charset=utf-8" pageEncoding="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> <% response.setCharacterEncoding("utf-8"); %> <form name="login" action="/LoginCl" method="post"> 用戶名:<input type="text" name="username1"><br> 密碼:<input type="password" name="passwd"><br> <input type="checkbox" name="keep" >兩周內(nèi)免登陸<br> 驗證碼:<input type="text" name="code" size=10> <%--點擊圖片可進行驗證碼刷新--%> <img name="imgValidate" src = "index.jsp" onclick="refresh()" ><br> <%--注意此處的button和submit的區(qū)別--%> <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=" +URLEncoder.encode(username,"utf-8")+ "&password=" + password); } %> </form> <form action="register.jsp" method="post"> <input type="submit" value="注冊"> </form> </body> </html>
2.頁面如下:
驗證碼(index.jsp)
(點擊驗證碼可以實現(xiàn)更新驗證碼)
<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"); //在內(nèi)存中創(chuàng)建圖像 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); //取隨機產(chǎn)生的驗證碼(4位數(shù)字) 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); //隨機產(chǎn)生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))
業(yè)務邏輯處理頁面
package Register; import Dao.UserDao; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.*; import java.io.IOException; import java.io.PrintWriter; import java.net.URLEncoder; 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=utf-8"); request.setCharacterEncoding("utf-8"); //防止非法登錄 得到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"); //獲取到 if (code.equals(randStr)) { //訪問數(shù)據(jù)庫 UserDao userDao=new UserDao(); try { if (!userDao.SearchUser(u,p)) { response.getWriter().println("<a href=LoginServlet.jsp>抱歉:賬號或密碼錯誤,請注意核實信息重新輸入</a>"); return; } else { String keep = request.getParameter("keep"); if (keep != null) { //創(chuàng)建cookie Cookie cookie1 = new Cookie("username", u); Cookie cookie2 = new Cookie("password", p); //設置關聯(lián)路徑 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=" + URLEncoder.encode(u, "utf-8") + "&password=" + p); } } 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=gb2312" pageEncoding="gb2312" language="java" import="bean.*" %> <%@ page import="java.net.URLDecoder" %> <html> <head> <title>welcome</title> </head> <body> <% request.setCharacterEncoding("gb2312"); HttpSession httpSession=request.getSession(true); String val=(String)httpSession.getAttribute("pass"); if(val==null){ response.sendRedirect("LoginServlet.jsp"); } application.setAttribute("COUNTER",new Integer(counter)); %> <jsp:useBean id="mycount" class="bean.Counter" scope="session"/> <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" />--%> welcome name : <% out.println(URLDecoder.decode(user.getName(),"utf-8")); %> password:<jsp:getProperty name="user" property="pd" /><br> <%--welcome name :<%out.println(session.getAttribute("username"));%> password:<%out.println(session.getAttribute("password"));%><br>--%> <%--這是你第:<%=counter%>次訪問本網(wǎng)站!<br>--%> 這是你第:<jsp:getProperty name="mycount" property="count"/> 次訪問本網(wǎng)站!<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中,然后發(fā)送到客戶端瀏覽器 Cookie cookie=new Cookie("lastAccessTime",System.currentTimeMillis()+""); //設置cookie的有效期為5min cookie.setMaxAge(300); //將cookie對象添加到response對象中,這樣服務器在輸出response對象中的內(nèi)容時 // 就會把cookie也輸入到客戶端瀏覽器 response.addCookie(cookie); %> </body> </html>
實現(xiàn)注冊頁面
信息注冊(register.jsp)
注冊信息時需要對用戶輸入的密碼進行判斷:必須有數(shù)字和大小寫英文且長度在6-20之間,為了簡化代碼這里使用的是正則表達式進行判斷。
<%@ page language="java" pageEncoding="gb2312" %> <html> <head> <title>register</title> </head> <body> <h1>歡迎您進行注冊</h1> <script language="JavaScript" type="text/javascript"> function checkPassword() { var ps=/^[A-Za-z0-9]{6,20}$/; if (!ps.exec(register.password1.value)) { alert("密碼必須同時包含大小寫字母和數(shù)字且長度應該在6-20之間"); return; } register.submit(); } </script> <form name="register" action="registerMessage.jsp" method="post"> 請輸入賬號:<input type="text" name="name"><br> 請輸入密碼(要求:必須包含大小寫英文和數(shù)字無非法字符,長度大于6位小于20位):<input type="password" name="password1"><br> 請選擇性別:<input name="sex" type="radio" value="男" checked>男 <input name="sex" type="radio" value="女" >女<br> 請選擇家鄉(xiāng):<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>
點擊注冊后則會跳轉到注冊成功頁面,將其賬號和密碼進行存儲到數(shù)據(jù)庫中,后可以直接進行登錄。
注冊成功頁面(registerMessage.jsp)
<%@ page import="java.sql.*" %> <%@ page import="Dao.UserDao" %> <%@ 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("家鄉(xiāng):"+home); out.println("興趣愛好:"); String[] fav = request.getParameterValues("fav"); for (int i = 0; i < fav.length; i++) { out.print(fav[i]+" "); } try { UserDao userDao=new UserDao(); userDao.insertUser(name,password); out.println("<a href=LoginServlet.jsp>信息注冊成功,點擊此處進行登錄</a>"); } catch (SQLException e) { e.printStackTrace(); } %> </body> </html>
(如下所示,數(shù)據(jù)添加成功)
功能演示
至此此項目結束,我演示一下登錄時的場景。
1.數(shù)據(jù)庫數(shù)據(jù)
2.輸入數(shù)據(jù)庫中沒有的信息
3.賬號密碼正確
ps:需要注意一定要填寫賬戶或者密碼或者驗證碼,否則則會彈出錯誤窗口。
eg:
總結
此項目需要用到的知識點比較多,其中包括 jsp,servlet,mysql,cookie, Javabean等。需要將學到的web知識聯(lián)系起來。
到此這篇關于jsp+dao+bean+servlet(MVC模式)實現(xiàn)簡單用戶登錄和注冊頁面的文章就介紹到這了,更多相關jsp servlet登錄注冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
SpringCloud OpenFeign 參數(shù)傳遞和響應處理的詳細步驟
本文給大家講解SpringCloud OpenFeign 參數(shù)傳遞和響應處理的詳細步驟,本文給大家講解的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02解決springboot項目啟動報錯Field xxxMapper in com...xx
這篇文章主要介紹了解決springboot項目啟動報錯Field xxxMapper in com...xxxContr問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12如何實現(xiàn)自定義SpringBoot的Starter組件
這篇文章主要介紹了實現(xiàn)自定義SpringBoot的Starter組件的示例代碼,想要自定義starter組件,首先要了解springboot是如何加載starter的,也就是springboot的自動裝配機制原理,本文結合示例代碼詳細講解,需要的朋友可以參考下2023-02-02