JavaWEB(项目分析用户登录发布新闻)
一、验证码
(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">管 理 首 页</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>");}%>
JavaWEB(项目分析用户登录发布新闻)相关推荐
- javaweb——模拟用户登录和新闻发布
目录 模拟用户登录 1.登录界面: 注意点:验证码 2.对登录界面与数据库实现数据交互: 3.登录成功页面: 新闻发布 1.发布新闻页面 2.发布新闻数据和数据交互: 注意点:新增id 3.发布新闻成 ...
- javaweb不同用户登录不同页面的页面_Java Web轻松学36 - 第二个Servlet应用租房网(1)...
本系列文章旨在记录和总结自己在Java Web开发之路上的知识点.经验.问题和思考,希望能帮助更多(Java)码农和想成为(Java)码农的人. 目录 介绍 开发环境搭建 项目总体设计 登录页面log ...
- Java-web实现用户登录、注册功能
目录 环境搭建 数据库 用户登录 需求分析 代码实现 编写UserMapper类 编写User类 编写loginServlet类 编写login.html 编写login.css 用户注册 需求分析 ...
- JavaWeb学习——用户登录案例(13)
目录 用户登录 流程说明 准备环境 基本创建 编写静态页面 存放实体类 pom导入坐标 核心配置文件,映射文件与接口 编写用户登录功能 编写接口方法 修改页面与编写Servlet 接收数据 判断输入 ...
- 简易新闻系统,功能包含用户登录、新闻发布删除、评论管理等
首页框架 实现登录页面并跳转 管理员登录成功跳转至管理员页面 实现注册页面并跳转 在主题列表页面实现弹框添加主题,并提示输入主题是否存在 编辑主题 删除主题 新闻发布 管理员登录后,点击查看新闻进入新 ...
- java wed登录面 代码_JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)...
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...
- JavaWeb实现注册登录功能并将用户数据写进数据库(商城系统第一部分)
JavaWeb实现注册登录功能并将用户数据写进数据库(商城系统第一部分) 声明:本人并非项目原创,该商城系统原创来自撩课高新强老师:https://study.163.com/course/intro ...
- javaweb关于用户是否登录全局判断,没有登录跳转到登录界面
javaweb关于用户是否登录全局判断,没有登录跳转到登录界面 有这样一个需求,用户密码登录网站,在session中保留了用户的信息,但是用户很长时间没有再操作该界面,用户的session则被浏览器清 ...
- javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
最新文章
- ArcEngine中的缩放地图
- 编译hadoop2.2.0源码时报错
- Spring Remoting: Burlap--转
- 【云上ELK系列】Logstash迁移Elasticsearch数据方法解读
- Chapter 7 Windows下pycaffe的使用之draw_net.py
- 正高变副高!高校实施“职称退步”?
- java 关联表做修改_java-图关联列表实现
- linux 下Eclipse for C/C++的不常见设置
- 对初级软件开发者的建议(1)
- mysql 索引失效情况总结
- linux pwm控制蜂鸣器 滴滴_linux pwm实现蜂鸣器
- arm版红帽企业linux,红帽:ARM架构下的Linux不是玩笑
- chrome浏览器无法安装crx插件的解决方法(以翻译插件为例)
- Android高性能日志模块-Xlog 正篇
- 两独立样本T检验实例(用SPSS16.0实现)
- Cluster analysis :Basic Concepts and Algorithms -- Part 3 Hierarchical Clustering
- 【贪心策略】区间选点问题
- 参考文献格式国家标准GB T7714-2015
- JavaEE框架类——监听器(观察者模式)和Servlet技术的监听器session沌化与活化技术
- system颜色函数