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

更新時(shí)間：2022年06月16日 16:35:03 作者：無(wú)盡的沉默

這篇文章主要為大家詳細(xì)介紹了jsp實(shí)現(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jsp實(shí)現(xiàn)登錄界面的具體代碼，供大家參考，具體內(nèi)容如下

一.用戶登錄案例需求：

1.編寫login.jsp登錄頁(yè)面
username & password 兩個(gè)輸入框
2.使用Druid數(shù)據(jù)庫(kù)連接池技術(shù),操作mysql，day14數(shù)據(jù)庫(kù)中user表
3.使用JdbcTemplate技術(shù)封裝JDBC
4.登錄成功跳轉(zhuǎn)到SuccessServlet展示：登錄成功！用戶名,歡迎您
5.登錄失敗跳轉(zhuǎn)到login.jsp展示：登錄失敗，用戶名或密碼錯(cuò)誤,驗(yàn)證碼錯(cuò)誤

二.分析

三. 開發(fā)步驟

1. 創(chuàng)建項(xiàng)目，配置文件，導(dǎo)入jar包

2. 創(chuàng)建數(shù)據(jù)庫(kù)環(huán)境

CREATE DATABASE day17;
? ? USE day17;
? ? ? ? ? ? CREATE TABLE loginUSER( ? -- 創(chuàng)建表
? ? ? ? ? ? ? ? ?id INT PRIMARY KEY AUTO_INCREMENT,
? ? ? ? ? ? ? ? username VARCHAR(20) NOT NULL,
? ? ? ? ? PASSWORD VARCHAR(20) NOT NULL
);

3.創(chuàng)建前端login.jsp和css頁(yè)面

<%@ page language="java" contentType="text/html; charset=UTF-8"
? ? pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
? <head>
? ? <meta charset="utf-8"/>
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
? ? <meta name="viewport" content="width=device-width, initial-scale=1"/>
? ? <title>管理員登錄</title>
?
? ? <!-- 1. 導(dǎo)入CSS的全局樣式 -->
? ? <link href="css/bootstrap.min.css" rel="stylesheet">
? ? <!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 -->
? ? <script src="js/jquery-2.1.0.min.js"></script>
? ? <!-- 3. 導(dǎo)入bootstrap的js文件 -->
? ? <script src="js/bootstrap.min.js"></script>
? ? <script type="text/javascript">
? ? ? //切換驗(yàn)證碼
? ? ? ?function refreshCode(){
?? ??? ? ?img=document.getElementById("vcode"); //獲取驗(yàn)證碼圖片對(duì)象
?? ??? ? ?var time=new Date().getTime(); ?//時(shí)間戳
?? ??? ? ?img.src="${pageContext.request.contextPath }/checkcode?"+time;
?? ?}
? ? </script>
? </head>
? <body>
? ?? ?<div class="container" style="width: 400px;">
? ?? ??? ?<h3 style="text-align: center;">管理員登錄</h3>
? ? ? ? <form action="${pageContext.request.contextPath}/checklogin" method="post">
?? ? ? ? ?<div class="form-group">
?? ? ? ? ? ?<label for="user">用戶名：</label>
?? ? ? ? ? ?<input type="text" name="userName" class="form-control" id="user" placeholder="請(qǐng)輸入用戶名"/>
?? ? ? ? ?</div>
?? ? ? ? ?
?? ? ? ? ?<div class="form-group">
?? ? ? ? ? ?<label for="password">密碼：</label>
?? ? ? ? ? ?<input type="password" name="password" class="form-control" id="password" placeholder="請(qǐng)輸入密碼"/>
?? ? ? ? ?</div>
?? ? ? ? ?
?? ? ? ? ?<div class="form-inline">
?? ? ? ? ? ?<label for="vcode">驗(yàn)證碼：</label>
?? ? ? ? ? ?<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="請(qǐng)輸入驗(yàn)證碼" style="width: 120px;"/>
?? ? ? ? ? ?<a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath }/checkcode" title="看不清點(diǎn)擊刷新" id="vcode"/></a>
?? ? ? ? ?</div>
?? ? ? ? ? <div style="color: red;">${log_msg}</div>
?? ? ? ? ?<hr/>
?? ? ? ? ?<div class="form-group" style="text-align: center;">
?? ? ? ? ? ?<input class="btn btn btn-primary" type="submit" value="登錄">
?? ? ? ? ? </div>
?? ? ??? ?</form>
?? ??? ?
?? ??? ?<!-- 出錯(cuò)顯示的信息框 -->
?? ? ??? ?<div class="alert alert-warning alert-dismissible" role="alert">
?? ??? ? ?<button type="button" class="close" data-dismiss="alert" >
?? ??? ? ??? ?<span>&times;</span></button>
?? ??? ? ? <strong>${log_msg}</strong>
?? ??? ?</div>
? ?? ?</div>
? </body>
</html>

4.在domain包下創(chuàng)建類LoginUser

package domain;
?
public class LoginUser {
?? ?private int id;
?? ?private String userName;
?? ?private String password;
?? ?public int getId() {
?? ??? ?return id;
?? ?}
?? ?public void setId(int id) {
?? ??? ?this.id = id;
?? ?}
?? ?public String ?getUserName() {
?? ??? ?return userName;
?? ?}
?? ?public void setUserName(String userName) {
?? ??? ?this.userName = userName;
?? ?}
?? ?public String getPassword() {
?? ??? ?return password;
?? ?}
?? ?public void setPassword(String password) {
?? ??? ?this.password = password;
?? ?}
?? ?@Override
?? ?public String toString() {
?? ??? ?return "LoginUser [id=" + id + ", userName=" + userName + ", password=" + password + "]";
?? ?}
}

5.寫utils包下的工具類JDBCUtils ，主要是與mysql數(shù)據(jù)庫(kù)連接，創(chuàng)建數(shù)據(jù)庫(kù)連接池對(duì)象

package cn.itcast.util;
?

?import com.alibaba.druid.pool.DruidDataSourceFactory;
?? ??? ??? ?
?import javax.sql.DataSource;
?import javax.xml.crypto.Data;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * JDBC工具類 使用Durid連接池
?? ??? ??? ? */
?? ??? ??? ?public class JDBCUtils {
?? ??? ??? ?
?? ??? ??? ? ? ?private static DataSource ds ;
?? ??? ??? ?
?? ??? ??? ? ? ?static {
?? ??? ??? ?
?? ??? ??? ? ? ? ? ?try {
?? ??? ??? ? ? ? ? ? ? ?//1.加載配置文件
?? ??? ??? ? ? ? ? ? ? ?Properties pro = new Properties();
?? ??? ??? ? ? ? ? ? ? ?//使用ClassLoader加載配置文件，獲取字節(jié)輸入流
?? ??? ??? ? ? ? ? ? ? ?InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
?? ??? ??? ? ? ? ? ? ? ?pro.load(is);
?? ??? ??? ?
?? ??? ??? ? ? ? ? ? ? ?//2.初始化連接池對(duì)象
?? ??? ??? ? ? ? ? ? ? ?ds = DruidDataSourceFactory.createDataSource(pro);
?? ??? ??? ?
?? ??? ??? ? ? ? ? ?} catch (IOException e) {
?? ??? ??? ? ? ? ? ? ? ?e.printStackTrace();
?? ??? ??? ? ? ? ? ?} catch (Exception e) {
?? ??? ??? ? ? ? ? ? ? ?e.printStackTrace();
?? ??? ??? ? ? ? ? ?}
?? ??? ??? ? ? ?}
?? ??? ??? ?
?? ??? ??? ? ? ?/**
?? ??? ??? ? ? ? * 獲取連接池對(duì)象
?? ??? ??? ? ? ? */
?? ??? ??? ? ? ?public static DataSource getDataSource(){
?? ??? ??? ? ? ? ? ?return ds;
?? ??? ??? ? ? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ? ? ?/**
?? ??? ??? ? ? ? * 獲取連接Connection對(duì)象
?? ??? ??? ? ? ? */
?? ??? ??? ? ? ?public static Connection getConnection() throws SQLException {
?? ??? ??? ? ? ? ? ?return ?ds.getConnection();
?? ??? ??? ? ? ?}
?? ??? ??? ?}

6.創(chuàng)建web層的checkcode的servlet, 用來(lái)顯示驗(yàn)證碼的

package web.servlet;
?
import java.io.IOException;
import java.util.Random;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
?
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
?
@WebServlet("/checkcode")
public class CheckCode extends HttpServlet{
?
?? ?/**
?? ? *?
?? ? */
?? ?private static final long serialVersionUID = 1L;
?
?? ?@Override
?? ?protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
?? ??? ?// TODO Auto-generated method stub
?? ??? ?this.doPost(req, resp);
?? ?}
?
?? ?@Override
?? ?protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
?? ??? ?int imgwidth=100;
?? ??? ?int imgheight=40;
?? ??? ?//1.創(chuàng)建圖片對(duì)象，在內(nèi)存中圖片（驗(yàn)證碼圖片對(duì)象）
?? ??? ?BufferedImage image=new BufferedImage(imgwidth,imgheight,BufferedImage.TYPE_INT_RGB); ?//也可以指定讀取image=imageIO.read(new file())
?? ??? ?//2.美化圖片
?? ??? ?Graphics g=image.getGraphics(); //獲得畫筆對(duì)象
?? ??? ?
?? ??? ?//設(shè)置畫筆顏色
?? ??? ?g.setColor(Color.pink);
?? ??? ?//在創(chuàng)建的圖片對(duì)象大小中填充矩形，顏色為上面設(shè)置的顏色，第一,二個(gè)參數(shù)是起始點(diǎn)的x,y,第三，四個(gè)參數(shù)是有多寬，有多高
?? ??? ?g.fillRect(0, 0, imgwidth, imgheight);
?? ??? ?
?? ??? ?//重新設(shè)置畫筆顏色
?? ??? ?g.setColor(Color.yellow);//畫框邊緣顏色
?? ??? ?//在image上畫邊框，第一,二個(gè)參數(shù)是起始點(diǎn)的x,y,第三，四個(gè)參數(shù)是有多寬，有多高，注意：邊框占一個(gè)像素，所以需要寬和高-1才能覆蓋全部
?? ??? ?g.drawRect(0, 0, imgwidth-1, imgheight-1);
?? ??? ?
?? ??? ?//隨機(jī)設(shè)置驗(yàn)證碼的值
?? ??? ?String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
?? ??? ?Random random=new Random();
?? ??? ?StringBuilder sb=new StringBuilder();
?? ??? ?//隨機(jī)在image中寫字符串，第三，四個(gè)參數(shù)是畫的位置
?? ??? ?for(int i=1;i<5;i++) {
?? ??? ??? ?int index=random.nextInt(str.length()); ?//隨機(jī)選取字母字符
?? ??? ??? ?g.setFont(new Font("宋體", Font.PLAIN, 20)); ?//設(shè)置畫筆大小
?? ??? ??? ?sb.append(str.charAt(index));//將隨機(jī)驗(yàn)證碼置于stringbuilder中
?? ??? ??? ?g.setColor(Color.blue); ?//畫筆顏色
?? ??? ? ? ?g.drawString(str.charAt(index)+"",imgwidth/5*i ,25); ? ?
?? ??? ?}
?? ??? ?
?? ??? ?//將驗(yàn)證碼存儲(chǔ)與session對(duì)象中,用于loginservlet中的驗(yàn)證碼驗(yàn)證
?? ??? ?String session_code=sb.toString();
?? ??? ?req.getSession().setAttribute("session_code", session_code);
?? ??? ?
?? ??? ?//隨機(jī)畫干擾線,第一,二個(gè)參數(shù)是起始點(diǎn)的x,y,第三，四個(gè)參數(shù)是最后一個(gè)點(diǎn)的x,y
?? ??? ?int x1=0,y1=0,x2=0,y2=0;
?? ??? ?for(int i=0;i<=8;i++) { ?//畫8次線條
?? ??? ??? ?x1=random.nextInt(imgwidth);
?? ??? ??? ?y1=random.nextInt(imgheight);
?? ??? ??? ?x2=random.nextInt(imgwidth);
?? ??? ? ? ?y2=random.nextInt(imgheight);
?? ??? ? ? ?g.setColor(Color.gray);
?? ??? ? ? ?g.drawLine(x1, y1, x2, y2);
?? ??? ?}
?? ??? ?
?? ??? ?//3.圖片顯示在頁(yè)面上
?? ??? ?ImageIO.write(image, "jpg", resp.getOutputStream()); ?//將圖片寫入指定文件(第三個(gè)參數(shù)是指定的位置Fileoutpotstream(new File(""))
?? ?}
?? ?
?
}

7.創(chuàng)建web層的checklogin的servlet，用來(lái)響應(yīng)用戶登錄的請(qǐng)求。主要是進(jìn)行前端參數(shù)數(shù)據(jù)和UserDao進(jìn)行交互

代碼：

package web.servlet;
?
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
?
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 org.apache.commons.beanutils.BeanUtils;
?
import com.mchange.v2.codegen.bean.BeangenUtils;
?
import dao.UserDaoImpl;
import domain.LoginUser;
?
@WebServlet("/checklogin")
public class CheckLogin extends HttpServlet{
?
?? ?/**
?? ? *?
?? ? */
?? ?private static final long serialVersionUID = 1L;
?
?? ?@Override
?? ?protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
?? ??? ?// TODO Auto-generated method stub
?? ??? ?this.doPost(req, resp);
?? ?}
?
?? ?@Override
?? ?protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
?? ??? ?//1.設(shè)置編碼
?? ??? ?req.setCharacterEncoding("utf-8");
?? ??? ?//2.獲取用戶的請(qǐng)求
?? ??? ? ? LoginUser loginUser=new LoginUser();
?? ??? ? ?Map<String, String[]> pMap=req.getParameterMap();
?? ??? ?//3.使用BeanUtil封裝對(duì)象
?? ??? ? ?try {
?? ??? ??? ?BeanUtils.populate(loginUser, pMap);
?? ??? ?} catch (IllegalAccessException | InvocationTargetException e) {
?? ??? ??? ?// TODO Auto-generated catch block
?? ??? ??? ?e.printStackTrace();
?? ??? ?}
?? ??? ??
?? ??? ? ?//4.現(xiàn)獲取前端填寫的驗(yàn)證碼,比較驗(yàn)證碼
?? ??? ? ? ?System.out.println(loginUser);
?? ??? ? ? ?String exc=req.getParameter("verifycode");//獲取前端用戶填寫的驗(yàn)證碼
?? ??? ? ? ?HttpSession htp=req.getSession(); ?//獲取session
?? ??? ? ? ?String excode=(String) htp.getAttribute("session_code"); ?//獲取后端checkcode隨機(jī)驗(yàn)證碼
?? ??? ? ? ?//為防止驗(yàn)證碼重復(fù)使用，session中的session_code一旦獲得，就必須刪除
?? ??? ? ? ?htp.removeAttribute("session_code");
?? ??? ? ? ?if(excode!=null && excode.equalsIgnoreCase(exc)) {
?? ??? ? ? ??? ?//忽略字母大小寫，比較驗(yàn)證碼
?? ??? ? ? ? ? ?//如果驗(yàn)證碼正確，再比較用戶的用戶名和密碼
?? ??? ? ? ?//驗(yàn)證碼正確
?? ??? ? ? ?//5.創(chuàng)建userDao對(duì)象
?? ??? ? ? ??? ? UserDaoImpl userDaoImpl=new UserDaoImpl(); ?//調(diào)用與數(shù)據(jù)庫(kù)的函數(shù)
?? ??? ??? ??? ? LoginUser lu=userDaoImpl.checkLoginUser(loginUser);
?? ??? ??? ? ? ?if(lu!=null) {
?? ??? ??? ? ? ??? ? ?//如果登錄成功
?? ??? ??? ? ? ??? ? ?//保存數(shù)據(jù)，用戶信息
?? ??? ??? ? ? ??? ? ?htp.setAttribute("user", lu); ?//在session中保存用戶的信息
?? ??? ??? ? ? ??? ? ?htp.setAttribute("username", lu.getUserName());//在session中存儲(chǔ)用戶名
?? ??? ??? ? ? ??? ? ?//重定向到success.jsp頁(yè)面
?? ??? ??? ? ? ??? ? ?resp.sendRedirect(req.getContextPath()+"/index.jsp");
?? ??? ??? ? ? ? ?}
?? ??? ??? ? ? ? ?else {//用戶名或密碼不正確
?? ??? ??? ? ? ??? ?req.setAttribute("log_msg", "用戶名或密碼錯(cuò)誤"); ?//存儲(chǔ)錯(cuò)誤信息，用request域存儲(chǔ)?
?? ??? ??? ? ? ??? ?//請(qǐng)求轉(zhuǎn)發(fā)，重新回到登錄頁(yè)面
?? ??? ??? ??? ??? ?req.getRequestDispatcher("/login.jsp").forward(req, resp);
?? ??? ??? ??? ?}?? ?
?? ??? ? ? ?}else {//驗(yàn)證碼不正確
?? ??? ? ? ??? ?req.setAttribute("log_msg", "驗(yàn)證碼錯(cuò)誤"); ?//存儲(chǔ)錯(cuò)誤信息，用request域存儲(chǔ)
?? ??? ? ? ??? ?req.getRequestDispatcher("/login.jsp").forward(req, resp); ?//請(qǐng)求轉(zhuǎn)發(fā)，重新回到登錄頁(yè)面
?? ??? ??? ?}
?? ??? ? ? ?
?? ??? ? ?
?? ??? ? ?
?? ?}
?? ?
?
}

8.在dao層的，操作數(shù)據(jù)庫(kù)，查詢數(shù)據(jù)庫(kù)
操作數(shù)據(jù)庫(kù)的UserDao接口：

package dao;
?
import java.util.List;
?
import domain.User;
?
public interface UserDao {
? ? ?public List<User> findAll(); ?//抽象方法
? ? ?public LoginUser checkLoginUser( LoginUser loginUser);
}

操作數(shù)據(jù)庫(kù)的UserDaoImpl實(shí)現(xiàn)類：

package dao;
?
import java.util.List;
?
import javax.xml.transform.Templates;
?
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
?
import domain.LoginUser;
import domain.User;
import utils.JDBCUtils;
?
public class UserDaoImpl implements UserDao{
? ? JdbcTemplate jdbcTemplate =new JdbcTemplate(JDBCUtils.getDataSource());
?? ?public List<User> findAll() {
?? ??? ?// 操作數(shù)據(jù)庫(kù),查詢
?? ??? ?String sql="select * from user";
?? ??? ?List<User> users=jdbcTemplate.query(sql,new BeanPropertyRowMapper(User.class));
?? ??? ?return users;
?? ?}
?? ?public LoginUser checkLoginUser( LoginUser loginUser) {
?? ??? ?//查詢登錄用戶信息
?? ??? ?String sqlString="select* from loginuser where username=? and password=?";
?? ??? ?//System.out.println("111"+loginUser);
?? ??? ?try {
?? ??? ??? ?LoginUser lu=(LoginUser) jdbcTemplate.queryForObject(sqlString, new BeanPropertyRowMapper<LoginUser>(LoginUser.class)
?? ??? ??? ??? ??? ?,loginUser.getUserName(),loginUser.getPassword());
?? ??? ??? ?return lu;
?? ??? ?} catch (Exception e) {
?? ??? ??? ?// TODO: handle exception
?? ??? ??? ?e.printStackTrace();
?? ??? ??? ?return null;
?? ??? ?}?? ?
?? ?}
}

9.編寫success.jsp，在這里指的是index.jsp，對(duì)應(yīng)在checklogin.java中

<%@ page language="java" contentType="text/html; charset=UTF-8"
? ? pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
? <head>
? ? <meta charset="utf-8"/>
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
? ? <meta name="viewport" content="width=device-width, initial-scale=1"/>
? ? <title>首頁(yè)</title>
?
? ? <!-- 1. 導(dǎo)入CSS的全局樣式 -->
? ? <link href="css/bootstrap.min.css" rel="stylesheet">
? ? <!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 -->
? ? <script src="js/jquery-2.1.0.min.js"></script>
? ? <!-- 3. 導(dǎo)入bootstrap的js文件 -->
? ? <script src="js/bootstrap.min.js"></script>
? ? <script type="text/javascript">
? ? </script>
? </head>
? <body>
? <div align="center">
? ?? ?<a
?? ? ?href="${pageContext.request.contextPath }/userListServlet" style="text-decoration:none;font-size:33px">查詢所有用戶信息
?? ?</a>
? </div>
? </body>
</html>