一、验证码
（1）为什么需要验证码？
随着网络的发达，会有些人恶意注册网站，但是有了验证码之后就可以有效防止这一现象，对于网站运营商家来说，少了这些无效的注册，也更有利于管理，降低网站运营管理的难度。
对于用户来说，当账户出现异常和高风险操作都会触发验证码，验证码发到个人手机上，很好的保护了个人信息安全。
第一步：定义接收验证码的容器
//保存验证码
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>数据库的创建
--新闻发布系统的用户表 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
登录界面呈现
<%@ 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");
}
%>① 增加界面布局
<%@ 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>");
}
%>
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
