一、验证码
1.为什么需要验证码？
随着网络的发达，会有些人恶意注册网站，但是有了验证码之后就可以有效防止这一现象，对于网站运营商家来说，少了这些无效的注册，也更有利于管理，降低网站运营管理的难度。
对于用户来说，当账户出现异常和高风险操作都会触发验证码，验证码发到个人手机上，很好的保护了个人信息安全。
2.利用javaweb技术设置验证码
第一步：定义接收验证码的容器
第二步 ：封装验证的生成方法，利用随机数的原理，随机出现四个数
第三步 ：验证输入的验证码是否匹配
第四步 ：重置验证码
二、项目演示
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 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");
}
%>增加界面布局：
<%@ 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>");
}
%>
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
