一、验证码
实现简单的验证码思路:假设验证码是四位由数字和英文字母组成
1.首先我们需要一个数组来装下这个随机数(没有1和0是因为为了提高用户的体验感)
//下标: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');//所有候选组成验证码的字符,当然也可以用中文的
2.然后我们根据随机下标拿到对应的值在循环四次就可以拿到我们想要的4位组成的验证码
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]; }
3.最后给我们装验证码的容器赋值即可,我这里用的是span标签
//给span赋值 $("#yzm").html(str);//innerHTML
4.实现点击验证码就自动切还(给这个验证码容器添加点击事件即可)
//这里我用的是js的函数 $(function(){ myf(); //给验证码添加点击事件 $("#yzm").click(function(){ myf();//刷新验证码 }); })
5.若大家想要实现大小写都可用可以把输入内容转为全大写或者全小写
二、登录
要实现登录首先我们需要有在数据库有一个用户表来装用户名及密码
其次就要先在登录页面判断用户名密码验证码是否正确
//这里我只判断了不能为空及验证码要正确 //验证登录 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{//当验证码不为空的情况下 //作业1:要求验证码不区分大小写 if(yzm1!=yzm2){//不一致的时候 提示 alert("验证码有误"); myf();//刷新验证码 $("#zz").val("");//清空文本框 return false; } } return true; }
<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"> <!-- <a href="#">登录</a> <a href="#">清空</a> --> <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>
若符合以上条件则跳到dologin页面进行判断数据库是否存在
//设置编码方式 request.setCharacterEncoding("utf-8"); //接收表单提交过来的值:用户名 密码 根据name值取value值 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变迁添加href)
然后我们写一个页面来接收增加页面传过来的值
//设置编码方式 request.setCharacterEncoding("utf-8"); //接收表单提交过来的值//括号里的代表我对应的id 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"); String sql="select nvl(max(nid),0) 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)); 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){//说明发表成功 //新闻主界面 response.sendRedirect("/s4/news/admin.jsp"); } else{//说明发表失败 out.print("<script>alert('发表失败');location.href='add.jsp';</script>"); }