文章詳情頁

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

瀏覽：263日期：2022-06-07 17:24:57

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

一.用戶登錄案例需求：

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

二.分析

三. 開發(fā)步驟

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

2. 創(chuàng)建數(shù)據(jù)庫環(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頁面

<%@ 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">? ? ? //切換驗證碼? ? ? ?function refreshCode(){?? ??? ? ?img=document.getElementById("vcode"); //獲取驗證碼圖片對象?? ??? ? ?var time=new Date().getTime(); ?//時間戳?? ??? ? ?img.src="${pageContext.request.contextPath }/checkcode?"+time;?? ?}? ? </script>? </head>? <body>? ?? ?<div>? ?? ??? ?<h3>管理員登錄</h3>? ? ? ? <form action="${pageContext.request.contextPath}/checklogin" method="post">?? ? ? ? ?<div>?? ? ? ? ? ?<label for="user">用戶名：</label>?? ? ? ? ? ?<input type="text" name="userName" id="user" placeholder="請輸入用戶名"/>?? ? ? ? ?</div>?? ? ? ? ??? ? ? ? ?<div>?? ? ? ? ? ?<label for="password">密碼：</label>?? ? ? ? ? ?<input type="password" name="password" id="password" placeholder="請輸入密碼"/>?? ? ? ? ?</div>?? ? ? ? ??? ? ? ? ?<div>?? ? ? ? ? ?<label for="vcode">驗證碼：</label>?? ? ? ? ? ?<input type="text" name="verifycode" id="verifycode" placeholder="請輸入驗證碼"/>?? ? ? ? ? ?<a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath }/checkcode" title="看不清點擊刷新" id="vcode"/></a>?? ? ? ? ?</div>?? ? ? ? ? <div>${log_msg}</div>?? ? ? ? ?<hr/>?? ? ? ? ?<div>?? ? ? ? ? ?<input type="submit" value="登錄">?? ? ? ? ? </div>?? ? ??? ?</form>?? ??? ??? ??? ?<!-- 出錯顯示的信息框 -->?? ? ??? ?<div role="alert">?? ??? ? ?<button type="button" 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ù)庫連接，創(chuàng)建數(shù)據(jù)庫連接池對象

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.初始化連接池對象?? ??? ??? ? ? ? ? ? ? ?ds = DruidDataSourceFactory.createDataSource(pro);?? ??? ??? ??? ??? ??? ? ? ? ? ?} catch (IOException e) {?? ??? ??? ? ? ? ? ? ? ?e.printStackTrace();?? ??? ??? ? ? ? ? ?} catch (Exception e) {?? ??? ??? ? ? ? ? ? ? ?e.printStackTrace();?? ??? ??? ? ? ? ? ?}?? ??? ??? ? ? ?}?? ??? ??? ??? ??? ??? ? ? ?/**?? ??? ??? ? ? ? * 獲取連接池對象?? ??? ??? ? ? ? */?? ??? ??? ? ? ?public static DataSource getDataSource(){?? ??? ??? ? ? ? ? ?return ds;?? ??? ??? ? ? ?}?? ??? ??? ??? ??? ??? ??? ??? ??? ? ? ?/**?? ??? ??? ? ? ? * 獲取連接Connection對象?? ??? ??? ? ? ? */?? ??? ??? ? ? ?public static Connection getConnection() throws SQLException {?? ??? ??? ? ? ? ? ?return ?ds.getConnection();?? ??? ??? ? ? ?}?? ??? ??? ?}

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

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)建圖片對象，在內(nèi)存中圖片（驗證碼圖片對象）?? ??? ?BufferedImage image=new BufferedImage(imgwidth,imgheight,BufferedImage.TYPE_INT_RGB); ?//也可以指定讀取image=imageIO.read(new file())?? ??? ?//2.美化圖片?? ??? ?Graphics g=image.getGraphics(); //獲得畫筆對象?? ??? ??? ??? ?//設(shè)置畫筆顏色?? ??? ?g.setColor(Color.pink);?? ??? ?//在創(chuàng)建的圖片對象大小中填充矩形，顏色為上面設(shè)置的顏色，第一,二個參數(shù)是起始點的x,y,第三，四個參數(shù)是有多寬，有多高?? ??? ?g.fillRect(0, 0, imgwidth, imgheight);?? ??? ??? ??? ?//重新設(shè)置畫筆顏色?? ??? ?g.setColor(Color.yellow);//畫框邊緣顏色?? ??? ?//在image上畫邊框，第一,二個參數(shù)是起始點的x,y,第三，四個參數(shù)是有多寬，有多高，注意：邊框占一個像素，所以需要寬和高-1才能覆蓋全部?? ??? ?g.drawRect(0, 0, imgwidth-1, imgheight-1);?? ??? ??? ??? ?//隨機(jī)設(shè)置驗證碼的值?? ??? ?String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";?? ??? ?Random random=new Random();?? ??? ?StringBuilder sb=new StringBuilder();?? ??? ?//隨機(jī)在image中寫字符串，第三，四個參數(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ī)驗證碼置于stringbuilder中?? ??? ??? ?g.setColor(Color.blue); ?//畫筆顏色?? ??? ? ? ?g.drawString(str.charAt(index)+"",imgwidth/5*i ,25); ? ??? ??? ?}?? ??? ??? ??? ?//將驗證碼存儲與session對象中,用于loginservlet中的驗證碼驗證?? ??? ?String session_code=sb.toString();?? ??? ?req.getSession().setAttribute("session_code", session_code);?? ??? ??? ??? ?//隨機(jī)畫干擾線,第一,二個參數(shù)是起始點的x,y,第三，四個參數(shù)是最后一個點的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.圖片顯示在頁面上?? ??? ?ImageIO.write(image, "jpg", resp.getOutputStream()); ?//將圖片寫入指定文件(第三個參數(shù)是指定的位置Fileoutpotstream(new File(""))?? ?}?? ??}

7.創(chuàng)建web層的checklogin的servlet，用來響應(yī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.獲取用戶的請求?? ??? ? ? LoginUser loginUser=new LoginUser();?? ??? ? ?Map<String, String[]> pMap=req.getParameterMap();?? ??? ?//3.使用BeanUtil封裝對象?? ??? ? ?try {?? ??? ??? ?BeanUtils.populate(loginUser, pMap);?? ??? ?} catch (IllegalAccessException | InvocationTargetException e) {?? ??? ??? ?// TODO Auto-generated catch block?? ??? ??? ?e.printStackTrace();?? ??? ?}?? ??? ???? ??? ? ?//4.現(xiàn)獲取前端填寫的驗證碼,比較驗證碼?? ??? ? ? ?System.out.println(loginUser);?? ??? ? ? ?String exc=req.getParameter("verifycode");//獲取前端用戶填寫的驗證碼?? ??? ? ? ?HttpSession htp=req.getSession(); ?//獲取session?? ??? ? ? ?String excode=(String) htp.getAttribute("session_code"); ?//獲取后端checkcode隨機(jī)驗證碼?? ??? ? ? ?//為防止驗證碼重復(fù)使用，session中的session_code一旦獲得，就必須刪除?? ??? ? ? ?htp.removeAttribute("session_code");?? ??? ? ? ?if(excode!=null && excode.equalsIgnoreCase(exc)) {?? ??? ? ? ??? ?//忽略字母大小寫，比較驗證碼?? ??? ? ? ? ? ?//如果驗證碼正確，再比較用戶的用戶名和密碼?? ??? ? ? ?//驗證碼正確?? ??? ? ? ?//5.創(chuàng)建userDao對象?? ??? ? ? ??? ? UserDaoImpl userDaoImpl=new UserDaoImpl(); ?//調(diào)用與數(shù)據(jù)庫的函數(shù)?? ??? ??? ??? ? LoginUser lu=userDaoImpl.checkLoginUser(loginUser);?? ??? ??? ? ? ?if(lu!=null) {?? ??? ??? ? ? ??? ? ?//如果登錄成功?? ??? ??? ? ? ??? ? ?//保存數(shù)據(jù)，用戶信息?? ??? ??? ? ? ??? ? ?htp.setAttribute("user", lu); ?//在session中保存用戶的信息?? ??? ??? ? ? ??? ? ?htp.setAttribute("username", lu.getUserName());//在session中存儲用戶名?? ??? ??? ? ? ??? ? ?//重定向到success.jsp頁面?? ??? ??? ? ? ??? ? ?resp.sendRedirect(req.getContextPath()+"/index.jsp");?? ??? ??? ? ? ? ?}?? ??? ??? ? ? ? ?else {//用戶名或密碼不正確?? ??? ??? ? ? ??? ?req.setAttribute("log_msg", "用戶名或密碼錯誤"); ?//存儲錯誤信息，用request域存儲??? ??? ??? ? ? ??? ?//請求轉(zhuǎn)發(fā)，重新回到登錄頁面?? ??? ??? ??? ??? ?req.getRequestDispatcher("/login.jsp").forward(req, resp);?? ??? ??? ??? ?}?? ??? ??? ? ? ?}else {//驗證碼不正確?? ??? ? ? ??? ?req.setAttribute("log_msg", "驗證碼錯誤"); ?//存儲錯誤信息，用request域存儲?? ??? ? ? ??? ?req.getRequestDispatcher("/login.jsp").forward(req, resp); ?//請求轉(zhuǎn)發(fā)，重新回到登錄頁面?? ??? ??? ?}?? ??? ? ? ??? ??? ? ??? ??? ? ??? ?}?? ??}

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

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

操作數(shù)據(jù)庫的UserDaoImpl實現(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ù)庫,查詢?? ??? ?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，對應(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>首頁</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">查詢所有用戶信息?? ?</a>? </div>? </body></html>

四.尾聲

效果圖：

其他：

BeanUtils工具類，簡化數(shù)據(jù)封裝
* 用于封裝JavaBean的

1. JavaBean：標(biāo)準(zhǔn)的Java類

1）. 要求：

1. 類必須被public修飾
2. 必須提供空參的構(gòu)造器
3. 成員變量必須使用private修飾
4. 提供公共setter和getter方法

2）. 功能：封裝數(shù)據(jù)

最后：用戶登錄的模塊功能全部結(jié)束！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。

JSP

上一條：JSP頁面實現(xiàn)驗證碼校驗功能下一條：jsp中文亂碼問題的簡單解決方法

相關(guān)文章：

1. 詳解JSP 內(nèi)置對象request常見用法2. jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲3. 如何在jsp界面中插入圖片4. JSP之表單提交get和post的區(qū)別詳解及實例5. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式6. Jsp中request的3個基礎(chǔ)實踐7. 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法8. jsp+dao+bean+servlet(MVC模式)實現(xiàn)簡單用戶登錄和注冊頁面9. jsp+servlet簡單實現(xiàn)上傳文件功能（保存目錄改進(jìn)）10. 在JSP頁面中動態(tài)生成圖片驗證碼的方法實例

排行榜

					
					Docker部署ELK7.3.0日志收集服務(wù)最佳實踐
asp.net core項目授權(quán)流程詳解
ASP.NET Core按用戶等級授權(quán)的方法
.NET 中配置從xml轉(zhuǎn)向json方法示例詳解
得到XML文檔大小的方法
asp知識整理筆記4（問答模式）
idea配置jdk的操作方法
快速解決ajax返回值給外部函數(shù)的問題
解決AJAX返回狀態(tài)200沒有調(diào)用success的問題
將properties文件的配置設(shè)置為整個Web應(yīng)用的全局變量實現(xiàn)方法
HTML5 Canvas繪制圖形從入門到精通
				