當(dāng)前位置：首頁 > 编程语言 > java >内容正文

java

JavaWEB快速入门之验证码及课堂项目【04】

發(fā)布時(shí)間：2023/12/20 java 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaWEB快速入门之验证码及课堂项目【04】小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、驗(yàn)證碼

? ?（1）為什么需要驗(yàn)證碼？

? ? ? ? ? ? 隨著網(wǎng)絡(luò)的發(fā)達(dá)，會有些人惡意注冊網(wǎng)站，但是有了驗(yàn)證碼之后就可以有效防止這一現(xiàn)象，對于網(wǎng)站運(yùn)營商家來說，少了這些無效的注冊，也更有利于管理，降低網(wǎng)站運(yùn)營管理的難度。

? ? ? ? ?對于用戶來說，當(dāng)賬戶出現(xiàn)異常和高風(fēng)險(xiǎn)操作都會觸發(fā)驗(yàn)證碼，驗(yàn)證碼發(fā)到個(gè)人手機(jī)上，很好的保護(hù)了個(gè)人信息安全。

? （2）利用javaweb技術(shù)設(shè)置驗(yàn)證碼

? ? ? ?① 第一步：定義接收驗(yàn)證碼的容器

//保存驗(yàn)證碼var code = "";var arr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','l','m','o','p','q','r','s','k','u','y','w','x','y','z'];

? ? ?② 第二步：封裝驗(yàn)證的生成方法，利用隨機(jī)數(shù)的原理，隨機(jī)出現(xiàn)四個(gè)數(shù)

//封裝驗(yàn)證碼生成function setCode(){//清空上一次保留的驗(yàn)證碼code = "";//通過Math.random();產(chǎn)生一個(gè)隨機(jī)數(shù)for(var i = 0;i<4;i++){/* 取范圍乘數(shù)組的長度個(gè)數(shù) */var sj = Math.floor(Math.random()*arr.length);//console.log(sj)//console.log(arr[sj]); //根據(jù)隨機(jī)數(shù)獲取數(shù)組中的元素code+=arr[sj];}//獲取存儲驗(yàn)證碼的span標(biāo)簽$("code_val").innerHTML = code;}

? ? ③ 第三步：驗(yàn)證輸入的驗(yàn)證碼是否匹配

//獲取驗(yàn)證碼進(jìn)行匹配$("code").onblur = function(){//獲取輸入項(xiàng)中的驗(yàn)證碼var inputCode = this.value;//獲取span標(biāo)簽隨機(jī)生成保留的驗(yàn)證碼var spanCode = $("code_val").innerHTML;if(!inputCode){alert('驗(yàn)證碼不能為空');return false;}else{//編寫了驗(yàn)證碼if(inputCode!=spanCode){alert('驗(yàn)證碼輸入錯(cuò)誤');this.value = "";//重新生成return false;}}return true;};

? ④ 第四步：重置驗(yàn)證碼

/* 如果span中存儲的驗(yàn)證碼不清晰需要重新修改 */$("code_val").onclick = function(){setCode();}

完整登錄的驗(yàn)證碼以及表單驗(yàn)證：

<%@ 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>  <link rel="stylesheet" type="text/css" href="css/login.css"/>  <script type="text/javascript">var code = ""; var arr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','l','m','o','p','q','r','s','k','u','y','w','x','y','z'];function $(id){return document.getElementById(id);}//加載函數(shù)window.onload = function(){//用戶名焦點(diǎn)事件$("username").onblur = function(){var usernameValue = this.value;if(!usernameValue){alert('用戶名不能為空')return false;}return true;}//密碼的焦點(diǎn)事件$("password").onblur = function(){var passwordValue = this.value;if(!passwordValue){alert('密碼不能為空')return false;}return true; }//阻止提交myFrom$("myFrom").onsubmit = function(){if(!$("username").onblur() || !$("password").onblur() || !$("code").onblur()){return false;}return true;}//驗(yàn)證驗(yàn)證碼$("code").onblur = function(){var inputCode = this.value;var spanCode = $("code_val").innerHTML;if(!inputCode){alert('驗(yàn)證碼不能為空');return false;}else{if(inputCode!=spanCode){alert('驗(yàn)證碼輸入錯(cuò)誤');this.value = "";return false;}}return true;};setCode();//點(diǎn)擊更換驗(yàn)證碼$("code_val").onclick = function(){setCode();}};//編寫生成驗(yàn)證碼function setCode(){code = "";for(var i = 0;i<4;i++){var sj = Math.floor(Math.random()*arr.length);code+=arr[sj];}$("code_val").innerHTML = code;}</script></head><body><div id="login"><div id="top"><div id="top_left"><img src="images/login_03.gif" /></div><div id="top_center"></div></div><div id="center"><div id="center_left"></div><div id="center_middle"><form id="myFrom" action = "doLogin.jsp" method="post"><div id="user">用戶<input type="text" name="username" id="username"/></div><div id="pwd">密碼<input type="password" name="password" id="password"/></div><div id = "yzm">驗(yàn)證碼 <input type ="text" name = "code" id = "code"/><span id = "code_val">okok</span></div><div id = "mdl">用戶七天免登陸哦~</div><div id="btn"><input type="submit" value="登錄" class="opt_sub" /><input type="reset" value="重置" class="opt_sub" /></div></form> </div><div id="center_right"></div></div><div id="down"><div id="down_left"><div id="inf"><span class="inf_text">版本信息</span><span class="copyright">管理信息系統(tǒng) 2008 v2.0</span></div></div><div id="down_center"></div></div></div></body> </html>

二、課堂項(xiàng)目（新聞發(fā)布系統(tǒng)）?

? ? ?（1）項(xiàng)目需求分析??

Javaweb新聞發(fā)布系統(tǒng)項(xiàng)目分析根據(jù)模板分析，可以分為前端和后臺 1.前端后端功能分析前端功能： 1.用戶登錄 2.用戶注冊 3.新聞分類顯示 4.新聞信息顯示 5.分頁功能（首頁，下一頁，上一頁，尾頁） 6.歷史記錄功能 7.評論模塊后臺功能： 1.管理員登錄 2.主頁默認(rèn)顯示所有新聞+分頁 3.發(fā)布新聞 4.修改新聞 5.新聞分類模塊：增刪改查模塊 6.評論模塊：增刪改查 7.普通用戶管理：增刪改查 8.分頁功能2.數(shù)據(jù)表分析從模板中分析到有以下數(shù)據(jù)表：用戶表（普通用戶+管理員），新聞分類標(biāo)，新聞信息表，評論表用戶信息表：字段名中文說明數(shù)據(jù)類型約束備注 Userid 編號 Number 主鍵 Username 用戶名 Varchar2 Password 密碼 Varchar2 sex 性別 Varchar2 Hobby 愛好 Varchar2 address 地址 Varchar2 urole 權(quán)限 number 0管理員 1普通用戶（默認(rèn)） udate 注冊時(shí)間 date 新聞分類表|新聞主題表字段名中文說明數(shù)據(jù)類型約束備注 Tid 分類編號 Nunber 主鍵 tname 分類名稱 Varchar2 新聞信息表：字段名中文說明數(shù)據(jù)類型約束備注 Nid 新聞編號 Number 主鍵 nTid 新聞分類編號 Number 外鍵 Ntitle 標(biāo)題 Varchar2 Nauthor 作者 Varchar2 nsummary 摘要 Varchar2 ncontent 內(nèi)容 Varchar2 nimage 圖片 Varchar2 ncount 點(diǎn)擊量 number ndate 發(fā)布時(shí)間 date

（2）數(shù)據(jù)庫的創(chuàng)建

--新聞發(fā)布系統(tǒng)的用戶表 create table tb_news_users ( Userid number primary key, Username varchar2(100), Password varchar2(100), Sex varchar2(2), Hobby varchar2(100), Address varchar2(100), Urole number default 1,--0 管理員 1普通用戶 Udate date ） --插入數(shù)據(jù) insert into tb_news_users values(1,'lixiaojiu','9939','女','配音','慧木藍(lán)星',0,sysdate); insert into tb_news_users values(2,'lixiaoqi','7757','女','唱歌','水語宇星',0,sysdate); commit select * from tb_news_users;--主題表 create table tb_news_theme (Tid number(20) primary key,Tname varchar2(20) ) --插入數(shù)據(jù) insert into tb_news_theme values(1,'國內(nèi)'); insert into tb_news_theme values(2,'國際'); insert into tb_news_theme values(3,'軍事'); insert into tb_news_theme values(4,'體育'); insert into tb_news_theme values(5,'娛樂'); insert into tb_news_theme values(6,'社會'); insert into tb_news_theme values(7,'財(cái)經(jīng)'); insert into tb_news_theme values(8,'房產(chǎn)'); insert into tb_news_theme values(9,'家居'); insert into tb_news_theme values(10,'旅游'); insert into tb_news_theme values(11,'文化'); insert into tb_news_theme values(12,'其他'); commit--新聞表 create table tb_news (nid number(20) primary key,ntid number(20) references tb_news_theme(tid),ntitle varchar2(100),nauthor varchar2(20) ,nsummary varchar2(200),ncontent varchar2(2000),nimage varchar2(100) default 'images\\1.jpg',ndate date,ncount number(10) ) --插入數(shù)據(jù) insert into tb_news values (1,2,'阿富汗','一張張','當(dāng)今局勢1?','阿富汗被美國深深地給控制住了，現(xiàn)在已經(jīng)自身難保了……',default,sysdate,0); insert into tb_news values (2,4,'男足','全中國','男足再敗','深足教練組：說我們買球是侮辱，球員:遺憾主場放跑國安 ',default,sysdate,0); insert into tb_news values (3,10,'氣候','甜菜菜','氣候變化該如何','氣候變化導(dǎo)致海平面上升 ',default,sysdate,0); insert into tb_news values (4,12,'霸總的日常','如糯糯','2022熱烈來襲','女主帶球跑1霸總追回99次',default,sysdate,0);commit;select * from tb_news_theme select * from tb_news

（3）登錄界面的布局與驗(yàn)證

? ? ? ?① css布局

body {margin: 0;padding: 0;font-size: 9pt; }#login {margin: auto;width: 975px;height: 368px;margin-top: 120px; }#top_left {width: 691px;height: 89px;float: left; }#top_left img {margin-left: 33px; }#top_center {width: 248px;height: 89px;background: url(../images/login_05.gif);float: left; }#center_left {width: 691px;height: 190px;background: url(../images/login_09.gif);float: left; }#center_middle {width: 248px;height: 190px;float: left;background: url(../images/login_13.gif) repeat-y; }#center_right {width: 36px;height: 190px;float: right;background: url(../images/login_11.gif); }#down_left {width: 691px;height: 89px;float: left;margin-top: 15px; }#down_center {width: 248px;height: 89px;background: url(../images/login_16.gif);float: left; }#inf {width: 691px;height: 38px;background: url(../images/login_18.gif) no-repeat; }.inf_text {display: block;width: 100px;height: 20px;font-size: 16px;font-weight: bolder;color: #fff;margin-left: 17px;margin-top: 12px;float: left; }.copyright {display: block;float: left;margin-left: 17px;margin-top: 15px; } #user{width:248px;height:40px;line-height: 40px;text-align: center; }#pwd{width:248px;height:40px;line-height: 40px;text-align: center; }#yzm{width:248px;height:40px;line-height: 40px;text-align: left;/* 左縮進(jìn) */text-indent: 2em; }#yzm input{width:80px; }#yzm span{font-size: 18px;font-weight: bold;color: red;cursor: pointer;padding-left: 20px }#mdl{width:248px;height:30px;line-height: 30px;text-align: center;color: green; }#btn{width:248px;height:40px;line-height: 40px;text-align: center; }

? ? ② 登錄界面呈現(xiàn)

? ?③ 與數(shù)據(jù)庫進(jìn)行驗(yàn)證

<%@page import="java.sql.DriverManager"%> <%@page import="java.sql.Connection"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.ResultSet"%> <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%//編碼request.setCharacterEncoding("utf-8");//獲取表單提交的值String username = request.getParameter("username");String password = request.getParameter("password");//數(shù)據(jù)庫String uname = "";String pwd = "";Class.forName("oracle.jdbc.driver.OracleDriver");String url = "jdbc:oracle:thin:@localhost:1521:orcl";Connection conn = DriverManager.getConnection(url, "scott", "123");String sql = "select * from tb_news_users where username = ? and password = ?";PreparedStatement ps = conn.prepareStatement(sql);ps.setString(1,username);ps.setString(2,password);ResultSet rs = ps.executeQuery();if(rs.next()){uname = rs.getString(1);pwd = rs.getString(2);}//驗(yàn)證if(""!=uname && ""!=pwd){request.getRequestDispatcher("admin.jsp").forward(request, response);}else{response.sendRedirect("login.jsp");}%>

（4）增加新聞

? ? ?① 增加界面布局

<%@ 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>Insert title here</title> <link rel="stylesheet" type="text/css" href="css/admin.css" /></head><body><div id="header"><div id="welcome">歡迎使用新聞管理系統(tǒng)！</div><div id="nav"><div id="logo"><img src="images/logo.jpg" alt="新聞中國" /></div><div id="a_b01"><img src="images/a_b01.gif" alt="" /></div></div></div><div id="admin_bar"><div id="status">管理員：登錄     <a href="#">退出</a></div><div id="channel"> </div></div><div id="main"><div id="opt_list"><ul><li><a href="admin.html">管  理  首  頁</a></li><li><a href="admin_addNews.html">新  聞  發(fā)  布</a></li><li><a href="admin_themeMaintain.html">主  題  維  護(hù)</a></li><li><a style="color: red;" href="#">系統(tǒng)賬號管理</a></li><li><a style="color: red;" href="#">注冊用戶管理</a></li></ul></div><div id="opt_area"><h1 id="opt_type"> 添加新聞： </h1><form action="doAddNews.jsp" method="post"><p><label> 主題 </label><select name="ntid"><option value="1">國內(nèi)</option><option value="2">國際</option><option value="3">旅游</option><option value="4">娛樂</option><option value="5">體育</option></select></p><p><label> 標(biāo)題 </label><input name="ntitle" type="text" class="opt_input" /></p><p><label> 作者 </label><input name="nauthor" type="text" class="opt_input" /></p><p><label> 摘要 </label><textarea name="nsummary" cols="40" rows="3"></textarea></p><p><label> 內(nèi)容 </label><textarea name="ncontent" cols="70" rows="10"></textarea></p><p><label> 上傳圖片 </label><input name="file" type="file" class="opt_input" /></p><input name="action" type="hidden" value="addnews"><input type="submit" value="提交" class="opt_sub" /><input type="reset" value="重置" class="opt_sub" /></form></div></div><div id="site_link"> <a href="#">關(guān)于我們</a><span>|</span> <a href="#">Aboue Us</a><span>|</span> <a href="#">聯(lián)系我們</a><span>|</span><a href="#">廣告服務(wù)</a><span>|</span> <a href="#">供稿服務(wù)</a><span>|</span> <a href="#">法律聲明</a><span>|</span> <a href="#">招聘信息</a><span>|</span><a href="#">網(wǎng)站地圖</a><span>|</span> <a href="#">留言反饋</a> </div><div id="footer"><p class="">24小時(shí)客戶服務(wù)熱線：010-68988888      <a href="#">常見問題解答</a>     新聞熱線：010-627488888<br />文明辦網(wǎng)文明上網(wǎng)舉報(bào)電話：010-627488888      舉報(bào)郵箱：<a href="#">jubao@jb-aptech.com.cn</a></p><p class="copyright">Copyright © 1999-2009 News China gov, All Right Reserver<br />新聞中國版權(quán)所有</p></div></body> </html>

?② 與數(shù)據(jù)庫進(jìn)行交互

<%@page import="java.sql.DriverManager"%> <%@page import="java.sql.Connection"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.ResultSet"%> <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%//編碼request.setCharacterEncoding("utf-8");//數(shù)據(jù)庫int nid = 0;Class.forName("oracle.jdbc.driver.OracleDriver");String url = "jdbc:oracle:thin:@localhost:1521:orcl";Connection conn = DriverManager.getConnection(url, "scott", "123");String sql = "select nvl(max(nid),0) from tb_news";PreparedStatement ps = conn.prepareStatement(sql);ResultSet rs = ps.executeQuery();if(rs.next()){nid = rs.getInt(1)+1;}String tid = request.getParameter("ntid");int ntid = Integer.valueOf(tid);String ntitle = request.getParameter("ntitle");String nauthor = request.getParameter("nauthor");String nsummary = request.getParameter("nsummary");String ncontent = request.getParameter("ncontent");//新增新聞sql = "insert into tb_news(nid,ntid,ntitle,nauthor,nsummary,ncontent,ndate,ncount) values (?,?,?,?,?,?,sysdate,0)";ps = conn.prepareStatement(sql);ps.setInt(1, nid);ps.setInt(2,ntid);ps.setString(3,ntitle);ps.setString(4,nauthor);ps.setString(5,nsummary);ps.setString(6,ncontent);int n = ps.executeUpdate();if(n>0){out.print("<script>alert('發(fā)布成功');location.href='admin.jsp'</script>");}else{out.print("<script>alert('發(fā)布失敗');location.href='add_news.jsp'</script>");}%>

總結(jié)

以上是生活随笔為你收集整理的JavaWEB快速入门之验证码及课堂项目【04】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： MAX31855热电偶转换器开发流程
下一篇： Javascript 中发出 HTTP