JavaWEB快速入门之验证码及课堂项目【04】
生活随笔
收集整理的這篇文章主要介紹了
JavaWEB快速入门之验证码及课堂项目【04】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、驗證碼
? ?（1）為什么需要驗證碼？
? ? ? ? ? ? 隨著網絡的發達，會有些人惡意注冊網站，但是有了驗證碼之后就可以有效防止這一現象，對于網站運營商家來說，少了這些無效的注冊，也更有利于管理，降低網站運營管理的難度。
? ? ? ? ?對于用戶來說，當賬戶出現異常和高風險操作都會觸發驗證碼，驗證碼發到個人手機上，很好的保護了個人信息安全。
? （2）利用javaweb技術設置驗證碼
? ? ? ?① 第一步：定義接收驗證碼的容器
//保存驗證碼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 setCode(){//清空上一次保留的驗證碼code = "";//通過Math.random();產生一個隨機數for(var i = 0;i<4;i++){/* 取范圍 乘 數組的長度個數 */var sj = Math.floor(Math.random()*arr.length);//console.log(sj)//console.log(arr[sj]); //根據隨機數獲取數組中的元素code+=arr[sj];}//獲取存儲驗證碼的span標簽$("code_val").innerHTML = code;}? ? ③ 第三步：驗證輸入的驗證碼是否匹配
//獲取驗證碼進行匹配$("code").onblur = function(){//獲取輸入項中的驗證碼var inputCode = this.value;//獲取span標簽隨機生成保留的驗證碼var spanCode = $("code_val").innerHTML;if(!inputCode){alert('驗證碼不能為空');return false;}else{//編寫了驗證碼if(inputCode!=spanCode){alert('驗證碼輸入錯誤');this.value = "";//重新生成return false;}}return true;};? ④ 第四步：重置驗證碼
/* 如果span中存儲的驗證碼不清晰 需要重新修改 */$("code_val").onclick = function(){setCode();}完整登錄的驗證碼以及表單驗證：
<%@ 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> <!-- 引入login.css --> <link rel="stylesheet" type="text/css" href="css/login.css"/> <!-- javascript表單驗證 --> <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);}//加載函數window.onload = function(){//用戶名焦點事件$("username").onblur = function(){var usernameValue = this.value;if(!usernameValue){alert('用戶名不能為空')return false;}return true;}//密碼的焦點事件$("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;}//驗證驗證碼$("code").onblur = function(){var inputCode = this.value;var spanCode = $("code_val").innerHTML;if(!inputCode){alert('驗證碼不能為空');return false;}else{if(inputCode!=spanCode){alert('驗證碼輸入錯誤');this.value = "";return false;}}return true;};setCode();//點擊更換驗證碼$("code_val").onclick = function(){setCode();}};//編寫生成驗證碼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">驗證碼 <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">管理信息系統 2008 v2.0</span></div></div><div id="down_center"></div></div></div></body> </html>二、課堂項目（新聞發布系統）?
? ? ?（1）項目需求分析??
Javaweb新聞發布系統項目分析根據模板分析，可以分為前端和后臺 1.前端后端功能分析 前端功能： 1.用戶登錄 2.用戶注冊 3.新聞分類顯示 4.新聞信息顯示 5.分頁功能（首頁，下一頁，上一頁，尾頁） 6.歷史記錄功能 7.評論模塊 后臺功能： 1.管理員登錄 2.主頁默認顯示所有新聞+分頁 3.發布新聞 4.修改新聞 5.新聞分類模塊：增刪改查模塊 6.評論模塊：增刪改查 7.普通用戶管理：增刪改查 8.分頁功能2.數據表分析 從模板中分析到有以下數據表：用戶表（普通用戶+管理員），新聞分類標，新聞信息表，評論表用戶信息表： 字段名 中文說明 數據類型 約束 備注 Userid 編號 Number 主鍵 Username 用戶名 Varchar2 Password 密碼 Varchar2 sex 性別 Varchar2 Hobby 愛好 Varchar2 address 地址 Varchar2 urole 權限 number 0管理員 1普通用戶（默認） udate 注冊時間 date 新聞分類表|新聞主題表 字段名 中文說明 數據類型 約束 備注 Tid 分類編號 Nunber 主鍵 tname 分類名稱 Varchar2 新聞信息表： 字段名 中文說明 數據類型 約束 備注 Nid 新聞編號 Number 主鍵 nTid 新聞分類編號 Number 外鍵 Ntitle 標題 Varchar2 Nauthor 作者 Varchar2 nsummary 摘要 Varchar2 ncontent 內容 Varchar2 nimage 圖片 Varchar2 ncount 點擊量 number ndate 發布時間 date（2）數據庫的創建
--新聞發布系統的用戶表 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 ） --插入數據 insert into tb_news_users values(1,'lixiaojiu','9939','女','配音','慧木藍星',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) ) --插入數據 insert into tb_news_theme values(1,'國內'); 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,'財經'); insert into tb_news_theme values(8,'房產'); 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) ) --插入數據 insert into tb_news values (1,2,'阿富汗','一張張','當今局勢1?','阿富汗被美國深深地給控制住了，現在已經自身難保了……',default,sysdate,0); insert into tb_news values (2,4,'男足','全中國','男足再敗','深足教練組：說我們買球是侮辱， 球員:遺憾主場放跑國安 ',default,sysdate,0); insert into tb_news values (3,10,'氣候','甜菜菜','氣候變化該如何','氣候變化導致海平面上升 ',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）登錄界面的布局與驗證
? ? ? ?① 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;/* 左縮進 */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; }? ? ② 登錄界面呈現
<%@ 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> <!-- 引入login.css --> <link rel="stylesheet" type="text/css" href="css/login.css"/> <!-- javascript表單驗證 --> <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);}//加載函數window.onload = function(){//用戶名焦點事件$("username").onblur = function(){var usernameValue = this.value;if(!usernameValue){alert('用戶名不能為空')return false;}return true;}//密碼的焦點事件$("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;}//驗證驗證碼$("code").onblur = function(){var inputCode = this.value;var spanCode = $("code_val").innerHTML;if(!inputCode){alert('驗證碼不能為空');return false;}else{if(inputCode!=spanCode){alert('驗證碼輸入錯誤');this.value = "";return false;}}return true;};setCode();//點擊更換驗證碼$("code_val").onclick = function(){setCode();}};//編寫生成驗證碼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">驗證碼 <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">管理信息系統 2008 v2.0</span></div></div><div id="down_center"></div></div></div></body> </html>? ?③ 與數據庫進行驗證
<%@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");//數據庫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);}//驗證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">歡迎使用新聞管理系統！</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">新 聞 發 布</a></li><li><a href="admin_themeMaintain.html">主 題 維 護</a></li><li><a style="color: red;" href="#">系統賬號管理</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">國內</option><option value="2">國際</option><option value="3">旅游</option><option value="4">娛樂</option><option value="5">體育</option></select></p><p><label> 標題 </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> 內容 </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="#">關于我們</a><span>|</span> <a href="#">Aboue Us</a><span>|</span> <a href="#">聯系我們</a><span>|</span><a href="#">廣告服務</a><span>|</span> <a href="#">供稿服務</a><span>|</span> <a href="#">法律聲明</a><span>|</span> <a href="#">招聘信息</a><span>|</span><a href="#">網站地圖</a><span>|</span> <a href="#">留言反饋</a> </div><div id="footer"><p class="">24小時客戶服務熱線：010-68988888      <a href="#">常見問題解答</a>     新聞熱線：010-627488888<br />文明辦網文明上網舉報電話：010-627488888      舉報郵箱：<a href="#">jubao@jb-aptech.com.cn</a></p><p class="copyright">Copyright © 1999-2009 News China gov, All Right Reserver<br />新聞中國 版權所有</p></div></body> </html>?② 與數據庫進行交互
<%@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");//數據庫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('發布成功');location.href='admin.jsp'</script>");}else{out.print("<script>alert('發布失敗');location.href='add_news.jsp'</script>");}%>總結
以上是生活随笔為你收集整理的JavaWEB快速入门之验证码及课堂项目【04】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MAX31855热电偶转换器开发流程
- 下一篇： Javascript 中发出 HTTP