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();
},
}
至此,项目完成。