本例仿照面向对象与多线程综合实验中的小型档案管理系统软件，制作了一个小型档案管理系统的网页。
首先是登录界面
index.jsp
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<head>
<title>登录界面</title>
</head>
<body>
<form method="post" id="form1" name="form1" onsubmit="return check()" action="check.jsp">
<script language="JavaScript">
function check() {
if(document.form1.name.value==""){
alert("账号不能为空");
}
else if(document.form1.password.value==""){
alert("密码不能为空");
}
}
</script>
<table border="0" cellspacing="0" align="center">
<tr>
<td>选择身份</td>
<td>
<input name="role" type="radio" value="browser" checked="checked">浏览者
<input name="role" type="radio" value="operator">操作员
<input name="role" type="radio" value="administrator">管理员
</td>
</tr>
<tr>
<td>账号</td>
<td><input name="name" type="text" size="20"></td>
</tr>
<tr>
<td>密码</td>
<td><input name="password" type="password" size="20"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="submit" type="submit" value="登录">
<input name="reset" type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
登录界面效果如下：
接着是对登录账号和密码的判断界面(也可以通过别的方法来实现，不一定非要额外增加一个界面)
check.jsp
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<head>
<title></title>
</head>
<body>
<%
request.setCharacterEncoding("gb2312");
Connection connection;
String uname=request.getParameter("name");
String upassword=request.getParameter("password");
String urole=request.getParameter("role");
session.setAttribute("username",uname);
Class.forName("com.mysql.jdbc.Driver");
Connection connect=DriverManager.getConnection("jdbc:mysql://localhost:3306/document","root","123456");
Statement statement=connect.createStatement();
String sql="select * from user_info where username='"+uname+"'";
ResultSet resultSet=statement.executeQuery(sql);
if(resultSet.next()){
if(upassword.equals(resultSet.getObject("password"))){
if(urole.equals(resultSet.getObject("role"))){
out.println("<script language='JavaScript'>alert('登录成功')</script>");
if(urole.equals("administrator")){
response.setHeader("refresh","0;url=admin.jsp");
}
else if(urole.equals("operator")){
response.setHeader("refresh","0;url=opera.jsp");
}
else{
response.setHeader("refresh","0;url=browser.jsp");
}
}
else{
out.println("<script language='JavaScript'>alert('账号不存在，请重新输入')</script>");
response.setHeader("refresh","0;url=index.jsp");
}
}
else{
out.println("<script language='JavaScript'>alert('密码错误，请重新输入')</script>");
response.setHeader("refresh","0;url=index.jsp");
}
}
else{
out.println("<script language='JavaScript'>alert('账号不存在，请重新输入')</script>");
response.setHeader("refresh","0;url=index.jsp");
}
resultSet.close();
statement.close();
connect.close();
%>
</body>
</html>
然后是管理员界面
admin.jsp
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<head>
<title>管理员界面</title>
</head>
<body>
<form method="post" id="form2" name="form2" action="">
<script language="JavaScript">
function check() {
if(document.form2.admin_name.value==""){
alert("账号不能为空");
return false;
}
else return true;
}
</script>
<table border="1" cellspacing="0" align="center">
<tr align="center">
<td colspan="2">角色</td>
<td colspan="2">账号</td>
<td colspan="2">密码</td>
</tr>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection connect=DriverManager.getConnection("jdbc:mysql://localhost:3306/document","root","123456");
Statement statement=connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String sql="select * from user_info";
ResultSet resultSet=statement.executeQuery(sql);
while(resultSet.next()) {
String name=resultSet.getString("username");
String password=resultSet.getString("password");
String role=resultSet.getString("role");
%>
<tr align="center">
<td colspan="2"><%=role%></td>
<td colspan="2"><%=name%></td>
<td colspan="2"><%=password%></td>
</tr>
<%
}
%>
<tr align="center">
<td>请选择角色</td>
<td>
<select name="admin_role" size="1">
<option value="administrator">administrator</option>
<option value="operator">operator</option>
<option value="browser">browser</option>
</select>
</td>
<td>账号</td>
<td><input name="admin_name" type="text" size="20"></td>
<td>密码</td>
<td><input name="admin_password" type="password" size="20"></td>
</tr>
<tr align="center">
<script language="JavaScript">
function submitfrom(path){
if(check()){
$('form2').action=path;
$('form2').submit();
}
}
</script>
<td colspan="2"><button type="submit" onclick="submitfrom('add.jsp')">添加用户</button> </td>
<td colspan="2"><button type="submit" onclick="submitfrom('update.jsp')">修改用户</button> </td>
<td colspan="2"><button type="submit" onclick="submitfrom('del.jsp')">删除用户</button> </td>
</tr>
</table>
<table border="1" cellspacing="0" align="center">
<tr align="center">
<td>名称</td>
<td>创建者</td>
<td>创建时间</td>
<td>描述</td>
<td>文件名</td>
</tr>
<%
sql="select * from doc_info";
resultSet=statement.executeQuery(sql);
while(resultSet.next()) {
String ID=resultSet.getString("ID");
String creator=resultSet.getString("creator");
Timestamp timestamp=resultSet.getTimestamp("timestamp");
String description=resultSet.getString("description");
String filename=resultSet.getString("filename");
%>
<tr align="center">
<td ><%=ID%></td>
<td ><%=creator%></td>
<td ><%=timestamp%></td>
<td ><%=description%></td>
<td ><a href="/DM_war_exploded/upload/<%=filename%>" download="<%=filename%>"><%=filename%></a></td>
<%--<td><input name="download" type="checkbox" value=<%=filename%>></td>--%>
</tr>
<%
}
statement.close();
resultSet.close();
connect.close();
%>
<%--<tr align="center">--%>
<%--<td colspan="6"><button type="submit" onclick="form2.action='download.jsp';form2.submit()">下载文件</button></td>--%>
<%--</tr>--%>
</table>
</form>
<form method="post" id="form3" name="form3">
<script language="JavaScript">
function check2() {
if(document.form3.old_password.value==""){
alert("请输入旧密码");
return false;
}
else if(document.form3.new_password.value==""){
alert("请输入新密码");
return false;
}
else if(document.form3.old_password.value==document.form3.new_password.value){
alert("两次输入的密码不能一样");
return false;
}
else return true;
}
</script>
<table border="1" cellspacing="0" align="center">
<tr align="center">
<script language="JavaScript">
function submit2from(path){
if(check2()){
$('form3').action=path;
$('form3').submit();
}
}
</script>
<%
String uname=session.getAttribute("username").toString();
%>
<td>账号</td>
<td><%=uname%></td>
<td>旧密码</td>
<td><input name="old_password" type="password" size="20"></td>
<td>新密码</td>
<td><input name="new_password" type="password" size="20"></td>
</tr>
<tr align="center">
<td colspan="6"><button type="submit" onclick="submit2from('selfinfochange.jsp')">修改密码</button> </td>
</tr>
</table>
</form>
</body>
</html>
管理员界面效果如下：
操作员界面
opera.jsp
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<head>
<title>操作员界面</title>
</head>
<body>
<form method="post" id="form4" name="form4" action="download.jsp">
<table border="1" cellspacing="0" align="center">
<tr align="center">
<td>名称</td>
<td>创建者</td>
<td>创建时间</td>
<td>描述</td>
<td>文件名</td>
</tr>
<%
Connection connect=DriverManager.getConnection("jdbc:mysql://localhost:3306/document","root","123456");
Statement statement=connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String sql="select * from doc_info";
ResultSet resultSet=statement.executeQuery(sql);
while(resultSet.next()) {
String ID=resultSet.getString("ID");
String creator=resultSet.getString("creator");
Timestamp timestamp=resultSet.getTimestamp("timestamp");
String description=resultSet.getString("description");
String filename=resultSet.getString("filename");
%>
<tr align="center">
<td ><%=ID%></td>
<td ><%=creator%></td>
<td ><%=timestamp%></td>
<td ><%=description%></td>
<td ><a href="/DM_war_exploded/upload/<%=filename%>" download="<%=filename%>"><%=filename%></a></td>
<%--<td><input name="download" type="checkbox" value=<%=filename%>></td>--%>
</tr>
<%
}
statement.close();
resultSet.close();
connect.close();
%>
<%--<tr align="center">--%>
<%--<td colspan="6"><button type="submit" onsubmit="download()">下载文件</button></td>--%>
<%--</tr>--%>
<%--<script language="JavaScript">--%>
<%--function download() {--%>
<%--window.location.href("\\web\\upload\\");--%>
<%--}--%>
<%--</script>--%>
</table>
</form>
<form id="form8" name="form8" action="upload.jsp" enctype="multipart/form-data" method="post">
<table border="1" cellspacing="0" align="center">
<tr align="center">
<td>上传文件</td>
<td><input type="file" name="file"></td>
<td><input type="submit" value="提交">
</tr>
</table>
</form>
<form method="post" id="form5" name="form5">
<script language="JavaScript">
function check3() {
if(document.form5.old_password.value==""){
alert("请输入旧密码");
return false;
}
else if(document.form5.new_password.value==""){
alert("请输入新密码");
return false;
}
else if(document.form5.old_password.value==document.form5.new_password.value){
alert("两次输入的密码不能一样");
return false;
}
else return true;
}
</script>
<table border="1" cellspacing="0" align="center">
<tr align="center">
<script language="JavaScript">
function submit3from(path){
if(check3()){
$('form5').action=path;
$('form5').submit();
}
}
</script>
<%
String uname=session.getAttribute("username").toString();
%>
<td>账号</td>
<td><%=uname%></td>
<td>旧密码</td>
<td><input name="old_password" type="password" size="20"></td>
<td>新密码</td>
<td><input name="new_password" type="password" size="20"></td>
</tr>
<tr align="center">
<td colspan="6"><button type="submit" onclick="submit3from('selfinfochange.jsp')">修改密码</button> </td>
</tr>
</table>
</form>
</body>
</html>
操作员界面效果如下：
浏览者界面
browser.jsp
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<head>
<title>浏览者界面</title>
</head>
<body>
<form method="post" id="form6" name="form6" action="" onsubmit="return check()">
<table border="1" cellspacing="0" align="center">
<tr align="center">
<td>名称</td>
<td>创建者</td>
<td>创建时间</td>
<td>描述</td>
<td>文件名</td>
</tr>
<%
Connection connect=DriverManager.getConnection("jdbc:mysql://localhost:3306/document","root","123456");
Statement statement=connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String sql="select * from doc_info";
ResultSet resultSet=statement.executeQuery(sql);
while(resultSet.next()) {
String ID=resultSet.getString("ID");
String creator=resultSet.getString("creator");
Timestamp timestamp=resultSet.getTimestamp("timestamp");
String description=resultSet.getString("description");
String filename=resultSet.getString("filename");
%>
<tr align="center">
<td ><%=ID%></td>
<td ><%=creator%></td>
<td ><%=timestamp%></td>
<td ><%=description%></td>
<td ><a href="/DM_war_exploded/upload/<%=filename%>" download="<%=filename%>"><%=filename%></a></td>
<%--<td><input name="download" type="checkbox" value=<%=filename%>></td>--%>
</tr>
<%
}
statement.close();
resultSet.close();
connect.close();
%>
<%--<tr align="center">--%>
<%--<td colspan="6"><button type="submit" onclick="form6.action='download.jsp';form6.submit()">下载文件</button></td>--%>
<%--</tr>--%>
</table>
</form>
<form method="post" id="form7" name="form7">
<script language="JavaScript">
function check4() {
if(document.form7.old_password.value==""){
alert("请输入旧密码");
return false;
}
else if(document.form7.new_password.value==""){
alert("请输入新密码");
return false;
}
else if(document.form7.old_password.value==document.form7.new_password.value){
alert("两次输入的密码不能一样");
return false;
}
else return true;
}
</script>
<table border="1" cellspacing="0" align="center">
<tr align="center">
<script language="JavaScript">
function submit4from(path){
if(check4()){
$('form7').action=path;
$('form7').submit();
}
}
</script>
<%
String uname=session.getAttribute("username").toString();
%>
<td>账号</td>
<td><%=uname%></td>
<td>旧密码</td>
<td><input name="old_password" type="password" size="20"></td>
<td>新密码</td>
<td><input name="new_password" type="password" size="20"></td>
</tr>
<tr align="center">
<td colspan="6"><button type="submit" onclick="submit4from('selfinfochange.jsp')">修改密码</button> </td>
</tr>
</table>
</form>
</body>
</html>
浏览者界面效果和管理员去掉用户管理之后的界面效果一样，在此就不过多展示
添加用户操作
add.jsp
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<head>
<title>添加用户</title>
</head>
<body>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection connect=DriverManager.getConnection("jdbc:mysql://localhost:3306/document","root","123456");
Statement statement=connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String sql=null;
ResultSet resultSet;
request.setCharacterEncoding("gb2312");
String uname=request.getParameter("admin_name");
String upassword=request.getParameter("admin_password");
String urole=request.getParameter("admin_role");
sql="select * from user_info where username='"+uname+"'";
resultSet=statement.executeQuery(sql);
if(resultSet.next()) {
out.println("<script language='JavaScript'>alert('用户已存在！')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
else{
sql="insert into user_info(username,password,role) values "+"('"+uname+"','"+upassword+"','"+urole+"')";
if(statement.executeUpdate(sql)<=0) {
out.println("<script language='JavaScript'>alert('添加用户失败')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
else {
out.println("<script language='JavaScript'>alert('添加用户成功')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
}
statement.close();
resultSet.close();
connect.close();
%>
</body>
</html>
修改用户操作
update.jsp
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<head>
<title>修改用户</title>
</head>
<body>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection connect=DriverManager.getConnection("jdbc:mysql://localhost:3306/document","root","123456");
Statement statement=connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String sql=null;
ResultSet resultSet;
String uname=request.getParameter("admin_name");
String upassword=request.getParameter("admin_password");
String urole=request.getParameter("admin_role");
request.setCharacterEncoding("gb2312");
sql="select * from user_info where username='"+uname+"'";
resultSet=statement.executeQuery(sql);
if(!resultSet.next()) {
out.println("<script language='JavaScript'>alert('用户不存在！')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
else{
sql="update user_info set password='"+upassword+"',role='"+urole+"' where username='"+uname+"'";
if(statement.executeUpdate(sql)<=0) {
out.println("<script language='JavaScript'>alert('修改用户失败')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
else {
out.println("<script language='JavaScript'>alert('修改用户成功')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
}
statement.close();
resultSet.close();
connect.close();
%>
</body>
</html>
删除用户操作
del.jsp
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<head>
<title>删除用户</title>
</head>
<body>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection connect=DriverManager.getConnection("jdbc:mysql://localhost:3306/document","root","123456");
Statement statement=connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String sql=null;
ResultSet resultSet;
String uname=request.getParameter("admin_name");
String upassword=request.getParameter("admin_password");
String urole=request.getParameter("admin_role");
request.setCharacterEncoding("gb2312");
sql="select * from user_info where username='"+uname+"'";
resultSet=statement.executeQuery(sql);
if(!resultSet.next()) {
out.println("<script language='JavaScript'>alert('用户不存在！')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
else{
sql="delete from user_info where username='"+uname+"'";
if(statement.executeUpdate(sql)<=0) {
out.println("<script language='JavaScript'>alert('删除用户失败')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
else {
out.println("<script language='JavaScript'>alert('删除用户成功')</script>");
response.setHeader("refresh","0;url=admin.jsp");
}
}
statement.close();
resultSet.close();
connect.close();
%>
</body>
</html>
上传文件操作
upload.jsp
<%@ page contentType="text/html;charset=GB2312" language="java" %>
<%@ page import="java.io.*,java.util.*,javax.servlet.*,javax.servlet.http.*" %>
<%@ page import="java.rmi.ServerException" %>
<%@ page import="java.sql.*" %>
<html>
<head>
<title></title>
</head>
<body>
<%
String ufilename;
String udescription=request.getParameter("description");
String uname=session.getAttribute("username").toString();
String ufile=null;
//定义上传文件的最大字节
double MAX_SIZE = 102400 * 102400;
//创建根路径的保存变量
String rootPath;
//声明文件读入类
DataInputStream in = null;
FileOutputStream fileOut = null;
//取得互联网程序的绝对地址
String realPath = request.getSession().getServletContext().getRealPath("/");
realPath = realPath.substring(0, realPath.indexOf("\\out"));
// out.print(realPath);
//创建文件的保存目录
rootPath = realPath + "\\web\\upload\\";
//取得客户端上传的数据类型
String contentType = request.getContentType();
try {
if (contentType.indexOf("multipart/form-data") >= 0) {
//读入上传数据
in = new DataInputStream(request.getInputStream());
int formDataLength = request.getContentLength();
if (formDataLength > MAX_SIZE) {
out.print("<script language='JavaScript'>alert('上传文件过大')</script>");
response.setHeader("refresh","0;url=opera.jsp");
return;
}
//保存上传文件的数据
byte dataBytes[] = new byte[formDataLength];
int byteRead = 0;
int totalBytesRead = 0;
//上传的数据保存在byte数组里面
while (totalBytesRead < formDataLength) {
byteRead = in.read(dataBytes, totalBytesRead, formDataLength);
totalBytesRead += byteRead;
}
//根据byte数组创建字符串
String file = new String(dataBytes, "GB2312");
//取得上传数据的文件名
String saveFile = file.substring(file.indexOf("filename=\"") + 10);
saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
saveFile = saveFile.substring(saveFile.lastIndexOf("\\") + 1, saveFile.indexOf("\""));
ufile=saveFile;
int lastIndex = contentType.lastIndexOf("=");
//取得数据的分隔字符串
String boundary = contentType.substring(lastIndex + 1, contentType.length());
//创建保存路径的文件名
String fileName = rootPath + saveFile;
int pos;
pos = file.indexOf("filename = \"");
pos = file.indexOf("\n", pos) + 1;
pos = file.indexOf("\n", pos) + 1;
pos = file.indexOf("\n", pos) + 1;
int boundaryLocation = file.indexOf(boundary, pos) - 4;
//取得文件数据的开始的位置
int startPos = ((file.substring(0, pos)).getBytes()).length;
int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length;
File checkFile = new File(fileName);
if (checkFile.exists()) {
out.print("<script language='JavaScript'>alert('文件已存在')</script>");
response.setHeader("refresh","0;url=opera.jsp");
return;
}
//检查上传文件的目录是否存在
File fileDir = new File(rootPath);
if (!fileDir.exists()) {
fileDir.mkdirs();
}
//创建文件的输出类
fileOut = new FileOutputStream(fileName);
//保存文件的数据
fileOut.write(dataBytes, startPos, (endPos - startPos));
fileOut.close();
} else {
String content = request.getContentType();
out.print("<script language='JavaScript'>alert('请上传目录mutipart/form-data类型的文件')</script>");
response.setHeader("refresh","0;url=opera.jsp");
}
} catch (Exception ex) {
throw new ServerException(ex.getMessage());
}
Class.forName("com.mysql.jdbc.Driver");
Connection connect=DriverManager.getConnection("jdbc:mysql://localhost:3306/document","root","123456");
Statement statement=connect.createStatement();
String sql="select * from doc_info";
ResultSet resultSet=statement.executeQuery(sql);
int i=1;
while (resultSet.next()) i++;
ufilename=String.valueOf(i);
String timestamp=new Timestamp(System.currentTimeMillis()).toString();
sql="insert into doc_info(Id,creator,timestamp,description,filename) values "+"('"+ufilename+"','"+uname+"','"+timestamp+"','"+udescription+"','"+ufile+"')";
if(statement.executeUpdate(sql)>0){
out.print("<script language='JavaScript'>alert('文件上传成功')</script>");
response.setHeader("refresh","0;url=opera.jsp");
}
else{
out.print("<script language='JavaScript'>alert('文件上传失败')</script>");
response.setHeader("refresh","0;url=opera.jsp");
}
%>
</body>
</html>
上传文件效果如下：
下载文件直接放在了各个管理员、操作员和浏览者的界面上，在列表之中单机文件即可实现文件的下载操作
小结
这一次的小型档案管理系统的开发使我对JSP和网页开发有了初步的了解和认识。同时这其中也存在的许多的不足，比如网页不够美观，没有使用到div标签、servlet、javabean和一些框架，在今后的学习过程中需要逐步地进行改进和提高。
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
