文章詳情頁

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

瀏覽：991日期：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)建項目，配置文件，導入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. 導入CSS的全局樣式 -->? ? <link href="css/bootstrap.min.css" rel="stylesheet">? ? <!-- 2. jQuery導入，建議使用1.9以上的版本 -->? ? <script src="js/jquery-2.1.0.min.js"></script>? ? <!-- 3. 導入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);?? ??? ??? ??? ?//隨機設(shè)置驗證碼的值?? ??? ?String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";?? ??? ?Random random=new Random();?? ??? ?StringBuilder sb=new StringBuilder();?? ??? ?//隨機在image中寫字符串，第三，四個參數(shù)是畫的位置?? ??? ?for(int i=1;i<5;i++) {?? ??? ??? ?int index=random.nextInt(str.length()); ?//隨機選取字母字符?? ??? ??? ?g.setFont(new Font("宋體", Font.PLAIN, 20)); ?//設(shè)置畫筆大小?? ??? ??? ?sb.append(str.charAt(index));//將隨機驗證碼置于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);?? ??? ??? ??? ?//隨機畫干擾線,第一,二個參數(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)用戶登錄的請求。主要是進行前端參數(shù)數(shù)據(jù)和UserDao進行交互

代碼：

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隨機驗證碼?? ??? ? ? ?//為防止驗證碼重復(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. 導入CSS的全局樣式 -->? ? <link href="css/bootstrap.min.css" rel="stylesheet">? ? <!-- 2. jQuery導入，建議使用1.9以上的版本 -->? ? <script src="js/jquery-2.1.0.min.js"></script>? ? <!-- 3. 導入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：標準的Java類

1）. 要求：

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

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

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

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

JSP

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

相關(guān)文章：

1. JSP Tag Library-AjaxTags 1.0, released2. JSP實現(xiàn)分頁效果3. Jsp+Servlet實現(xiàn)文件上傳下載文件上傳（一）4. jsp+servlet簡單實現(xiàn)上傳文件功能（保存目錄改進）5. jsp文件下載功能實現(xiàn)代碼6. SpringBoot集成SSM、Dubbo、Redis、JSP的案例小結(jié)及思路講解7. JSP的setProperty的使用方法8. JSP狀態(tài)管理的簡單介紹9. JSP頁面實現(xiàn)驗證碼校驗功能10. asp+jsp+JavaScript動態(tài)實現(xiàn)添加數(shù)據(jù)行

排行榜

					
					JS中6個對象數(shù)組去重的方法
資深程序員：給Python軟件開發(fā)測試的25個忠告！
用PHP調(diào)用數(shù)據(jù)庫的存貯過程！
PHP5 OOP編程之代理與定制異常
django-利用session機制實現(xiàn)唯一登錄的例子
PHP依賴管理工具Composer入門教程
分析Android中線程和線程池
Python基于requests庫爬取網(wǎng)站信息
Java commons-httpclient如果實現(xiàn)get及post請求
vscode運行php報錯php?not?found解決辦法
PHP laravel實現(xiàn)導出PDF功能
				