文章目录
- 一、验证码
- 二、项目演示
一、验证码
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
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>
