JSP制作簡(jiǎn)單登錄界面實(shí)例
現(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外面訪問(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登陸用戶名密碼填寫(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的用戶名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=true&characterEncoding=utf-8"; String DBName="root"; //登入用戶名 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", "用戶名或密碼錯(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>用戶界面</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 %>位登陸的用戶</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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于javaweb+mysql的jsp+servlet宿舍管理系統(tǒng)(超級(jí)管理員、宿舍管理員、學(xué)生)
基于javaweb+mysql的jsp+servlet宿舍管理系統(tǒng)(超級(jí)管理員、宿舍管理員、學(xué)生)(java+jsp+servlet+javabean+mysql+tomcat),需要的朋友可以參考下2023-08-08jsp頁(yè)面中如何將時(shí)間戳字符串格式化為時(shí)間標(biāo)簽
本節(jié)主要介紹了jsp頁(yè)面中如何將時(shí)間戳字符串格式化為時(shí)間標(biāo)簽,需要的朋友可以參考下2014-08-08在 Linux 上安裝Apache+ApacheJServ+JSP
在 Linux 上安裝Apache+ApacheJServ+JSP...2006-10-10jsp 標(biāo)準(zhǔn)標(biāo)簽庫(kù)簡(jiǎn)析
jsp開(kāi)發(fā)者指定了 JSTL ,提供了一組統(tǒng)一的通用的自定義標(biāo)簽文件,并將這些文件組合在一起,形成了jsp標(biāo)準(zhǔn)標(biāo)簽庫(kù)2012-11-11JSP 動(dòng)態(tài)樹(shù)的實(shí)現(xiàn)
在實(shí)際的項(xiàng)目開(kāi)發(fā)中有很多是有用到動(dòng)態(tài)樹(shù),所謂的動(dòng)態(tài)樹(shù)就是可以支持無(wú)限級(jí)子節(jié)點(diǎn)。今天我就去給大家實(shí)際演示一下動(dòng)態(tài)樹(shù)如何實(shí)現(xiàn)。2009-04-04淺談jsp九大內(nèi)置對(duì)象及四個(gè)作用域
下面小編就為大家?guī)?lái)一篇淺談jsp的九大內(nèi)置對(duì)象及四個(gè)作用域。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01java struts常見(jiàn)錯(cuò)誤以及原因分析
對(duì)于 struts常見(jiàn)錯(cuò)誤的解決方法分析小結(jié),希望能快速的解決大家的問(wèn)題2008-12-12