javaWeb_验证码以及课堂项目

最新推荐文章于 2023-12-22 12:13:31 发布

鸣名旧

最新推荐文章于 2023-12-22 12:13:31 发布

阅读量255

点赞数 1

文章标签： eclipse

本文链接：https://blog.csdn.net/m0_67771087/article/details/123833019

版权

一、验证码
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>

鸣名旧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaWeb_验证码以及课堂项目

一、验证码1.为什么需要验证码？随着网络的发达，会有些人恶意注册网站，但是有了验证码之后就可以有效防止这一现象，对于网站运营商家来说，少了这些无效的注册，也更有利于管理，降低网站运营管理的难度。对于用户来说，当账户出现异常和高风险操作都会触发验证码，验证码发到个人手机上，很好的保护了个人信息安全。2.利用javaweb技术设置验证码第一步：定义接收验证码的容器第二步：封装验证的生成方法，利用随机数的原理，随机出现四个数...
复制链接

扫一扫