大学在班上担任学习委员,每次收作业都十分麻烦。因此想自己制作一个作业提交系统。
此系统主要功能就是作业提交,简而言之就是文件上传。因为技术不佳,目前只做了个beta版,使用原生的HTML+JS+AJAX+Servlet,数据库使用mysql。因此美观度和功能性有待完善,各位大佬轻喷。
1.工作流程
2.数据库设计
此系统包含两个实体:课程,实验。即一个课程对应多个实验。
course表:
experiment表:
其中,experiment表中的courseid是外键。
3.项目结构
此项目是用STS开发,项目结构如下:
导入依赖包,包括:文件上传,ajax,mysql等
4.代码示例
Course类:
package cqut.entity; public class Course { public int CourseID; public String CourseName; public Course() { super(); } public Course(int courseID, String courseName) { super(); CourseID = courseID; CourseName = courseName; } public int getCourseID() { return CourseID; } public void setCourseID(int courseID) { CourseID = courseID; } public String getCourseName() { return CourseName; } public void setCourseName(String courseName) { CourseName = courseName; } }
Experiment类:
package cqut.entity; public class Experiment { public int ExperimentID; public String ExperimentName; public String ExperimentContent; public String EndTime; public int CourseID; public String path; public String coursename; public String getCoursename() { return coursename; } public void setCoursename(String coursename) { this.coursename = coursename; } public Experiment() { super(); } public Experiment(int experimentID, String experimentName, String experimentContent, String endTime, int courseID, String path) { super(); ExperimentID = experimentID; ExperimentName = experimentName; ExperimentContent = experimentContent; EndTime = endTime; CourseID = courseID; this.path = path; } public int getExperimentID() { return ExperimentID; } public void setExperimentID(int experimentID) { ExperimentID = experimentID; } public String getExperimentName() { return ExperimentName; } public void setExperimentName(String experimentName) { ExperimentName = experimentName; } public String getExperimentContent() { return ExperimentContent; } public void setExperimentContent(String experimentContent) { ExperimentContent = experimentContent; } public String getEndTime() { return EndTime; } public void setEndTime(String endTime) { EndTime = endTime; } public int getCourseID() { return CourseID; } public void setCourseID(int courseID) { CourseID = courseID; } public String getPath() { return path; } public void setPath(String path) { this.path = path; } }
首页Home.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作业提交</title> <link rel="stylesheet" href="css/h_style.css" type="text/css"> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/h_js.js"></script> <script type="text/javascript"> $().ready(function () { $.ajax({ type: "GET", url: "servlet/CourseServlet", data: { }, beforeSend: function () { }, success: function (data) { var json = JSON.parse(data); for(var j in json) { var ul=document.getElementById("h_course"); var li=document.createElement("li"); ul.appendChild(li); var a=document.createElement("a"); li.appendChild(a); var div=document.createElement("div"); div.setAttribute("class","course"); div.setAttribute("id",json[j].CourseID); div.setAttribute("onclick","Experiment('"+json[j].CourseID+"')"); a.appendChild(div); var h2=document.createElement("h2"); h2.innerHTML=json[j].CourseName; div.appendChild(h2); } }, complete: function (XMLHttpRequest, textStatus) { }, error: function (XMLHttpRequest, textStatus, thrownError) { } }); }); function Experiment(id,name){ window.location.href="Experiment.html?id="+id; }; </script> </head> <body> <div class="container"> <div class="h_head"> <h1>软件工程2班专属作业提交系统 beta2</h1> </div> <div id="h_body"> <ul id="h_course"> </ul> <div class="left" onclick="a()"></div> <div class="right"></div> </div> </div> </body> </html>
实验内容页面 Experiment.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作业提交</title> <link rel="stylesheet" href="css/h_style.css" type="text/css"> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/h_js.js"></script> <script type="text/javascript"> $().ready(function(){ $.ajax({ type: "POST", url: "servlet/CourseServlet", data: { courseid:getQueryVariable("id") }, beforeSend: function () { }, success: function (data) { var json = JSON.parse(data); var i=0; for(var j in json){ var id_h1=document.getElementById("id_h1"); id_h1.innerHTML=json[j].coursename; var ul=document.getElementById("h_test_list"); var li=document.createElement("li"); ul.appendChild(li); var item_body=document.createElement("div"); item_body.setAttribute("class","item_body"); li.appendChild(item_body); var item_title=document.createElement("div"); item_title.setAttribute("class","item_title"); item_body.appendChild(item_title); var h2=document.createElement("h2"); item_title.appendChild(h2); h2.innerHTML=json[j].ExperimentName; var item_content=document.createElement("div"); item_content.setAttribute("class","item_content"); item_body.appendChild(item_content); var h3=document.createElement("h3"); item_content.appendChild(h3); h3.innerHTML=json[j].ExperimentContent; var item_endtime=document.createElement("div"); item_endtime.setAttribute("class","item_endtime"); item_endtime.innerHTML="截止时间:"+json[j].EndTime; item_body.appendChild(item_endtime); var item_count=document.createElement("div"); item_count.setAttribute("class","item_count"); item_count.innerHTML="已提交人数:5人"; item_body.appendChild(item_count); var uploadForm=document.createElement("form"); uploadForm.setAttribute("id","uploadForm"); uploadForm.setAttribute("method","POST"); item_body.appendChild(uploadForm); var show=document.createElement("div"); show.setAttribute("class","show"); show.setAttribute("id","show"+i); show.innerHTML="请点击上传文件:"; uploadForm.appendChild(show); var blueButton=document.createElement("a"); blueButton.setAttribute("class","blueButton"); blueButton.setAttribute("href","javascript:void(0);"); blueButton.innerHTML="上传文件"; uploadForm.appendChild(blueButton); var myFileUpload=document.createElement("input"); myFileUpload.setAttribute("type","file"); myFileUpload.setAttribute("id","fileid"); myFileUpload.setAttribute("class","myFileUpload"); myFileUpload.setAttribute("onchange","c(this,"+i+")"); uploadForm.appendChild(myFileUpload); var whiteButton=document.createElement("a"); whiteButton.setAttribute("class","whiteButton"); whiteButton.setAttribute("href","javascript:void(0);"); whiteButton.innerHTML="提交"; uploadForm.appendChild(whiteButton); var mySubmit=document.createElement("input"); mySubmit.setAttribute("type","button"); mySubmit.setAttribute("onclick","onfile($('#fileid'))"); mySubmit.setAttribute("class","mySubmit"); uploadForm.appendChild(mySubmit); i++; } }, complete: function (XMLHttpRequest, textStatus) { }, error: function (XMLHttpRequest, textStatus, thrownError) { } }); }); function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } function c(data,i){ var arrs=$(data).val().split('\\'); var filename=arrs[arrs.length-1]; $("#show"+i).html(filename); } </script> </head> <body> <div class="container"> <div class="h_head"> <h1 id="id_h1"></h1> </div> <div class="h_test"> <ul id="h_test_list"> </ul> </div> </div> </body> </html>
文件提交h_js.js:
{var xhr; function onfile(file) { var fd = new FormData(); fd.append("fileToUpload", document.getElementById('fileid').files[0]); xhr = new XMLHttpRequest(); xhr.open("POST", "servlet/UploadServlet"); //xhr.setRequestHeader("Content-Type","charset=UTF-8"); xhr.send(fd); xhr.onreadystatechange = processResponse; } function processResponse(){ if(xhr.readyState == 4){ //alert("upload data liu stop"); if(xhr.status == 200){ var infor = xhr.responseText; alert(infor); $("input[type=reset]").trigger("click"); } } } }
后台文件提交 UploadServlet:
package cqut.servlet; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; /** * Servlet implementation class UploadServlet */ public class UploadServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public UploadServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 得到上传文件的保存目录,将上传的文件存放于WEB-INF目录下,不允许外界直接访问,保证上传文件的安全 String inputPath = "D:\\test"; File file = new File(inputPath); System.out.println("test。。。。"); // 判断上传文件的保存目录是否存在 if (!file.exists() && !file.isDirectory()) { System.out.println(inputPath + "目录不存在,需要创建"); // 创建目录 file.mkdir(); } String filename = ""; // 消息提示 String message = ""; try { // 使用Apache文件上传组件处理文件上传步骤: // 1、创建一个DiskFileItemFactory工厂 DiskFileItemFactory factory = new DiskFileItemFactory(); // 2、创建一个文件上传解析器 ServletFileUpload upload = new ServletFileUpload(factory); // 解决上传文件名的中文乱码 upload.setHeaderEncoding("UTF-8"); // 3、判断提交上来的数据是否是上传表单的数据 if (!ServletFileUpload.isMultipartContent(request)) { // 按照传统方式获取数据 return; } // 4、使用ServletFileUpload解析器解析上传数据,解析结果返回的是一个List<FileItem>集合,每一个FileItem对应一个Form表单的输入项 List<FileItem> list = upload.parseRequest(request); for (FileItem item : list) { // 如果fileitem中封装的是普通输入项的数据 if (item.isFormField()) { String name = item.getFieldName(); // 解决普通输入项的数据的中文乱码问题 String value = item.getString("UTF-8"); // value = new String(value.getBytes("iso8859-1"),"UTF-8"); System.out.println(name + "=" + value); } else {// 如果fileitem中封装的是上传文件 // 得到上传的文件名称, filename = item.getName(); System.out.println(filename); if (filename == null || filename.trim().equals("")) { message = "上传失败[文件名空]"; continue; } // 注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如: // c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt // 处理获取到的上传文件的文件名的路径部分,只保留文件名部分 filename = filename .substring(filename.lastIndexOf("/") + 1); // 获取item中的上传文件的输入流 InputStream in = item.getInputStream(); // 创建一个文件输出流 FileOutputStream out = new FileOutputStream(inputPath + "/" + filename); // 创建一个缓冲区 byte buffer[] = new byte[1024 * 1024]; // 判断输入流中的数据是否已经读完的标识 int len = 0; // 循环将输入流读入到缓冲区当中,(len=in.read(buffer))>0就表示in里面还有数据 while ((len = in.read(buffer)) > 0) { // 使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" // + filename)当中 out.write(buffer, 0, len); } out.flush(); // 关闭输入流 in.close(); // 关闭输出流 out.close(); // 删除处理文件上传时生成的临时文件 item.delete(); message = "文件上传成功!"; } } } catch (Exception e) { message = "文件上传失败!"; e.printStackTrace(); } /*request.setAttribute("message", message); request.getRequestDispatcher("/message.jsp").forward(request, response);*/ response.setCharacterEncoding("UTF-8"); response.getWriter().print(message); } }
数据库查询 CourseServlet:
package cqut.servlet; import java.io.IOException; import java.io.PrintWriter; import java.sql.DriverManager; import java.sql.ResultSet; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.databind.ObjectMapper; import com.mysql.jdbc.Connection; import com.mysql.jdbc.Statement; import cqut.entity.Course; import cqut.entity.Experiment; /** * Servlet implementation class SqlServlet */ @WebServlet("/SqlServlet") public class CourseServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public CourseServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); Connection connection=null; Statement statement=null; ResultSet resultset=null; try { Class.forName("com.mysql.jdbc.Driver"); String url="jdbc:mysql://localhost:3306/homework"; connection=(Connection) DriverManager.getConnection(url, "root", "123"); statement=(Statement) connection.createStatement(); resultset=statement.executeQuery("select * from course"); List<Course> courses=new ArrayList<>(); while(resultset.next()) { Course course=new Course(); course.CourseID=resultset.getInt("CourseID"); course.CourseName=resultset.getString("CourseName"); System.out.println(course.CourseID+" "+course.CourseName); courses.add(course); } ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(courses); PrintWriter out =response.getWriter(); out.write(json); }catch (Exception e) { // TODO: handle exception } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String courseid=request.getParameter("courseid"); System.out.println(courseid); request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); Connection connection=null; Statement statement=null; ResultSet resultset=null; try { Class.forName("com.mysql.jdbc.Driver"); String url="jdbc:mysql://localhost:3306/homework"; connection=(Connection) DriverManager.getConnection(url, "root", "123"); statement=(Statement) connection.createStatement(); resultset=statement.executeQuery("SELECT * from c_e where courseid="+courseid); List<Experiment> experiments=new ArrayList<>(); while(resultset.next()) { Experiment ex=new Experiment(); ex.ExperimentID=resultset.getInt("ExperimentID"); ex.ExperimentName=resultset.getString("ExperimentName"); ex.ExperimentContent=resultset.getString("ExperimentContent"); ex.CourseID=resultset.getInt("CourseID"); ex.EndTime=resultset.getString("EndTime"); ex.path=resultset.getString("path"); ex.coursename=resultset.getString("CourseName"); System.out.println(ex.ExperimentName+""+ex.coursename); experiments.add(ex); } ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(experiments); PrintWriter out =response.getWriter(); out.write(json); }catch (Exception e) { // TODO: handle exception } } }
另外,创建servlet后,需要在web.xml中添加映射
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4"> <servlet> <servlet-name>UploadServlet</servlet-name> <servlet-class>cqut.cn.UploadServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UploadServlet</servlet-name> <url-pattern>/servlet/UploadServlet</url-pattern> </servlet-mapping> <servlet> <servlet-name>CourseServlet</servlet-name> <servlet-class>cqut.servlet.CourseServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CourseServlet</servlet-name> <url-pattern>/servlet/CourseServlet</url-pattern> </servlet-mapping> <servlet> <servlet-name>ExperimentServlet</servlet-name> <servlet-class>cqut.servlet.ExperimentServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ExperimentServlet</servlet-name> <url-pattern>/servlet/ExperimentServlet</url-pattern> </servlet-mapping> </web-app>
5.效果展示