jsp+dao+bean+servlet(MVC模式)實(shí)現(xiàn)簡單用戶登錄和注冊頁面

更新時(shí)間：2020年12月02日 11:35:35 作者：IT界的徐小渣

這篇文章主要介紹了jsp+dao+bean+servlet(MVC模式)實(shí)現(xiàn)簡單用戶登錄和注冊頁面，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

功能介紹

本項(xiàng)目通過使用jsp和servlet實(shí)現(xiàn)簡單的用戶登錄。主要邏輯為：

如果用戶不存在，則首先進(jìn)行注冊（注冊信息同步到數(shù)據(jù)庫中）。
進(jìn)行注冊后，可進(jìn)入登錄頁面對賬號進(jìn)行登錄。
如果賬號存在，則正確跳轉(zhuǎn)到歡迎界面，否則提示用戶賬號信息輸入錯誤。
用戶進(jìn)行登錄頁面時(shí)需要填寫驗(yàn)證碼同時(shí)可勾選是否兩周內(nèi)免登陸。
用戶進(jìn)入歡迎界面，則會顯示這是用戶第幾次登錄，如果不是第一次登錄則會顯示上次登錄時(shí)間。
如果用戶直接進(jìn)入welcome，（沒有進(jìn)行登錄，直接打開welcome.jsp)則會跳轉(zhuǎn)到登錄頁面，防止非法登錄。

前期工作準(zhǔn)備

1.安裝了Tomcat并可以成功使用。
2.由于需要與數(shù)據(jù)庫連接，本項(xiàng)目使用的是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)建表的話則應(yī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í)數(shù)據(jù)庫為空，無數(shù)據(jù)需要先進(jìn)行注冊才能登陸成功。

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ù)庫進(jìn)行操作

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();
   }
  }
 }
}

實(shí)現(xiàn)登錄頁面

三個(gè)頁面處理

歡迎界面（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("請輸入正確的驗(yàn)證碼");
   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>
 驗(yàn)證碼：<input type="text" name="code" size=10>
 <%--點(diǎn)擊圖片可進(jìn)行驗(yàn)證碼刷新--%>
 <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.頁面如下：

在這里插入圖片描述

驗(yàn)證碼(index.jsp)

（點(diǎn)擊驗(yàn)證碼可以實(shí)現(xiàn)更新驗(yà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();
 //設(shè)置背景色
 g.setColor(new Color(200,200,200));
 g.fillRect(0,0,width,height);
 //取隨機(jī)產(chǎn)生的驗(yàn)證碼(4位數(shù)字)
 Random rnd=new Random();
 int randNum=rnd.nextInt(8999)+1000;
 String randStr=String.valueOf(randNum);
 //將驗(yàn)證碼存入session
 session.setAttribute("randStr",randStr);
 //將驗(yàn)證碼顯示到圖像中
 g.setColor(Color.black);
 g.setFont(new Font("", Font.PLAIN,20));
 g.drawString(randStr,10,17);
 //隨機(jī)產(chǎn)生100個(gè)干擾點(diǎn)，使圖像中的驗(yàn)證碼不易被其他程序探測到
 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è)務(wù)邏輯處理頁面

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的存在時(shí)間為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");
  //得到提交的驗(yàn)證碼
  String code = request.getParameter("code");
  //獲取session驗(yàn)證碼
  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>抱歉：賬號或密碼錯誤，請注意核實(shí)信息重新輸入</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);
      //設(shè)置關(guān)聯(lián)路徑
      cookie1.setPath(request.getContextPath());
      cookie2.setPath(request.getContextPath());
      //設(shè)置cookie的消亡時(shí)間 兩周
      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);
 }
}

如果當(dāng)前不存在該用戶，則會輸出賬號密碼錯誤等信息，存在該用戶則會跳轉(zhuǎn)到歡迎界面。

歡迎界面（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("您上次訪問的時(shí)間是：");
    Long lastAccessTime = Long.parseLong(cookies[i].getValue());
    Date date = new Date(lastAccessTime);
    out.println(date.toLocaleString());
   }
  }
 }
 //用戶訪問過后重新設(shè)置用戶的訪問時(shí)間，存儲在cookie中，然后發(fā)送到客戶端瀏覽器
 Cookie cookie=new Cookie("lastAccessTime",System.currentTimeMillis()+"");
 //設(shè)置cookie的有效期為5min
 cookie.setMaxAge(300);
 //將cookie對象添加到response對象中，這樣服務(wù)器在輸出response對象中的內(nèi)容時(shí)
 // 就會把cookie也輸入到客戶端瀏覽器
 response.addCookie(cookie);
%>
</body>
</html>

實(shí)現(xiàn)注冊頁面

信息注冊(register.jsp)

注冊信息時(shí)需要對用戶輸入的密碼進(jìn)行判斷：必須有數(shù)字和大小寫英文且長度在6-20之間，為了簡化代碼這里使用的是正則表達(dá)式進(jìn)行判斷。

<%@ page language="java" pageEncoding="gb2312" %>
<html>
<head>
 <title>register</title>
</head>
<body>
 <h1>歡迎您進(jìn)行注冊</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í)包含大小寫字母和數(shù)字且長度應(yīng)該在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>

在這里插入圖片描述

點(diǎn)擊注冊后則會跳轉(zhuǎn)到注冊成功頁面，將其賬號和密碼進(jìn)行存儲到數(shù)據(jù)庫中，后可以直接進(jìn)行登錄。

注冊成功頁面(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>信息注冊成功，點(diǎn)擊此處進(jìn)行登錄</a>");
 } catch (SQLException e) {
  e.printStackTrace();
 }
%>
</body>
</html>

在這里插入圖片描述

(如下所示，數(shù)據(jù)添加成功)

在這里插入圖片描述

功能演示

至此此項(xiàng)目結(jié)束，我演示一下登錄時(shí)的場景。

1.數(shù)據(jù)庫數(shù)據(jù)

在這里插入圖片描述

2.輸入數(shù)據(jù)庫中沒有的信息

在這里插入圖片描述

3.賬號密碼正確

在這里插入圖片描述

ps:需要注意一定要填寫賬戶或者密碼或者驗(yàn)證碼，否則則會彈出錯誤窗口。

eg:

在這里插入圖片描述

總結(jié)

此項(xiàng)目需要用到的知識點(diǎn)比較多，其中包括 jsp，servlet，mysql，cookie， Javabean等。需要將學(xué)到的web知識聯(lián)系起來。

到此這篇關(guān)于jsp+dao+bean+servlet(MVC模式)實(shí)現(xiàn)簡單用戶登錄和注冊頁面的文章就介紹到這了,更多相關(guān)jsp servlet登錄注冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: