作业提交系统

其他 2018-12-30 21:54:43 阅读次数: 0

大学在班上担任学习委员，每次收作业都十分麻烦。因此想自己制作一个作业提交系统。

此系统主要功能就是作业提交，简而言之就是文件上传。因为技术不佳，目前只做了个beta版，使用原生的HTML+JS+AJAX+Servlet，数据库使用mysql。因此美观度和功能性有待完善，各位大佬轻喷。

1.工作流程

2.数据库设计

此系统包含两个实体：课程，实验。即一个课程对应多个实验。

course表：

experiment表：

其中，experiment表中的courseid是外键。

扫描二维码关注公众号，回复： 4714328 查看本文章

 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.效果展示

猜你喜欢

转载自www.cnblogs.com/luoyijian/p/10200741.html
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022