基于JavaScript的网页设计
所用软件：Notepad++
基本功能：实现“学生信息管理系统”，实现基础的增，删，改，查，以及一些“花里胡哨”的操作。
（代码及图片文件在文末）
文章目录
基础的“增删查改”
配置的文件（这两个放在新建的“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,"<font color=red><b>"+sname+"</b></font>")%></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,"<font color=red><b>"+sname+"</b></font>")%></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"%>“花里胡哨”的附加功能
登录界面
演示：
代码：
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
不需要积分，供大家参考学习。如需转载，请注明原地址；如有错误，请大家积极指出。
