[作业] JavaEE 02

1.需求明确

本次作业要求：开发基于Mysql，Servlet，JSP的作业管理系统，老师可添加作业，学生，查看学生作业，学生可提交作业。

要求项目整合Maven，优化数据库连接性能。

整体是简化版的在线数据管理，仅有增查两功能。

2.项目设计

jsp页面有三个

• index.jsp 为教师和学生进入对应的页面提供链接。
• teacher.jsp 教师页，可增查学生和作业，可浏览作业提交信息。
• student.jsp 学生页，可指定学生和作业进行文字内容提交。

servlet一个

• MainServlet 用于接收增加和提交的请求，与数据库交互，并返回对应结果。

数据库适配器一个

• MysqlAdaper 用于全局共享连接，优化操作性能。

3.实际操作过程记录

1.建立Maven项目，选择项目模板为webapp

2.进入项目，于pom.xml中添加依赖

本例子中，所需依赖有：mysql连接件、javax.servlet

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.19</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
    </dependency>

3.配置tomcat部署

于部署菜单中添加本例

顺便打开自动重新部署

4.将src转化为代码目录，建立项目结构

5.数据库建立

本例中有三个表

• student 存储学生id和姓名
• homework 存储作业id和内容
• submit 存储特定学生对特定作业的提交

注意：

• student与homework表应设主键为自增，方便添加。
• submit表设置 hid，sid对 为主键

6.完善对应bean代码

7.完善数据库适配器部分

本应为单例，这里由于没有继承覆写的需要，转用静态类。

作用为：为整个项目提供唯一的数据库连接对象。

若有需求，则可升级为连接池，提供并发查询能力。

8.业务逻辑编写

存在以下操作：

• 列出所有学生
• 列出所有作业
• 添加一位学生
• 添加一项作业
• 为某学生提交某作业
• 列出所有提交信息

同样，由于无需验证登录状态且无覆写需求(其实是懒)，采用静态类。

需要注意的是，应对添加操作提供返回值而非void，为后续操作提供便利。

查阅资料得知，executeUpdate方法返回值为int，意为影响的行数，故对于添加操作，我们可以:

return statement.executeUpdate()==1;

来标记操作的成功与失败

9.servlet编写

本例仅用一个servlet。

于首部添加增强型注释，过滤地址后加入通配符

@WebServlet("/v1/*")

于get方法内做解析和分流

String path = req.getPathInfo();
switch (path){
    case "/addStudent":{break;}
    case "/addHomework":{break;}
    case "/submitHomework":{break;}
    default:{
        resp.getWriter().println("err");
    }
}

在case内将参数解析，调用并获取操作结果

if(MainBo.addStudent(req.getParameter("name"))){
    resp.getWriter().println("添加成功");
}else{
    resp.getWriter().println("添加失败");
}

查询servler声明周期可知，我们可以在init时连接数据库，destory时关闭连接，添加相应代码。

至此，servlet部分编写完成，相应的接口有三个

/v1/addStudent?name=name

/v1/addHomework?name=name

/v1/submitHomework?sid=sid&hid=hid&content=content

10.jsp页面编写

index.jsp

添加到其他两个页面的链接即可，略。

teacher.jsp 

三部分分别展示三个列表，调用业务逻辑取列表并填充即可

其中学生和作业部分，还要留出添加功能的相关元素(输入框与提交按钮)

student.jsp

提供选择对应学生和作业的下拉列表框，提交内容的文本框，提交按钮即可。

最后于每个页面头挂载css和js

<link type="text/css" rel="styleSheet"  href="./css.css" />
<script type="text/javascript" src="./js.js"></script>

至此，jsp页面编写完成。

11.css编写

略

12.js编写

点击提交后，先根据写好的id找到对应文本框或下拉列表框，获取欲提交的value。

使用XMLHttpRequest提交，异步获取返回值并进行相应操作。

addHomework = function () {
    let name = document.getElementById("homeworkName").value;
    Ajax.get("./v1/addHomework?name=" + name,function (resp) {
        alert(resp);
        location.reload();
    })
}

附：Ajax的简单实现

const Ajax = {
    get: function(url, func) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                func.call(this, xhr.responseText);
            }
        };
        xhr.send();
    },
}

至此，项目完成。

项目地址：https://github.com/WindJ0Y/-homework-javaEE02