基于JavaScript的网页设计

基于JavaScript的网页设计

所用软件:Notepad++
基本功能:实现“学生信息管理系统”,实现基础的增,删,改,查,以及一些“花里胡哨”的操作。
(代码及图片文件在文末)

文章目录

  • 基于JavaScript的网页设计
    • 基础的“增删查改”
      • 配置的文件(这两个放在新建的“inc”文件夹下)
      • 主界面框架及“查”功能的实现
      • 信息增加界面——“增”
      • 信息修改界面——“改”
      • 信息删除——“删”
    • “花里胡哨”的附加功能
      • 登录界面
      • 注册界面
      • 忘记密码界面
      • 登录判断
      • 过滤器(防止用户不通过登录,直接访问网页)
    • 源文件

基础的“增删查改”

配置的文件(这两个放在新建的“inc”文件夹下)

这个放在每个网页文件开头处
connmysql.jsp:

<%@ page language="java" import="java.sql.*"%>
<%
Class.forName("com.mysql.jdbc.Driver").newInstance(); 
String url="jdbc:mysql://127.0.0.1:3306/qq?useUnicode=true&characterEncoding=utf8";
String dbusername="root";
String dbpassword="123456";
Connection conn=null;
Statement stmt=null;
Statement stmt2=null;
try{
 conn= DriverManager.getConnection(url,dbusername,dbpassword);
 stmt=conn.createStatement();
 stmt2=conn.createStatement();
%>

这个放在每个网页文件结尾处
connmysql_close.jsp:

<%@ page language="java" import="java.sql.*"%>
<%
}catch(Exception e){
 System.out.println(request.getRequestURI()+" conn error:"+e.getMessage());
}finally{
 stmt2.close();
 stmt.close();
 conn.close();
}
%>

主界面框架及“查”功能的实现

演示:

代码:
student.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<center>
<title>学生成绩列表</title>
<link rel="stylesheet" type="text/css" href="css/inputstyle.css" />
<style type="text/css">
<!--
.STYLE1 {color: #666666}
-->
</style>
</center>
</head>
<%
//处理查询的操作
String sname="";
sname=request.getParameter("sname");//这个方法用来取出JSP中的input的值
if(sname==null){sname="";}
sname=new String(sname.getBytes("iso-8859-1"),"utf-8");
String cond="";
if(!"".equals(sname)){
 cond=" AND name LIKE '%"+sname+"%'";
}else{
 cond="";
}
%>
<body>
<style>
 body{
  background-image:url("009.jpg");
  background-size: 100%;
  color:black;
 }
</style>
<form name="myForm" method="post" action="">
<center>
  <table width="60%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center" class="tableTitle">学生成绩列表</div></td>
    </tr>
    <tr>
      <td color="black">请输出学生姓名:
      <input name="sname" type="text" id="sname" size="15" color="black">
      <input name="btn1" type="submit" id="btn1" value="查询"></td color="black">
    </tr>
    <tr>
      <td><table width="800" height="100" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#999999"><div align="center" class="STYLE1">序号</div></td>
          <td bgcolor="#999999"><div align="center" class="STYLE1">姓名</div></td>
          <td bgcolor="#999999"><div align="center" class="STYLE1">学号</div></td>
          <td bgcolor="#999999"><div align="center" class="STYLE1">课程</div></td>
          <td bgcolor="#999999"><div align="center" class="STYLE1">成绩</div></td>
        </tr>
  <%
  //session.setAttribute("mes","123");
  ResultSet rs=stmt.executeQuery("SELECT * FROM information WHERE 1=1 "+cond);//这个information是我数据库的名字
  //out.println("SELECT * FROM information WHERE 1=1 "+cond);
  int xh=1;
  while(rs.next()){
  %>
        <tr>
          <td><div align="center"><%=xh++%></div></td>
          <td><div align="center"><%=rs.getString("name").replaceAll(sname,""+sname+"")%></div></td>
          <td><div align="center"><%=rs.getString("Id")%></div></td>
          <td><div align="center"><%=rs.getString("class1")%></div></td>
          <td><div align="center"><%=rs.getString("score")%></div></td>
        </tr>
  <%}%>
      </table></td>
    </tr>
  </table>
  </center>
</form>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

上边的代码我们当作“学生主界面”使用;略作改动,下面我们作为“管理员主界面”使用:
演示:

代码:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<center>
<title>学生成绩列表</title>
<link rel="stylesheet" type="text/css" href="css/inputstyle.css" />
<style type="text/css">
<!--
.STYLE1 {color: #666666}
-->
</style>
</center>
</head>
<script language="javascript">
function AddInfo(){
 //直接把页面定位到student_add.jsp
 window.location="student_add.jsp";
}
function AddInfo1(){
 window.location="delete.jsp";
}
function AddInfo2(){
 window.location="student_add.jsp";
}
</script>
<%
//处理查询的操作
String sname="";
sname=request.getParameter("sname");//这个方法用来取出JSP中的input的值
if(sname==null){sname="";}
sname=new String(sname.getBytes("iso-8859-1"),"utf-8");
String cond="";
if(!"".equals(sname)){
 cond=" AND name LIKE '%"+sname+"%'";
}else{
 cond="";
}
%>
<body>
<style>
 body{
  background-image:url("009.jpg");
  background-size: 100%;
  color:black;
 }
</style>
<form name="myForm" method="post" action="">
<center>
  <table width="60%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center" class="tableTitle">学生成绩列表</div></td>
    </tr>
    <tr>
      <td color="black">请输出学生姓名:
      <input name="sname" type="text" id="sname" size="15" color="black">
      <input name="btn1" type="submit" id="btn1" value="查询"></td color="black">
    </tr>
    <tr>
      <td><table width="800" height="100" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#999999"><div align="center" class="STYLE1">序号</div></td>
          <td bgcolor="#999999"><div align="center" class="STYLE1">姓名</div></td>
          <td bgcolor="#999999"><div align="center" class="STYLE1">学号</div></td>
          <td bgcolor="#999999"><div align="center" class="STYLE1">课程</div></td>
          <td bgcolor="#999999"><div align="center" class="STYLE1">成绩</div></td>
    <td bgcolor="#999999"><div align="center" class="STYLE1">删除</div></td>
    <td bgcolor="#999999"><div align="center" class="STYLE1">修改</div></td>
        </tr>
        <%
  //session.setAttribute("mes","123");
  ResultSet rs=stmt.executeQuery("SELECT * FROM information WHERE 1=1 "+cond);
  //out.println("SELECT * FROM information WHERE 1=1 "+cond);
  int xh=1;
  while(rs.next()){
  %>
  <tr>
          <td><div align="center"><%=xh++%></div></td>
          <td><div align="center"><%=rs.getString("name").replaceAll(sname,""+sname+"")%></div></td>
          <td><div align="center"><%=rs.getString("Id")%></div></td>
          <td><div align="center"><%=rs.getString("class1")%></div></td>
          <td><div align="center"><%=rs.getString("score")%></div></td>
    <td><a href="delete.jsp?id=<%=rs.getString("Id")%>">删除</a></td>
    <td><a href="change.jsp?id=<%=rs.getString("Id")%>&n=<%=rs.getString("name")%>&c=<%=rs.getString("class1")%>">修改</a></td>
        </tr>
  <%}%>
  
      </table></td>
    </tr>
 <tr>
  <td><input name="cmdAdd" type="button" class="btn_warning" onClick="AddInfo();" value="增加"/>
  </td>
 </tr>
  </table>
  </center>
</form>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

信息增加界面——“增”

演示:

代码:
student_add.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>学生信息增加页面</title>
<link rel="stylesheet" type="text/css" href="css/inputstyle.css" />
<style type="text/css">
<!--
.STYLE1 {color: #666666}
-->
</style>
</head>
<body>
<style>
 body{
  background-image:url("011.jpg");
  background-size: 100%;
  color:black;
 }
</style>
<form name="myForm" method="post" action="student_save.jsp">
  <table align="center" width="50%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center" class="tableTitle">学生信息增加</div></td>
    </tr>    
    <tr>
      <td><table width="100%" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><div align="center"><font size=5 color="yellow">姓名:</div></td>
          <td><input name="studentname" type="text" id="studentname"></td>
        </tr>
        <tr>
          <td><div align="center"><font size=5 color="yellow">学号:</div></td>
          <td><input name="studentno" type="text" id="studentno"></td>
        </tr>
        <tr>
          <td><div align="center"><font size=5 color="yellow">课程:</div></td>
          <td><input name="coursename" type="text" id="coursename"></td>
        </tr>
        <tr>
          <td><div align="center"><font size=5 color="yellow">成绩:</div></td>
          <td><input name="coursescore" type="text" id="coursescore"></td>
        </tr>
      </table></td>
    </tr>
 <tr>
  <td height="30"><div align="center">
    <input name="cmdSave" type="submit" class="btn_warning" id="cmdSave" onClick="" value="保存"/>
    <input name="cmdCancel" type="button" class="btn_warning" id="cmdCancel" onClick="javascript:window.location='student_list.jsp';" value="取消"/>
  </div></td>
 </tr>
  </table>
</form>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

student_save.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<%@ include file="utils/function.jsp"%>
<html>
<head>
<meta http-equiv="refresh" content="3;url=student_list.jsp">
</head>
<body>
<%
//这里面直接写业务逻辑代码
String studentname=toUTF(request.getParameter("studentname"));
String studentno=toUTF(request.getParameter("studentno"));
String coursename=toUTF(request.getParameter("coursename"));
String coursescore=toUTF(request.getParameter("coursescore"));
out.println(studentname);
//软件重构:改善代码的既有设计
PreparedStatement psmt=conn.prepareStatement("insert into information (name,Id,class1,score) VALUES ('"+studentname+"','"+studentno+"','"+coursename+"','"+coursescore+"')");
psmt.executeUpdate();
%>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

信息修改界面——“改”

只有管理员有权限修改:
change.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<%@ include file="utils/function.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" meta charset="UTF-8">
<title>学生信息修改页面</title>
<link rel="stylesheet" type="text/css" href="css/inputstyle.css" />
<style type="text/css">
<!--
.STYLE1 {color: #666666}
-->
</style>
</head>
<body>
<style>
 body{
  background-image:url("012.jpg");
  background-size: 100%;
  color:black;
 }
</style>
<%
String getName=toUTF(request.getParameter("id"));
int i = Integer.parseInt(getName);
ResultSet rs=stmt.executeQuery("SELECT * FROM information WHERE id ="+i+"");
String studentname1 ="";
String studentclass1 = "";
String studentscore1 = "";
while(rs.next()){
 studentname1=rs.getString("name");
 studentclass1=rs.getString("class1");
 studentscore1=rs.getString("score");
}
%>
<form name="myForm" method="post" action="change_save.jsp">
  <table align="center" width="50%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center" class="tableTitle">学生信息修改</div></td>
    </tr>    
    <tr>
      <td><table width="1000" height="100" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><div align="center"><font size=5 color="yellow">学号:</div></td>
    <td><div align="center"><font size=5 color="yellow"><%=getName%></div></td>
    <input name="number" type="hidden" value=<%=getName%> id="number"></input>
        </tr>
  <tr>
          <td><div align="center"><font size=5 color="yellow">姓名:</div></td>
    <td><div align="center"><font size=5 color="yellow"><%=studentname1%></div></td>
        </tr>
  <tr>
          <td><div align="center"><font size=5 color="yellow">课程名称:</div></td>
    <td><div align="center"><font size=5 color="yellow"><%=studentclass1%></div></td>
        </tr>
        <tr>
          <td><div align="center"><font size=5 color="yellow">成绩:</div></td>
          <td><input name="coursescore1" type="text" id="coursescore1"></td>
        </tr>
      </table></td
    </tr>
 
 <tr>
  <td height="30"><div align="center">
    <input name="cmdSave" type="submit" class="btn_warning" id="cmdSave" onClick="" value="保存"/>
    <input name="cmdCancel" type="button" class="btn_warning" id="cmdCancel" onClick="javascript:window.location='student_list.jsp';" value="取消"/>
  </div></td>
 </tr>
  </table>
</form>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

change_save.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<%@ include file="utils/function.jsp"%>
<html>
<head>
<meta http-equiv="refresh" content="3;url=student_list.jsp">
</head>
<body>
<%
//这里面直接写业务逻辑代码
String coursescore1=toUTF(request.getParameter("coursescore1"));
String getName=toUTF(request.getParameter("number"));
int i = Integer.parseInt(getName);
int s = Integer.parseInt(coursescore1);
out.println("修改成功,"+"学号为"+i+"的成绩修改为"+coursescore1);
//软件重构:改善代码的既有设计
PreparedStatement psmt=conn.prepareStatement("update information set score="+s+" where Id="+i+"");
psmt.executeUpdate();
%>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

信息删除——“删”

(同样只有管理员能进行)
delete.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<%@ include file="utils/function.jsp"%>
<html>
<head>
<meta http-equiv="refresh" content="3;url=student_list.jsp">
</head>
<body>
<%
String getName=toUTF(request.getParameter("id"));
int i = Integer.parseInt(getName);
out.println("删除"+i);
PreparedStatement psmt=conn.prepareStatement("delete from information where Id="+i+"");
psmt.executeUpdate();
%>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

“花里胡哨”的附加功能

登录界面

演示:
基于JavaScript的网页设计_第1张图片
代码:
login.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<title>登录</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
</style>
</head>
<body >
<table border=0 >
<tr>
 <th width=2000 height=150 border=1 bgcolor='ccffff'>
  <center>
   <table>
    <th><img src="001.jpg" width='100' height='100'></th>
    <th><font size='7' color='ff7517'>学生成绩管理系统</th>
   </table>
  </center>
 </th>
</tr>
<table style="background-image:url(images/.jpg);background-size: 100%; opacity: 1; filter: alpha(opacity = 30)"><th>
<table border=0><tr><th width=1500 height=600 border=1><img src="003.jpg" height='600' width=800></th><th>
<form action="judge.jsp" method="post">
<table border=0 bgcolor=F0F0F0>
<tr><th width=12 height=45></th><th colspan=3 width=82 height=45 align='left'>账户登录</th></tr>
<tr><th width=12 height=20></th><th width=20 height=20><img src="004.png" ></th><th width=50 height=20>
<input type="text" style="height:40px" placeholder="手机号/会员号/邮箱地址" size=40 id="user" name="user"></th><th width=12 height=20></th></tr>
<tr><th colspan=4 width=94 height=20></th></tr>
<tr><th width=12 height=20></th><th width=20 height=20><img src="005.jpg" ></th><th width=50 height=20>
<input type="password" style="height:40px" placeholder="密码" id="password" name="password" size=40></th><th width=12 height=20></th></tr>
<tr><th colspan=4 width=94 height=20></th></tr>
<tr><th width=12 height=20></th>
<th colspan=2 width=70 height=20 bgcolor=FF5809><input type="submit" 
    style="background-color:FF5809;height:40px;width:140px;font-size:20px;color:white;border:none" 
    value="登录" ></th>
    <th width=12 height=20></th></tr>
    <tr><th colspan=4 width=94 height=20></th></tr>
 <tr><th width=12 height=20></th><th width=70  height=20 colspan=2><img src="006.png" ></th><th width=12 height=20></th></form></tr>
<tr><th colspan=4 width=94 height=6></th></tr>
<tr><th width=12 height=40><th colspan=2><table width=310 border=0><tr><th  width=35 height=20 align='left'><font size=2><a href="new.jsp">忘记密码</font></th>
<th  width=35 height=20 align='right'><font size=2><a href="zhuce.jsp">免费注册</a></font></th></tr></table></th><th></th></tr>
<tr><th colspan=4 width=94 height=6></th></tr>
</table>
</th><th width='700'></th></tr></table></th><tr><th bgcolor='f9fa9b' height=120><p>联系邮箱:1486266298@qq.com</p><p>联系地址:中国石油大学(华东)11号楼439宿舍</p><p>联系电话:17854266309</p></th></table>
</body>
<%@ include file="inc/connmysql_close.jsp"%>

注册界面

界面:

代码:
zhuce.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册页面</title>
<link rel="stylesheet" type="text/css" href="css/inputstyle.css" />
<style type="text/css">
<!--
.STYLE1 {color: #666666}
-->
</style>
</head>
<body>
<style>
 body{
  background-image:url("010.png");
  background-size: 100%;
  color:black;
 }
</style>
<form name="myForm" method="post" action="zhuce_save.jsp">
  <table align="center" width="50%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center" class="tableTitle">用户注册</div></td>
    </tr>    
    <tr>
      <td><table width="1000" height="100" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><div align="center" type="5">用户名:</div></td>
          <td><input name="studentname" type="text" id="studentname"></td>
        </tr>
        <tr>
          <td><div align="center">密码:</div></td>
          <td><input name="studentno" type="text" id="studentno"></td>
        </tr>
  <tr>
          <td><div align="center">预置码:</div></td>
          <td><input name="studentno1" type="text" id="studentno1"></td>
        </tr>
      </table></td>
    </tr>
 <tr>
  <td height="30"><div align="center">
    <input name="cmdSave" type="submit" class="btn_warning" id="cmdSave" onClick="" value="保存"/>
    <input name="cmdCancel" type="button" class="btn_warning" id="cmdCancel" onClick="javascript:window.location='login.jsp';" value="取消"/>
  </div></td>
 </tr>
  </table>
</form>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

zhuce_save.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<%@ include file="utils/function.jsp"%>
<html>
<head>
<meta http-equiv="refresh" content="3;url=login.jsp">
</head>
<body>
<%
String studentname=toUTF(request.getParameter("studentname"));
String studentno=toUTF(request.getParameter("studentno"));
String studentno1=toUTF(request.getParameter("studentno1"));
out.println(studentname);
PreparedStatement psmt=conn.prepareStatement("insert into login_it (User,Password,number) VALUES ('"+studentname+"','"+studentno+"','"+studentno1+"')");
psmt.executeUpdate();
%>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

忘记密码界面


new.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>忘记密码</title>
<link rel="stylesheet" type="text/css" href="css/inputstyle.css" />
<style type="text/css">
<!--
.STYLE1 {color: #666666}
-->
</style>
</head>
<body>
<style>
 body{
  background-image:url("013.png");
  background-size: 100%;
  color:black;
 }
</style>
<form action="action.jsp" method="POST">
  <table align="center" width="50%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center" class="tableTitle">忘记密码</div></td>
    </tr>    
    <tr>
      <td><table width="1000" height="100" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><div align="center" type="5"><font size=5 color="yellow">用户名:</div></td>
          <td><input name="studentname1" type="text" id="studentname1"></td>
        </tr>
        <tr>
          <td><div align="center"><font size=5 color="yellow">新密码(无前置0且均为数字)</div></td>
          <td><input name="studentno1" type="text" id="studentno1"></td>
        </tr>
  <tr>
          <td><div align="center"><font size=5 color="yellow">预置码:</div></td>
          <td><input name="studentno2" type="text" id="studentno2"></td>
        </tr>
        <label class="captchaCode">
   <font size=5 color="yellow">验证码: <img src="img.jsp" style="cursor: pointer;" onclick="this.src=this.src + '?' + new Date().valueOf();" /> 
   <input type="text" name="captchaImgCode" />
  </label>
      </table></td>
    </tr>
 <tr>
  <td height="30"><div align="center">
    <input name="cmdSave" type="submit" class="btn_warning" id="cmdSave" onClick="" value="保存"/>
    <input name="cmdCancel" type="button" class="btn_warning" id="cmdCancel" onClick="javascript:window.location='login.jsp';" value="取消"/>
  </div></td>
 </tr>
  </table>
</form>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

动态验证码要靠下面三个代码块实现:
img.jsp:

<%@include file="captcha.jsp"%>
<%
 init(pageContext);// 加载图片
%>

captcha.jsp:

<%@page pageEncoding="UTF-8" import="java.io.IOException, java.awt.*, java.awt.image.BufferedImage, java.util.Random, javax.imageio.ImageIO"%>
<%!
 public static class Captcha {
  private int width = 60;
  private int height = 20;
  private String code;
  public BufferedImage get() {
   BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);// 在内存中创建图像
   Graphics g;
   g = image.getGraphics(); // 获取图形上下文 
   g.setColor(getRandColor(200, 250)); // 设定背景 
   g.fillRect(0, 0, width, height);
   g.setFont(new Font("Times New Roman", Font.PLAIN, 18)); // 设定字体 
   g.setColor(getRandColor(160, 200)); 
   Random random = new Random();// 随机产生干扰线
   for (int i = 0; i < 155; i++) {
    int x = random.nextInt(width), y = random.nextInt(height);
    int xl = random.nextInt(12), yl = random.nextInt(12);
    g.drawLine(x, y, x + xl, y + yl);
   }
   String sRand = ""; // 随机产生4位验证码
   for (int i = 0; i < 4; i++) {
    String rand = String.valueOf(random.nextInt(10));
    sRand += rand;
    g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110))); // 将认证码显示到图象中  
    g.drawString(rand, 13 * i + 6, 16);// 调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成 
   }
   // 将认证码存入SESSION
   // session.setAttribute("rand", sRand);
   setCode(sRand);
   g.dispose();// 图象生效     
   return image;
  }
  private Color getRandColor(int fc, int bc) {
   if (fc > 255)
    fc = 255;
   if (bc > 255)
    bc = 255;
   Random random = new Random();
   int r = fc + random.nextInt(bc - fc);
   int g = fc + random.nextInt(bc - fc);
   int b = fc + random.nextInt(bc - fc);
   return new Color(r, g, b);
  }
  public int getHeight() {
   return height;
  }
  public void setHeight(int height) {
   this.height = height;
  }
  public String getCode() {
   return code;
  }
  public void setCode(String code) {
   this.code = code;
  }
  public int getWidth() {
   return width;
  }
  public void setWidth(int width) {
   this.width = width;
  }
 }
 public static final String SESSION_KEY = "rand";
 public static void init(HttpServletResponse response, HttpSession session) {
  Captcha img = new Captcha();
  // 不用缓存
  response.setHeader("Pragma", "No-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expires", 0);
  response.setContentType("image/jpg");
  try {
   ImageIO.write(img.get(), "JPEG", response.getOutputStream());
  } catch (IOException e) {
   e.printStackTrace();
  }
  session.setAttribute(SESSION_KEY, img.getCode()); // 将认证码存入 SESSION 
  System.out.println("生成验证码:" + img.getCode());
 }
 public static void init(PageContext pageContext) {
  init((HttpServletResponse) pageContext.getResponse(), pageContext.getSession());
 }
 public static boolean isPass(PageContext pageContext, String code) throws Throwable {
  boolean isCaptchaPass = false;
  String rand = (String) pageContext.getSession().getAttribute(SESSION_KEY);
  System.out.println("rand:" + rand);
  System.out.println("CaptchaCode:" + code);
  if (rand == null)
   throw new UnsupportedOperationException("请刷新验证码。");
  else if (code == null || code.equals("")) {
   throw new IllegalArgumentException("没提供验证码参数");
  } else {
   isCaptchaPass = rand.equals(code);
   if (!isCaptchaPass)
    throw new IllegalAccessError("验证码不正确");
  }
  return isCaptchaPass;
 }
%>

action.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="inc/connmysql.jsp"%>
<%@ include file="utils/function.jsp"%>
<%@include file="captcha.jsp"%>
<html>
<head>
<meta http-equiv="refresh" content="3;url=login.jsp">
</head>
<body>
<%
 String captchaImgCode = request.getParameter("captchaImgCode");
 try {
  if (isPass(pageContext, captchaImgCode)) {
   out.println("验证码通过!");
  }
 } catch (Throwable e) {
  out.println(e);
 }
 String studentname=toUTF(request.getParameter("studentname1"));
 String studentno=toUTF(request.getParameter("studentno1"));
 String studentno2=toUTF(request.getParameter("studentno2"));
 out.println(studentno);
 PreparedStatement psmt=conn.prepareStatement("update login_it set Password="+studentno+" where number="+studentno2+"");
 psmt.executeUpdate();
%>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

登录判断

judge.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="utils/function.jsp"%>
<%@ include file="inc/connmysql.jsp"%>
<html>
<head>
</head>
<body>
<%
//这里面直接写业务逻辑代码
String cond="";
String user=toUTF(request.getParameter("user"));
String password=toUTF(request.getParameter("password"));
out.println(user+" "+password);
ResultSet rs=stmt.executeQuery("SELECT * FROM login_it WHERE 1=1 "+cond);
int flag=0;
while(rs.next()){
 if(user.equals(rs.getString("User"))&&password.equals(rs.getString("Password")))
 {
  flag=1;
  if(user.equals("admin"))
   flag=2;
 }
}
if(flag==1){
%>
 <script type="text/javascript">
    window.location="student.jsp";  
    </script>
<%
}else if(flag==2){%>
 <script type="text/javascript">
 window.location="student_list.jsp";
    </script>
<% 
}else{
%>
    <script type="text/javascript">  
    window.location="wrong.jsp";  
    </script>
<%
}
%>
</body>
</html>
<%@ include file="inc/connmysql_close.jsp"%>

wrong.jsp:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="refresh" content="5;url=login.jsp">
</head>
<body>
 <th width=2000 height=500 border=1 bgcolor='#ffff'>
  <center>
   <table border=0 bgcolor="yellow">
    <tr>
     <th><img src="007.jpg" width='500' height='500'></th>
     <th><font size='6' color='ff7517'>糟了!用户名或密码记错了(即将返回原页面)</th>
    </tr>
   </table>
  </center>
 </th>
</body>
</html>

过滤器(防止用户不通过登录,直接访问网页)

应用之前,要改WEB-INF文件,怎么改由代码包的位置决定。
LoginFilter.jsp:

import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
<%@ include file="student_list.jsp"%>
/**
 * Servlet Filter implementation class LoginFilter
 */
@WebFilter("/LoginFilter")
public class LoginFilter implements Filter {
 //不被拦截的页面
 private static ArrayList<String> initPages = new ArrayList<>();
 static {
  initPages.add("login.jsp");
  initPages.add("new.jsp");
  initPages.add("zhuce.jsp");
  initPages.add("zhuce_save.jsp");
  initPages.add("judge.jsp");
  initPages.add("action.jsp");
  initPages.add("captcha.jsp");
  initPages.add("img.jsp");
 }
 /**
  * Default constructor.
  */
 public LoginFilter() {
 }
 /**
  * @see Filter#destroy()
  */
 public void destroy() {
  // TODO Auto-generated method stub
 }
 /**
  * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
  */
 public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain)
   throws IOException, ServletException {
  HttpServletRequest request = (HttpServletRequest) servletRequest;
  HttpServletResponse response = (HttpServletResponse) servletResponse;
  String currentURL = request.getRequestURI();
  String ctxPath = request.getContextPath();
  // 除掉项目名称时访问页面当前路径
  String targetURL = currentURL.substring(ctxPath.length());
  HttpSession session = request.getSession(false);
                //判断是否为 不被拦截的界面
  Boolean isInitPage = false;
  for (int i = 0; i < initPages.size();i++) {
   String initPage = initPages.get(i);
   System.out.print("\ninitPage:  " + initPage);
   if (initPage.equals(targetURL)) {
    isInitPage = true;
   }
  }
  if (!isInitPage) {
   System.out.println(
     "\ntargetURL:   " + targetURL + "\nctxPath:   " + ctxPath + "\ncurrentURL:   " + currentURL);
   // 在不为登陆页面时,再进行判断,如果不是登陆页面也没有session则跳转到登录页面,
   if (session == null || session.getAttribute("user") == null) {
    response.sendRedirect("/student_list.jsp");
    return;
   } else {
    // 这里表示正确,会去寻找下一个链,如果不存在,则进行正常的页面跳转
    chain.doFilter(request, response);
    return;
   }
  } else {
   chain.doFilter(request, response);
   return;
  }
 }
 /**
  * @see Filter#init(FilterConfig)
  */
 public void init(FilterConfig fConfig) throws ServletException {
  // TODO Auto-generated method stub
 }
}

源文件

源代码在此:(基于JavaScript的网页设计.zip)
https://me.csdn.net/download/soul_mingling
不需要积分,供大家参考学习。如需转载,请注明原地址;如有错误,请大家积极指出。

你可能感兴趣的:(JS,javascript,网页设计)