本章目录
ba、判断用户名、密码、验证码不能为空且验证码必须和随机产生的数相匹配
各位看官好，今天我带来的是JSP的登录和登录常见的随机验证码以及如何在页面上把数据增加到Oracle数据库中。
但是讲到这里，我们先进入一下上篇文章知识点的一个简单的回顾
一、知识点回顾
a、页面跳转的方式以及区别
b、小题问的答案
c、jdbc连接数据库
OK，现在进入我们今日的学习
二、验证码和登录
a、验证码
在登录页面中产生4位随机的验证码
aa、首先还是老样子导入jdbc需要的jar包
目录不能出错哦。
ab、界面图
ac、代码展示
<!-- 引入jQuery类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() {
myf();
//给验证码添加点击事件
$("#yzm").click(function() {
myf();//刷新验证码
});
})
//随机验证码=刷新验证码
function myf(){
//下标：0-33
var arr = new Array(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');//所有候选组成验证码的字符，当然也可以用中文的
var str = "";//用来拼接
for(var i=0;i<4;i++){
//随机数 无限逼近0-33 四舍五入
var a=Math.round(Math.random()*33);//下标
//console.info(arr[a]);//根据下标取元素
str+=arr[a];
}
//给span赋值
$("#yzm").html(str);//innerHTML
}
</script>
</head>
<body>
<form action="dologin.jsp" method="post" onsubmit="return yzLogin()">
<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">
<div id="user">用 户
<input type="text" name="aa" id="xx"/>
</div>
<div id="password">密 码
<input type="password" name="bb" id="yy"/>
</div>
<div id="password">验证码
<input id="zz" style="width: 40px" type="text" name="cc" />
<span id="yzm" style="color:red;font-size:20px;cursor:pointer;">XXXX</span>
</div>
<div id="btn">
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</div>
</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>
</form>
</body>b、登陆
通过jdbc连接Oracle实现登录效果
ba、判断用户名、密码、验证码不能为空且验证码必须和随机产生的数相匹配
在ac的代码基础上添加表单验证方法：
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() {
myf();
//给验证码添加点击事件
$("#yzm").click(function() {
myf();//刷新验证码
});
})
//随机验证码=刷新验证码
function myf(){
//下标：0-33
var arr = new Array(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');//所有候选组成验证码的字符，当然也可以用中文的
var str = "";//用来拼接
for(var i=0;i<4;i++){
//随机数 无限逼近0-33 四舍五入
var a=Math.round(Math.random()*33);//下标
//console.info(arr[a]);//根据下标取元素
str+=arr[a];
}
//给span赋值
$("#yzm").html(str);//innerHTML
}
//验证登录
function yzLogin() {
//依次获取用户名、密码
var name=$("#xx").val();
var pwd=$("#yy").val();
var yzm1=$("#zz").val();
var yzm2=$("#yzm").html();
if(name==""){
alert("用户名不能为空");
return false;
}
if(pwd==""){
alert("密码不能为空");
return false;
}
if(yzm1==""){
alert("验证码不能为空");
return false;
}
else{
if(yzm1!=yzm2){
alert("验证码有误")
return false;
}
}
return false;
}
</script>bb、另建一个jsp文件，使用jdbc连接数据库验证
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//设置编码方式
request.setCharacterEncoding("utf-8");
//接收表单提交过来的值：用户名 密码
String name=request.getParameter("aa");
String pwd=request.getParameter("bb");
//jdbc连接Oracle做判断
String URL="jdbc:oracle:thin:@localhost:1521:orcl";
String CNAME="oracle.jdbc.driver.OracleDriver";
//加载驱动
Class.forName(CNAME);
//创建连接
Connection con=DriverManager.getConnection(URL,"scott","tiger");
//定义sql语句
String sql="select *from tb_0325 where sname=? and spwd=?";
//获得执行对象
PreparedStatement ps=con.prepareStatement(sql);
//给占位符赋值
ps.setString(1, name);
ps.setString(2, pwd);
//开始执行
ResultSet rs=ps.executeQuery();
//判断 遍历
if(rs.next()){
//说明登录成功
//重定向
//response.sendRedirect("news/admin.jsp");
//转发
request.getRequestDispatcher("news/admin.jsp").forward(request, response);
}
else{
//说明登录失败
out.print("<script>alert('用户名或者密码有误');location.href='login.jsp';</script>");
}
//关闭资源
if(con!=null&&!con.isClosed()){
con.close();
}
if(ps!=null){
ps.close();
}
if(rs!=null){
rs.close();
}
%>
三、增加
我们用增加新闻的案例来完成。
a、搭界面
界面图：
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>添加主题--管理后台</title>
<link href="/s4/css/admin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="welcome">欢迎使用新闻管理系统！</div>
<div id="nav">
<div id="logo"><img src="/s4/images/logo.jpg" alt="新闻中国" /></div>
<div id="a_b01"><img src="/s4/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="../newspages/news_add.jsp">添加新闻</a></li>
<li><a href="../admin.jsp">编辑新闻</a></li>
<li><a href="#">查找新闻</a></li>
<li><a href="../newspages/topic_add.jsp">添加主题</a></li>
<li><a href="#">编辑主题</a></li>
</ul>
</div>
<div id="opt_area">
<h1 id="opt_type"> 添加新闻： </h1>
<form action="doadd.jsp" method="post">
<p>
<label> 主题 </label>
<select name="ntid">
<option value="1">选择</option>
<option value='1'> 国内 </option>
<option value='2'> 国际 </option>
<option value='3'> 军事 </option>
<option value='4'> 体育 </option>
<option value='5'> 娱乐 </option>
<option value='6'> 社会 </option>
<option value='7'> 财经 </option>
<option value='8'> 科技 </option>
<option value='9'> 健康 </option>
<option value='10'> 汽车 </option>
<option value='11'> 教育 </option>
<option value='12'> 房产 </option>
<option value='13'> 家居 </option>
<option value='14'> 旅游 </option>
<option value='15'> 文化 </option>
<option value='16'> 其他 </option>
</select>
</p>
<p>
<label> 标题 </label>
<input name="ntitle" id="aa" type="text" class="opt_input" onblur="mya();"/>
</p>
<p>
<label> 作者 </label>
<input name="nauthor" id="bb" type="text" class="opt_input" onblur="myb();"/>
</p>
<p>
<label> 摘要 </label>
<textarea name="nsummary" id="cc" cols="40" rows="3" onblur="myc();"></textarea>
</p>
<p>
<label> 内容 </label>
<textarea name="ncontent" id="dd" cols="70" rows="10" onblur="myd();"></textarea>
</p>
<p>
<label> 上传图片 </label>
<input name="file" type="file" id="ee" class="opt_input" onblur="myf();"/>
</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>
注意：我用了css层叠样式
b、使用jdbc连接数据库实现(增加到数据库里)
代码：
<%@page import="java.util.Date"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String ntid=request.getParameter("ntid");//主题
String ntitle =request.getParameter("ntitle");//标题
String nauthor=request.getParameter("nauthor");//作者
String nsummary=request.getParameter("nsummary");//摘要
String ncontent=request.getParameter("ncontent");//内容
String naddtime=new Date().toLocaleString();//取系统当前时间
/*主键：唯一且不为空
1.标识列：触发器+序列
2.取 表主键的最大序号+1
*/
String URL="jdbc:oracle:thin:@localhost:1521:orcl";
String CNAME="oracle.jdbc.driver.OracleDriver";
Class.forName(CNAME);
Connection con= DriverManager.getConnection(URL,"scott","tiger");
//定义sql语句
String sql="select nvl(max(nid),0)+1 from news280";
PreparedStatement ps=con.prepareStatement(sql);
ResultSet rs=ps.executeQuery();
int nid=0;//扩大作用域
if(rs.next()){
nid=rs.getInt(1)+1;//表的最大序号+1
}
//实现增加=插入操作
sql="insert into news280(nid,tid,ntitle,nauthor,nsummary,ncontent,naddtime) values(?,?,?,?,?,?,?)";
//执行sql语句
ps=con.prepareStatement(sql);
//给占位符赋值
ps.setInt(1, nid);
ps.setInt(2, Integer.parseInt(ntid));//String-->int
ps.setString(3, ntitle);
ps.setString(4, nauthor);
ps.setString(5, nsummary);
ps.setString(6, ncontent);
ps.setString(7, naddtime);
//获得影响行数
int n=ps.executeUpdate();
//关闭资源
if(con!=null&&!con.isClosed()){
con.close();
}
if(ps!=null){
ps.close();
}
if(rs!=null){
rs.close();
}
if(n>0){
out.print("插入成功");
}
else{
out.print("插入失败");
}
%>四、绝对路径&相对路径
a、绝对路径是什么？相对路径是什么？
b、绝对路径的优点/缺点&相对路径的优点/缺点
其实什么时候使用绝对路径和相对路径没有绝对的答案，根据不同的情况使用不同的路径。
OK，以上所有就是今日学习的所有内容了，我是小陽，欢迎个位看官能观看我的文章，如果有写的不好/不足的地方欢迎大家指出来，博主会做出改变，如对各位有所帮助，不介意各位留下免费的三连哦！
