前提操作：
注意：导入jar包 、打开数据库的服务和·监听、建文件等操作请回顾上一篇文章
javaweb之页面跳转方式&JDBC交互_云彩123的博客-CSDN博客
根据模板分析，可以分为前端和后台
1.前端后端功能分析
前端功能：
- 用户登录
- 用户注册
- 新闻分类显示
- 新闻信息显示
- 分页功能（首页，下一页，上一页，尾页）
- 历史记录功能
- 评论模块
后台功能：
- 管理员登录
- 主页默认显示所有新闻+分页
- 发布新闻
- 修改新闻
- 新闻分类模块：增删改查模块
- 评论模块：增删改查
- 普通用户管理：增删改查
- 分页功能
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 |
新闻发布系统数据库代码：
--新闻发布系统的用户表
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,'admin','123','男','玩游戏','湖南长沙',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,'动漫');
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','东方不败','这是一个怎样的故事1?','那是一个风雨交加的夜晚,毒瘤先生走进了一个无名山洞,做了一件难以忘记的事情',default,sysdate,0);
insert into tb_news values
(2,2,'毒瘤爱上女总裁2','zkingzz','这是一个怎样的故事2?','那是一个风雨交加的夜晚,毒瘤先生走进了一个无名山洞,做了一件难以忘记的事情',default,sysdate,0);
insert into tb_news values
(3,2,'毒瘤爱上女总裁3','admin','这是一个怎样的故事3?','那是一个风雨交加的夜晚,毒瘤先生走进了一个无名山洞,做了一件难以忘记的事情',default,sysdate,0);
insert into tb_news values
(4,2,'毒瘤爱上女总裁4','宋威','这是一个怎样的故事4?','那是一个风雨交加的夜晚,毒瘤先生走进了一个无名山洞,做了一件难以忘记的事情',default,sysdate,0);
commit;
select * from tb_news_theme
select * from tb_news
以下代码利用eclipse进行执行：
doLogin.jsp文件
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//该页面的作用：处理登录页面提交的数据进行数据库交互
//1.设置request请求对象的编码格式
request.setCharacterEncoding("utf-8");
//2.根据reuqest对象获取表单提交的值
String username = request.getParameter("username");
String password = request.getParameter("password");
//3.与数据库进行交互 判断数据库中是否存在username和passowrd
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");
//编写登录的sql语句
String sql = "select * from tb_0325_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(2);
pwd = rs.getString(3);
}
//判断uname和pwd是否为空 为空 说明提供的账号或密码错误 不为空 查到了 可以登录
if(""!=uname && ""!=pwd){//可以登录
//转发
request.getRequestDispatcher("success.jsp").forward(request, response);
}else{//为空 不可以登录
//重定向
response.sendRedirect("login.jsp");
}
%>doRegister.jsp文件：
<%@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.获取表单的数据
//账号
String username = request.getParameter("username");
//密码
String password = request.getParameter("password");
//性别
String sex = request.getParameter("sex");
//爱好
String[] hobbys = request.getParameterValues("hobby");
String hobby = "";
if(null!=hobbys){
for(String h:hobbys){
hobby+=h+",";
}
//将最后一个,截取掉
hobby = hobby.substring(0,hobby.lastIndexOf(','));
}
//地址
String address = request.getParameter("address");
//编号： 由于Oracle数据中没有标识列
//实现标识列2种方式： 1.oracle触发器+序列 2.通过java方式每次获取最大id+1
int userid = 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(userid),0) from tb_0325_users";
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
if(rs.next()){
userid = rs.getInt(1)+1;
}
//进行注册了
//新增的sql语句
sql = "insert into tb_0325_users values (?,?,?,?,?,?)";
ps = conn.prepareStatement(sql);
ps.setInt(1, userid);
ps.setString(2,username);
ps.setString(3,password);
ps.setString(4,sex);
ps.setString(5,hobby);
ps.setString(6,address);
int n = ps.executeUpdate();
if(n>0){
out.println("<script>alert('注册成功');location.href='login.jsp'</script>");
}else{
out.println("<script>alert('注册失败');location.href='register.jsp'</script>");
}
%>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>
</head>
<body>
<h2>用户登录</h2>
<hr/>
<form action = "doLogin.jsp" method = "post">
用户名: <input type = "text" name = "username"/>
<br/><br/>
密码: <input type = "password" name = "password"/>
<br/><br/>
<input type = "submit" value = "登录"/>
</form>
</body>
</html>register.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>
</head>
<body>
<h2>用户注册页面</h2>
<hr />
<form action="doRegister.jsp" method="post">
用户名: <input type="text" name="username" />
<br />
<br />
密码: <input type="password" name="password" />
<br />
<br />
性别:
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<br />
<br />
爱好:
<input type="checkbox" value="锤宋威" name="hobby" />锤宋威
<input type="checkbox" value="跑步" name="hobby" />跑步
<input type="checkbox" value="玩游戏" name="hobby" />玩游戏
<input type="checkbox" value="玩毛线" name="hobby" />玩毛线
<input type="checkbox" value="撸肉" name="hobby" />撸肉
<br />
<br />
地址: <input type="text" name="address" />
<br />
<br />
<input type="submit" value="注册" />
</form>
</body>
</html>success.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>
</head>
<body>
<h1>欢迎<%=request.getParameter("username") %>来到主页！！！</h1>
</body>
</html>admin:
<%@ 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 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">管理员：<%=request.getParameter("username") %> 登录      <a href="#">login out</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="add_news.jsp">新 闻 发 布</a></li>
<li><a href="admin_themeMaintain.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">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
function clickdel() {
return confirm("删除请点击确认");
}
</script>
<ul class="classlist">
<li> <a href="admin_newsDetail.html">深足教练组：说我们买球是侮辱 朱广沪常暗中支招</a> <span> 作者：
sport
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 省政府500万悬赏建业登顶 球员:遗憾主场放跑国安 <span> 作者：
sport
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 洪元硕：北京人的脸就看你们了 最后一哆嗦看着办 <span> 作者：
sport
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 临界冠军京城夺票总动员 球迷:夺冠!让所有人闭嘴 <span> 作者：
sport
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 一纸传真暗含申花处理态度 国足征调杜威突生悬疑 <span> 作者：
sport
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li class='space'></li>
<li> 气候变化导致海平面上升 <span> 作者：news
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 商贸联委会在杭州开会 中美对贸易争端态度低调 <span> 作者：news
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 迟福林：“十二五”改革应向消费大国转型 <span> 作者：
news
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 伊朗称放弃美元作为外储地位 人民币或上位 <span> 作者：
out
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> “持械抢劫，当场击毙” 浙江永康现超雷人标语 <span> 作者：
news
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li class='space'></li>
<li> 国内成品油价格上调几成定局 <span> 作者：
news
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 俄数百所幼儿园和学校因流感停课 <span> 作者：
news
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 喀布尔市中心传出爆炸和枪声 目前原因不明 <span> 作者：
out
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 国台办介绍大陆高校加大对台招生力度情况 <span> 作者：
news
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li> 国台办将授权福建等六省市部分赴台管理审批权 <span> 作者：
news
     <a href='admin_editNews.html'>修改</a>      <a href='#' onclick='return clickdel()'>删除</a>
</span> </li>
<li class='space'></li>
<p align="right"> 当前页数:[1/3] <a href="#">下一页</a> <a href="#">末页</a> </p>
</ul>
</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>");
}
%>
<%@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"%>
<%
//该页面作用：根据request对象获取登录表单提交的值进行数据库交互
//1.设置编码
request.setCharacterEncoding("utf-8");
//2.获取表单提交的值
//用户名
String username = request.getParameter("username");
//密码
String password = request.getParameter("password");
//3.数据库交互
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");
//sql
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{
//out.println(js)
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>新闻发布系统-管理员登录</title>
<!-- 引入login.css -->
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<!-- JavaScript 验证表单区域 -->
<script type="text/javascript">
var code = "";//保存验证码
//验证的需求：利用随机数 +拼接+数组存储需要随机的字符
var arr =['a','b','c','d','e','f','g','h','i','j','k','l','0','1','2','3','4','5','6','7','8','9'];
function $(id){
return document.getElementById(id);
}
//加载函数
window.onload = function(){
//设置username的焦点事件
$("username").onblur = function(){
var usernameValue = this.value;
if(!usernameValue){
alert('用户名不能为空')
return false;
}
return true;
}
//设置password的焦点事件
$("password").onblur = function(){
var passwordValue = this.value;
if(!passwordValue){
alert('密码不能为空')
return false;
}
return true;
}
//获取表单设置表单的阻止提交事件
$("myForm").onsubmit = function(){
if(!$("username").onblur() || !$("password").onblur() || !$("code").onblur()){
return false;
}
return true;
}
//获取验证码进行匹配
$("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;
};
//问题：验证码的实现通过什么技术？
//随机生成的验证码 有四个字母或者数字？ 随机
//javascript 随机器 Math.random() 0-1之间
//生成一个0-9的随机数
/* var sj = Math.random()*10;
// 向下取整
console.log(Math.floor(sj)); */
setCode();
/* 如果span中存储的验证码不清晰 需要重新修改 设置span的点击事件 */
$("code_val").onclick = function(){
setCode();
}
};
//封装验证码生成
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;
}
</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" style = "background:pink">
<form id = "myForm" action = "doLogin.jsp" method = "post">
<div id="user">用 户
<input type="text" id= "username" name="username" />
</div>
<div id="pwd">密 码
<input type="password" id = "password" name="password" />
</div>
<!-- 登录前需要验证码进行验证 -->
<div id = "yzm">
验证码 <input type ="text" name = "code" id = "code"/><span id = "code_val">SBSB</span>
</div>
<!-- 区域留出来 7天免登录-->
<div id = "mdl">
</div>
<div id="btn">
<input type = "submit" value = "登录"/>
<input type = "reset" value = "清空"/>
</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>
