一：验证码的基本概念：
验证码是一种区分用户是计算机还是人的公共全自动程序，验证码问题由计算机生成并评判，只有人类才能解答，可以防止恶意破解密码、刷票、论坛灌水等问题，分为Gif动画验证码、手机短信验证码、手机语音验证码和视频验证码。
由于验证码是随机产生的，有很大几率会出现无法清楚识别的验证码图片，一般会有【看不清，换一张】的提示，直接点击当前的验证码图片可以完成验证码的更换，一般注册用户ID的地方以及各大论坛都要输入验证码，常见的验证码为四位数字或字母，6位数字的验证码也是很常见的。
验证码的作用：
在系统登录或者注册时，为防止有人恶意注册账号或者尝试暴力破解用户密码，常需要使用验证码来验证用户是否是人为操作。
案例：演示带验证码的登录操作(login.jsp)
%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用户登录</title>
<!-- 引入jquery -->
<script src="js/jquery-3.5.1.js"></script>
<link href="images/login.css" rel="stylesheet" type="text/css" />
<style>
*{
user-select:none;
}
</style>
<script>
//刷新验证码
function setYZM() {
//数组里面那就是需要随机的组合的字
var sc = new Array(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');
//随机的范围应该是数组的下标 0~数组的长度-1
//因为随机的是小数 所以要向下取整
//验证码是4位
var str=""
for (var i = 0; i < 4; i++) {
var f=Math.floor(Math.random()*sc.length)
str+=sc[f]
}
//将验证码丢到span中
// text() 取元素的内容
// val() 取的是表单元素的内容
$("#mys").text(str)
}
$(function() {
setYZM()
//设置mys的点击触发刷新验证码的方法
$("#mys").click(setYZM)
})
function checkForm() {
//1.判断名字是否位空
var name=$("#ba").val()
if(name.length==0){
alert("用户名必须填写")
return false
}
//2.判断密码是否位空
var pwd=$("#bb").val()
if(pwd.length==0){
alert("密码必须填写")
return false
}
//3.验证码是否一致
var y1=$("#bc").val()
var y2=$("#mys").text()
if(y1.toLowerCase()!=y2.toLowerCase()){
alert("验证码不一致")
setYZM()
return false
}
return true //提交表单
}
</script>
</head>
<body>
<form action="dologin.jsp" method="post" onsubmit="return checkForm()">
<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">
<div id="user">用 户
<input type="text" name="uname" id="ba"/>
</div>
<div id="password">密 码
<input type="password" name="upwd" id="bb"/>
</div>
<div id="password1">验证码
<input type="text" style="width:50px;" id="bc"/>
<span id="mys" style="font-size:19px;">XXXX</span>
</div>
<div id="btn">
<input type="submit" value="登录">
<input type="reset" value="取消">
</div>
</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>
</form>
</body>
</html>
中转页面
中转页面是注册页面提交数据的中转站，常以do开头，加上需要进行数据库交互的项目名。
作用：
- 获取页面提交的数据
- 进行数据库交互
- 判断是否提交到指定的页面去
案例：演示带验证码的登录中转页面操作(dologin.jsp)
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
//1.将编码格式变为utf-8
request.setCharacterEncoding("utf-8");
//取表单提交的值
String name=request.getParameter("uname");
String pwd=request.getParameter("upwd");
//到数据库做验证
//准备工作(导包)
//1.加载驱动
Class.forName("oracle.jdbc.driver.OracleDriver");
//2.获得连接
String url="jdbc:oracle:thin:@localhost:1521:orcl";
Connection con=DriverManager.getConnection(url, "scott", "123");
//3.编写sql语句
String sql="select * from tb_user where name=? and pwd=?";
//4.获得执行对象
PreparedStatement ps=con.prepareStatement(sql);
//5.设置?的值
ps.setString(1, name);
ps.setString(2, pwd);
//6.开始执行
// 增删改都返回int
// 查询返回结果集 resultSet
ResultSet rs=ps.executeQuery();
//7.判断是否登录成功 查看结果几里面是否有数据
if(rs.next()){//登录成功 跳首页
request.getRequestDispatcher("admin/index.jsp").forward(request, response);
}else{
response.sendRedirect("login.jsp");
}
//8.关闭资源 con ps rs
if(con!=null&&!con.isClosed()){
con.close();
}
if(ps!=null){
ps.close();
}
if(rs!=null){
rs.close();
}
%>
二：新闻增加操作
<%@ 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/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.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//作用：获取新增表单的数据进行数据库交互
//1.编码格式
request.setCharacterEncoding("utf-8");
//2.获取表单提交的数据
//编号
int nid = 0;//定义一个变量保存最终的id
//链接数据库查询到最大的id 最后+1
//加载驱动
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;
}
//新闻分类id
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");
//图片 (默认 到时再说)
//日期 （获取系统时间）
//点击量 默认0
//新增新闻
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>");
}
%>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
