現(xiàn)在很多web項(xiàng)目都能用到登錄界面,本文介紹一下JSP制作簡(jiǎn)單登錄界面,分享給大家,具體如下:
運(yùn)行環(huán)境
eclipse+tomcat+MySQL 不知道的可以參考Jsp運(yùn)行環(huán)境——Tomcat
項(xiàng)目列表

這里我先把jsp文件先放在Web-INF外面訪(fǎng)問(wèn)
1.需要建立的幾個(gè)文件在圖上.jsp
2.還要導(dǎo)入MySQL的jar包mysql-5.0.5.jar,導(dǎo)到WEB-INF中的lib文件夾就可以不需要Bulid Path
3.開(kāi)始編寫(xiě)代碼:
代碼演示:
index.jsp就好像一般網(wǎng)站的首頁(yè)一樣感覺(jué),將header.jsp和footer.jsp引入其中
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
title>首頁(yè)/title>
style>
#nav>ul>li{
float:left;
margin-left:50px;
}
#login{
clear:both;
}
/style>
/head>
body>
!-- 引入header.jsp的頭部文件 -->
%@ include file="header.jsp" %>
div id="login">
a href="login.jsp" rel="external nofollow" >button>登陸/button>/a>
/div>
!-- 引入footer.jsp的腳部文件 -->
%@include file="footer.jsp" %>
/body>
/html>
header.jsp
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
div id="nav">
ul>
li >a href="">導(dǎo)航1/a>/li>
li>a href="">導(dǎo)航2/a>/li>
li>a href="">導(dǎo)航3/a>/li>
li>a href="">導(dǎo)航4/a>/li>
li>a href="">導(dǎo)航5/a>/li>
li>a href="">導(dǎo)航6/a>/li>
/ul>
/div>
footer.jsp
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
div>
p>xxxxxxxxxxx可以試試|xxxxxxxxxxxx技術(shù)有限公司/p>
p>京 ICP 證 1234567 號(hào)|Copyright © 1999-2017, All Rights Reserved /p>
/div>
頁(yè)面內(nèi)容展示:

login.jsp登陸用戶(hù)名密碼填寫(xiě)界面
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
title>登陸頁(yè)面/title>
/head>
body>
%--表單--%>
fieldset>
legend>登陸界面/legend>
form action="test.jsp" method="post">
input type="text" name="username">br>
input type="password" name="password">br>
input type="submit" value="登陸">
!-- EL語(yǔ)句,后面驗(yàn)證表單時(shí),驗(yàn)證錯(cuò)誤反回信息-->
${error}
/form>
/fieldset>
/body>
/html>
內(nèi)容顯示:

test.jsp 是對(duì)表單login.jsp 的提交的內(nèi)容與數(shù)據(jù)庫(kù)中的數(shù)據(jù)對(duì)比驗(yàn)證,再相應(yīng)的跳轉(zhuǎn)
%@page import="java.sql.*"%>
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
%
//請(qǐng)求獲取login.jsp的用戶(hù)名username的值
String username=request.getParameter("username");
//請(qǐng)求獲取login.jsp的密碼password的值
String password=request.getParameter("password");
//數(shù)據(jù)庫(kù)MySQL的地址
String DBURL="jdbc:mysql://localhost:3306/zhou?useUnicode=truecharacterEncoding=utf-8";
String DBName="root"; //登入用戶(hù)名
String DBPwd="123456";//登入密碼
//加載mysql驅(qū)動(dòng)
Class.forName("com.mysql.jdbc.Driver");
//連接數(shù)據(jù)庫(kù)
Connection conn=DriverManager.getConnection(DBURL,DBName,DBPwd);
//創(chuàng)建Statement對(duì)象
Statement st=conn.createStatement();
//sql語(yǔ)句,搜索這個(gè)username和password在數(shù)據(jù)庫(kù)是否存在
String sql="select * from user where name='"+username+"'and pwd='"+password+"'";
//運(yùn)行sql語(yǔ)句,并把得到的結(jié)果放入結(jié)果集ResultSet中
ResultSet rs=st.executeQuery(sql);
//判斷這個(gè)結(jié)果集是否存在,一般username只有一個(gè)
if(rs.next()){
//設(shè)置一個(gè)username,將后面username其內(nèi)容賦值給前面一個(gè)username,可以以便下一個(gè)頁(yè)面使用
request.setAttribute("username", username);
//跳轉(zhuǎn)頁(yè)面到userpage.jsp
request.getRequestDispatcher("userpage.jsp").forward(request, response);
}else{
//設(shè)置一個(gè)error,將后面的字賦給這個(gè)error,以便先一個(gè)跳轉(zhuǎn)頁(yè)面的使用,request的作用域有限
request.setAttribute("error", "用戶(hù)名或密碼錯(cuò)誤!!!");
request.getRequestDispatcher("login.jsp").forward(request, response);
}
conn.close();
rs.close();
%>
登陸錯(cuò)誤顯示的頁(yè)面內(nèi)容:

userpage.jsp這個(gè)頁(yè)面就是登陸成功之后顯示的頁(yè)面
%@page import="javafx.scene.chart.PieChart.Data"%>
%@page import="java.util.Date"%>
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
title>用戶(hù)界面/title>
/head>
body>
div>
!-- ${username}是獲取到test.jsp 中判斷中重新設(shè)置的username,知道是誰(shuí)登陸了,這個(gè)是誰(shuí)的頁(yè)面 -->
p>${username},你好,登陸成功??!/p>
/div>
%
//session的作用域問(wèn)題,可以記錄一個(gè)網(wǎng)站的瀏覽量。先得到一個(gè)count
Object obj=session.getAttribute("count");
//判斷這個(gè)對(duì)象是否為空
if(obj==null){
//空則重新設(shè)置一下count的值
session.setAttribute("count", 0);
}else{
//否則將得到的對(duì)象強(qiáng)轉(zhuǎn)加1,就可以記錄瀏覽量
int i=(int)obj+1;
session.setAttribute("count", i);
%>
div>你是第%=i %>位登陸的用戶(hù)/div>
%
}
//獲取當(dāng)前時(shí)間
Date date=new Date();
out.print("現(xiàn)在時(shí)間:"+date);
%>
div>你的IP地址:%=request.getRemoteAddr()%>/div>
/body>
/html>
頁(yè)面內(nèi)容:localhost就是127.0.0.1,有時(shí)候地址欄是local host時(shí)會(huì)顯示8個(gè)0:

整個(gè)簡(jiǎn)單的登陸就完事了
想了解EL語(yǔ)言的具體感覺(jué)可以看這個(gè) JSP中的EL表達(dá)式詳細(xì)介紹
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:- 利用JSP session對(duì)象保持住登錄狀態(tài)
- JavaWeb實(shí)現(xiàn)用戶(hù)登錄注冊(cè)功能實(shí)例代碼(基于Servlet+JSP+JavaBean模式)
- JSP實(shí)現(xiàn)用戶(hù)登錄、注冊(cè)和退出功能
- JSP實(shí)現(xiàn)簡(jiǎn)單的用戶(hù)登錄并顯示出用戶(hù)信息的方法
- JSP中實(shí)現(xiàn)系統(tǒng)登錄后的退出原理及代碼
- JSP+MySQL實(shí)現(xiàn)網(wǎng)站的登錄與注冊(cè)小案例
- JSP實(shí)現(xiàn)登錄功能之添加驗(yàn)證碼
- JSP + Servlet實(shí)現(xiàn)生成登錄驗(yàn)證碼示例
- JSP中 Session和作用域的使用
- jsp獲取action傳來(lái)的session和session清空以及判斷
- JSP登錄中Session的用法實(shí)例詳解