一、验证码

(1)为什么需要验证码?

随着网络的发达,会有些人恶意注册网站,但是有了验证码之后就可以有效防止这一现象,对于网站运营商家来说,少了这些无效的注册,也更有利于管理,降低网站运营管理的难度。

对于用户来说,当账户出现异常和高风险操作都会触发验证码,验证码发到个人手机上,很好的保护了个人信息安全。

第一步:定义接收验证码的容器

    //保存验证码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 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;}

第三步:验证输入的验证码是否匹配

        //获取验证码进行匹配$("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;};

第四步:重置验证码

    /* 如果span中存储的验证码不清晰  需要重新修改 */$("code_val").onclick = function(){setCode();}

完整登录的验证码以及表单验证:

<%@ 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="data: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>

数据库的创建

--新闻发布系统的用户表
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,'lixiaojiu','9939','女','配音','慧木蓝星',0,sysdate);
insert into tb_news_users values(2,'lixiaoqi','7757','女','唱歌','水语宇星',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,'文化');
insert into tb_news_theme values(12,'其他');
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?','阿富汗被美国深深地给控制住了,现在已经自身难保了……',default,sysdate,0);
insert into tb_news values
(2,4,'男足','全中国','男足再败','深足教练组:说我们买球是侮辱, 球员:遗憾主场放跑国安 ',default,sysdate,0);
insert into tb_news values
(3,10,'气候','甜菜菜','气候变化该如何','气候变化导致海平面上升 ',default,sysdate,0);
insert into tb_news values
(4,12,'霸总的日常','如糯糯','2022热烈来袭','女主带球跑1霸总追回99次',default,sysdate,0);commit;select * from tb_news_theme
select * from tb_news

登录界面呈现

<%@ 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="data: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="data:images/logo.jpg" alt="新闻中国" /></div><div id="a_b01"><img src="data: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">管&nbsp;&nbsp;理&nbsp;&nbsp;首&nbsp;&nbsp;页</a></li><li><a href="admin_addNews.html">新&nbsp;&nbsp;闻&nbsp;&nbsp;发&nbsp;&nbsp;布</a></li><li><a href="admin_themeMaintain.html">主&nbsp;&nbsp;题&nbsp;&nbsp;维&nbsp;&nbsp;护</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 &copy; 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>");}%>

JavaWEB(项目分析用户登录发布新闻)相关推荐

  1. javaweb——模拟用户登录和新闻发布

    目录 模拟用户登录 1.登录界面: 注意点:验证码 2.对登录界面与数据库实现数据交互: 3.登录成功页面: 新闻发布 1.发布新闻页面 2.发布新闻数据和数据交互: 注意点:新增id 3.发布新闻成 ...

  2. javaweb不同用户登录不同页面的页面_Java Web轻松学36 - 第二个Servlet应用租房网(1)...

    本系列文章旨在记录和总结自己在Java Web开发之路上的知识点.经验.问题和思考,希望能帮助更多(Java)码农和想成为(Java)码农的人. 目录 介绍 开发环境搭建 项目总体设计 登录页面log ...

  3. Java-web实现用户登录、注册功能

    目录 环境搭建 数据库 用户登录 需求分析 代码实现 编写UserMapper类 编写User类 编写loginServlet类 编写login.html 编写login.css 用户注册 需求分析 ...

  4. JavaWeb学习——用户登录案例(13)

    目录 用户登录 流程说明 准备环境 基本创建 编写静态页面 存放实体类 pom导入坐标 核心配置文件,映射文件与接口 编写用户登录功能 编写接口方法 修改页面与编写Servlet 接收数据 判断输入 ...

  5. 简易新闻系统,功能包含用户登录、新闻发布删除、评论管理等

    首页框架 实现登录页面并跳转 管理员登录成功跳转至管理员页面 实现注册页面并跳转 在主题列表页面实现弹框添加主题,并提示输入主题是否存在 编辑主题 删除主题 新闻发布 管理员登录后,点击查看新闻进入新 ...

  6. java wed登录面 代码_JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)...

    下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...

  7. JavaWeb实现注册登录功能并将用户数据写进数据库(商城系统第一部分)

    JavaWeb实现注册登录功能并将用户数据写进数据库(商城系统第一部分) 声明:本人并非项目原创,该商城系统原创来自撩课高新强老师:https://study.163.com/course/intro ...

  8. javaweb关于用户是否登录全局判断,没有登录跳转到登录界面

    javaweb关于用户是否登录全局判断,没有登录跳转到登录界面 有这样一个需求,用户密码登录网站,在session中保留了用户的信息,但是用户很长时间没有再操作该界面,用户的session则被浏览器清 ...

  9. javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册

    一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...

最新文章

  1. ArcEngine中的缩放地图
  2. 编译hadoop2.2.0源码时报错
  3. Spring Remoting: Burlap--转
  4. 【云上ELK系列】Logstash迁移Elasticsearch数据方法解读
  5. Chapter 7 Windows下pycaffe的使用之draw_net.py
  6. 正高变副高!高校实施“职称退步”?
  7. java 关联表做修改_java-图关联列表实现
  8. linux 下Eclipse for C/C++的不常见设置
  9. 对初级软件开发者的建议(1)
  10. mysql 索引失效情况总结
  11. linux pwm控制蜂鸣器 滴滴_linux pwm实现蜂鸣器
  12. arm版红帽企业linux,红帽:ARM架构下的Linux不是玩笑
  13. chrome浏览器无法安装crx插件的解决方法(以翻译插件为例)
  14. Android高性能日志模块-Xlog 正篇
  15. 两独立样本T检验实例(用SPSS16.0实现)
  16. Cluster analysis :Basic Concepts and Algorithms -- Part 3 Hierarchical Clustering
  17. 【贪心策略】区间选点问题
  18. 参考文献格式国家标准GB T7714-2015
  19. JavaEE框架类——监听器(观察者模式)和Servlet技术的监听器session沌化与活化技术
  20. system颜色函数

热门文章

  1. python 离线翻译软件_简单翻译软件
  2. UnityShader水墨渲染的尝试
  3. Unity Shader学习:水墨效果
  4. 计算机cpu占用率高,计算机的CPU占用率过高时怎么办
  5. Android 扫码登录案例
  6. 红酒数据探索(Python内置对象)
  7. 歌尔2718硅咪 超小体积 S15OB383-058 S15OB381-055 S15OT421-001
  8. MySql 别犯糊涂了! LEFT JOIN 的 ON 后接上筛选条件,多个条件会出事!
  9. 写一个程序输入一个国家的国家名,输出该国的首都名。
  10. OllyDbg的简单使用