jsp實現登錄界面
本文實例為大家分享了jsp實現登錄界面的具體代碼，供大家參考，具體內容如下
一.用戶登錄案例需求：
1.編寫login.jsp登錄頁面
username & password 兩個輸入框
2.使用druid數據庫連接池技術,操作mysql，day14數據庫中user表
3.使用jdbctemplate技術封裝jdbc
4.登錄成功跳轉到successservlet展示：登錄成功！用戶名,歡迎您
5.登錄失敗跳轉到login.jsp展示：登錄失敗，用戶名或密碼錯誤,驗證碼錯誤
二.分析
三. 開發步驟
1. 創建項目，配置文件，導入jar包
2. 創建數據庫環境
create database day17; ? ? use day17; ? ? ? ? ? ? create table loginuser( ? -- 創建表 ? ? ? ? ? ? ? ? ?id int primary key auto_increment, ? ? ? ? ? ? ? ? username varchar(20) not null, ? ? ? ? ? password varchar(20) not null );
3.創建前端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 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="請輸入用戶名"/>
?? ? ? ? ?</div>
?? ? ? ? ?
?? ? ? ? ?<div class="form-group">
?? ? ? ? ? ?<label for="password">密碼：</label>
?? ? ? ? ? ?<input type="password" name="password" class="form-control" id="password" placeholder="請輸入密碼"/>
?? ? ? ? ?</div>
?? ? ? ? ?
?? ? ? ? ?<div class="form-inline">
?? ? ? ? ? ?<label for="vcode">驗證碼：</label>
?? ? ? ? ? ?<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="請輸入驗證碼" style="width: 120px;"/>
?? ? ? ? ? ?<a href="javascript:refreshcode()"><img src="${pagecontext.request.contextpath }/checkcode" title="看不清點擊刷新" 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>
?? ??? ?
?? ??? ?<!-- 出錯顯示的信息框 -->
?? ? ??? ?<div class="alert alert-warning alert-dismissible" role="alert">
?? ??? ? ?<button type="button" class="close" data-dismiss="alert" >
?? ??? ? ??? ?×</button>
?? ??? ? ? <strong>${log_msg}</strong>
?? ??? ?</div>
? ?? ?</div>
? </body>
</html>4.在domain包下創建類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數據庫連接，創建數據庫連接池對象
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加載配置文件，獲取字節輸入流
?? ??? ??? ? ? ? ? ? ? ?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.創建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.創建圖片對象，在內存中圖片（驗證碼圖片對象）
?? ??? ?bufferedimage image=new bufferedimage(imgwidth,imgheight,bufferedimage.type_int_rgb); ?//也可以指定讀取image=imageio.read(new file())
?? ??? ?//2.美化圖片
?? ??? ?graphics g=image.getgraphics(); //獲得畫筆對象
?? ??? ?
?? ??? ?//設置畫筆顏色
?? ??? ?g.setcolor(color.pink);
?? ??? ?//在創建的圖片對象大小中填充矩形，顏色為上面設置的顏色，第一,二個參數是起始點的x,y,第三，四個參數是有多寬，有多高
?? ??? ?g.fillrect(0, 0, imgwidth, imgheight);
?? ??? ?
?? ??? ?//重新設置畫筆顏色
?? ??? ?g.setcolor(color.yellow);//畫框邊緣顏色
?? ??? ?//在image上畫邊框，第一,二個參數是起始點的x,y,第三，四個參數是有多寬，有多高，注意：邊框占一個像素，所以需要寬和高-1才能覆蓋全部
?? ??? ?g.drawrect(0, 0, imgwidth-1, imgheight-1);
?? ??? ?
?? ??? ?//隨機設置驗證碼的值
?? ??? ?string str="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz1234567890";
?? ??? ?random random=new random();
?? ??? ?stringbuilder sb=new stringbuilder();
?? ??? ?//隨機在image中寫字符串，第三，四個參數是畫的位置
?? ??? ?for(int i=1;i<5;i++) {
?? ??? ??? ?int index=random.nextint(str.length()); ?//隨機選取字母字符
?? ??? ??? ?g.setfont(new font("宋體", font.plain, 20)); ?//設置畫筆大小
?? ??? ??? ?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);
?? ??? ?
?? ??? ?//隨機畫干擾線,第一,二個參數是起始點的x,y,第三，四個參數是最后一個點的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()); ?//將圖片寫入指定文件(第三個參數是指定的位置fileoutpotstream(new file(""))
?? ?}
?? ?
?
}7.創建web層的checklogin的servlet，用來響應用戶登錄的請求。主要是進行前端參數數據和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.設置編碼
?? ??? ?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.現獲取前端填寫的驗證碼,比較驗證碼
?? ??? ? ? ?system.out.println(loginuser);
?? ??? ? ? ?string exc=req.getparameter("verifycode");//獲取前端用戶填寫的驗證碼
?? ??? ? ? ?httpsession htp=req.getsession(); ?//獲取session
?? ??? ? ? ?string excode=(string) htp.getattribute("session_code"); ?//獲取后端checkcode隨機驗證碼
?? ??? ? ? ?//為防止驗證碼重復使用，session中的session_code一旦獲得，就必須刪除
?? ??? ? ? ?htp.removeattribute("session_code");
?? ??? ? ? ?if(excode!=null && excode.equalsignorecase(exc)) {
?? ??? ? ? ??? ?//忽略字母大小寫，比較驗證碼
?? ??? ? ? ? ? ?//如果驗證碼正確，再比較用戶的用戶名和密碼
?? ??? ? ? ?//驗證碼正確
?? ??? ? ? ?//5.創建userdao對象
?? ??? ? ? ??? ? userdaoimpl userdaoimpl=new userdaoimpl(); ?//調用與數據庫的函數
?? ??? ??? ??? ? loginuser lu=userdaoimpl.checkloginuser(loginuser);
?? ??? ??? ? ? ?if(lu!=null) {
?? ??? ??? ? ? ??? ? ?//如果登錄成功
?? ??? ??? ? ? ??? ? ?//保存數據，用戶信息
?? ??? ??? ? ? ??? ? ?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域存儲?
?? ??? ??? ? ? ??? ?//請求轉發，重新回到登錄頁面
?? ??? ??? ??? ??? ?req.getrequestdispatcher("/login.jsp").forward(req, resp);
?? ??? ??? ??? ?}?? ?
?? ??? ? ? ?}else {//驗證碼不正確
?? ??? ? ? ??? ?req.setattribute("log_msg", "驗證碼錯誤"); ?//存儲錯誤信息，用request域存儲
?? ??? ? ? ??? ?req.getrequestdispatcher("/login.jsp").forward(req, resp); ?//請求轉發，重新回到登錄頁面
?? ??? ??? ?}
?? ??? ? ? ?
?? ??? ? ?
?? ??? ? ?
?? ?}
?? ?
?
}8.在dao層的，操作數據庫，查詢數據庫
操作數據庫的userdao接口：
package dao;
?
import java.util.list;
?
import domain.user;
?
public interface userdao {
? ? ?public list<user> findall(); ?//抽象方法
? ? ?public loginuser checkloginuser( loginuser loginuser);
}操作數據庫的userdaoimpl實現類：
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() {
?? ??? ?// 操作數據庫,查詢
?? ??? ?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，對應在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" style="text-decoration:none;font-size:33px">查詢所有用戶信息
?? ?</a>
? </div>
? </body>
</html>四.尾聲
效果圖：
其他：
login.jsp中form表單的action路徑的寫法
* 虛擬目錄+servlet的資源路徑
beanutils工具類，簡化數據封裝
* 用于封裝javabean的
1. javabean：標準的java類
1）. 要求：
1. 類必須被public修飾
2. 必須提供空參的構造器
3. 成員變量必須使用private修飾
4. 提供公共setter和getter方法
2）. 功能：封裝數據
最后：用戶登錄的模塊功能全部結束！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持碩編程。
JSP實戰