5.31
实验项目名称：实验四 Web综合应用程序设计
一、实验目的
通过使用Java MVC模式设计简单的数据库管理系统，巩固使用JDBC技术访问数据库的方法，学习使用Java语言对服务器端进行编程，深入理解MVC网站设计模式的基本概念和框架结构。
二、实验内容和基本要求
从以下列举的四个数据库中，任选其一，或者自行定义其他数据库，每个数据库中包含一张表，数据库名、表名、列名、列数据类型自行定义（提示：主键可以设为自增列）：
1) 学生数据库：存储的信息包括学生学号、姓名、性别、生日等。
2) 商品数据库：存储的信息包括商品ID、商品名称、商品数量、生产厂家等。
3) 客户数据库：存储的信息包括客户ID、客户姓名、客户地址、手机号码等。
4) 车辆数据库：存储的信息包括汽车ID、品牌、颜色、车主姓名等。
开发一个数据库管理系统需要完成对以上数据库表中的记录的基本的查看、增加、修改和删除功能。以数据库表Book为例，参考系统架构如图1所示：
图1 系统架构
各个文件功能如下：
1) Dao类：作为数据访问层（持久层）直接访问数据库，包括构造方法（连接数据库），executeQuery方法（执行查询操作，返回ResultSet对象），executeUpdate方法（执行更新操作，返回int数据），close方法（关闭语句对象和连接）。
2) Model类：针对数据库表建立一个对应的模型，包括对应该表各个列的多个属性，这些属性的getter和setter访问器，以及getAll类方法（调用Dao类的方法获取该表所有记录，返回ArrayList对象），getById类方法（调用Dao类的方法获取指定Id的某一条记录，返回Model对象），update类方法（调用Dao类的方法更新一条记录，返回int数据），delete类方法（调用Dao类的方法删除一条记录，返回int数据），add类方法（调用Dao类的方法增加一条数据，返回int数据）。
3) Controller控制器：拦截后缀为.do的请求，对请求进行处理，并转入相应的视图层的文件。包含以下转向功能：
a) index.do：调用Model类提供的getAll方法，得到ArrayList对象，将该对象作为request属性传递给index.jsp进行显示；
b) addview.do：转到add.html显示新增图书页面；
c) add.do：接收add.html发送过来的新增图书的信息，构建一个Model对象，并调用Model提供的add方法插入数据库，根据返回值转到success.html或failure.html显示结果；
d) edit.do：接收index.jsp发送过来的编辑某一Model的请求，调用Model提供的getById方法构建一个Model对象，并转到edit.jsp进行显示；
e) update.do：接收edit.jsp发送过来的保存某一Model的请求，调用Model提供的update方法保存到数据库中，根据返回值转到success.html或failure.html显示结果；
f) delete.do：接收edit.jsp发送过来的删除某一Model的请求，调用Model提供的delete方法保存到数据库中，根据返回值转到success.html或failure.html显示结果；
4) index.jsp：视图层文件，接收Controller发送过来的ArrayList<Model>对象，并进行显示，提供新建超链接到addview.do，修改超链接到edit.do，删除超链接到delete.do。
5) edit.jsp：视图层文件，接收Controller发送过来的Model对象，创建表单，提供用户修改页面，并进行显示原有数据。用户修改后提交到update.do。
6) add.html：视图层文件，创建表单，提供新增图书页面，用户录入数据后提交到add.do。
7) success.html：显示用户操作成功页面，提供超链接到index.do。
8) failure.html：显示用户操作失败页面，提供超链接到index.do。
完成基本功能后，可以从以下方面对系统进行改进：
1) 对于客户端增加和修改信息页面，使用JavaScript、Jquery、Vue等技术进行必要的数据的非空验证；
2) 自行添加一些CSS，使得页面和字体更加美观；
3) 使用AJAX技术，减少页面之间的跳转，提高界面友好性。
对于基础较好的同学，也可以使用各种框架完成。
完成后，请将各个文件程序源代码和浏览器截图写入实验报告。
三、实验步骤
1) 打开MySQL，新建一个数据库。
2) 新建一个数据库表。
3) 在表中增加若干记录，作为初始数据。
4) 打开Eclipse软件，新建一个名为Lab04的Web项目，并设置其部署程序为Tomcat。
5) 在Lab04中添加文件，编写代码
6) 。AdminDao文件代码
package com.sjsq.dao;
import com.sjsq.vo.Admin;
public interface AdminDao {
/**
* 用户登录
* @param admin
* @return
*/
public Admin login(Admin admin);
}
7) AdminDaoImpl文件代码
package com.sjsq.dao.impl;
import com.sjsq.dao.AdminDao;
import com.sjsq.utils.DBUtil;
import com.sjsq.vo.Admin;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class AdminDaoImpl implements AdminDao {
/**
* 用户登录
* @param admin
* @return
*/
@Override
public Admin login(Admin admin) {
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
// 1.获取数据库连接
con = DBUtil.getConnection();
// 2.写sql
String sql = "select * from admin where username = ? and password = ?";
// 3.预编译
ps = con.prepareStatement(sql);
// 4.设置值
ps.setObject(1,admin.getUsername());
ps.setObject(2,admin.getPassword());
rs = ps.executeQuery();
Admin adminLogin = null;
if(rs.next()){
adminLogin = new Admin();
// 从数据库中获取值到实体类的setter方法中
adminLogin.setUsername(rs.getString("username"));
adminLogin.setPassword(rs.getString("password"));
// 返回的是你查询出来的完整的对象
return adminLogin;
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}finally {
// 关闭资源，避免出现异常
DBUtil.close(con,ps,rs);
}
return null;
}
}
8) StudentDao文件代码
package com.sjsq.dao;
import com.sjsq.vo.Student;
import java.util.List;
* 学生信息接口
*/
public interface StudentDao {
/**
* 查询学生信息
* @param sql
* @param arr
* @return
*/
public List<Student> selectAll(String sql, Object[] arr);
/**
* 根据学号进行查询
* @param id
* @return
*/
public Student selectStudent(Integer id);
/**
* 新增学生信息
* @param student
* @return
*/
public boolean addStudent(Student student);
/**
* 修改学生信息
* @param student
* @return
*/
public boolean updateStudent(Student student);
/**
* 删除学生信息
* @param id
* @return
*/
public boolean deleteStudent(Integer id);
}
9) AdminService文件代码
package com.sjsq.service;
import com.sjsq.vo.Admin;
/**
* @author shuijianshiqing
* @date 2021/5/1 11:13
*/
public interface AdminService {
/**
* 用户登录
* @param admin
* @return
*/
public Admin login(Admin admin);
}
10) AdminServiceImpl文件代码
package com.sjsq.service.impl;
import com.sjsq.dao.AdminDao;
import com.sjsq.dao.impl.AdminDaoImpl;
import com.sjsq.service.AdminService;
import com.sjsq.vo.Admin;
public class AdminServiceImpl implements AdminService {
private AdminDao adminDao = new AdminDaoImpl();
@Override
public Admin login(Admin admin) {
return adminDao.login(admin);
}
}
11) StudentService文件代码
package com.sjsq.service;
import com.sjsq.vo.Student;
import java.util.List;
/
public interface StudentService {
/**
* 查询学生信息
* @param student
* @return
*/
public List<Student> selectAll(Student student);
/**
* 根据学号进行查询
* @param id
* @return
*/
public Student selectStudent(Integer id);
/**
* 新增学生信息
* @param student
* @return
*/
public boolean addStudent(Student student);
/**
* 修改学生信息
* @param student
* @return
*/
public boolean updateStudent(Student student);
/**
* 删除学生信息
* @param id
* @return
*/
public boolean deleteStudent(Integer id);
}
12) StudentServiceImpl文件代码
package com.sjsq.service.impl;
import com.sjsq.dao.StudentDao;
import com.sjsq.dao.impl.StudentDaoImpl;
import com.sjsq.service.StudentService;
import com.sjsq.vo.Student;
import java.util.ArrayList;
import java.util.List;
public class StudentServiceImpl implements StudentService {
private StudentDao studentDao = new StudentDaoImpl();
@Override
public List<Student> selectAll(Student student) {
StringBuffer sql = new StringBuffer("select * from student where 1 = 1 ");
List<Object> list = new ArrayList<Object>();
if(student != null){
// 根据id来查找对应的学生信息
if(student.getId() != null && student.getId() != 0){
sql.append(" and id = ?");
list.add(student.getId());
}
}
return studentDao.selectAll(sql.toString(),list.toArray());
}
@Override
public Student selectStudent(Integer id) {
return studentDao.selectStudent(id);
}
@Override
public boolean addStudent(Student student) {
return studentDao.addStudent(student);
}
@Override
public boolean updateStudent(Student student) {
return studentDao.updateStudent(student);
}
@Override
public boolean deleteStudent(Integer id) {
return studentDao.deleteStudent(id);
}
}
13) login.jsp文件代码
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
// 获取绝对路径路径 ,开发项目一定要使用绝对路径，不然肯定出错
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<style type="text/css">
h1{
text-align: center;
}
h4{
text-align: center;color: red;
}
body{
}
a{
text-decoration: none;font-size: 20px;color: black;
}
a:hover{
text-decoration: underline;font-size: 24px;color: red;
}
</style>
</head>
<body>
<form action="check_login.jsp" method="post">
<h1>用户登录</h1>
<hr/>
<table align="center">
<tr>
<td>账号：</td>
<td><input type="text" name="username" placeholder="请输入您的账号" autofocus="autofocus"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" placeholder="请输入您的密码"></td>
</tr>
<tr>
<td colspan="1">
</td>
<td>
<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
14) check_login.jsp文件代码
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ page import="com.sjsq.service.AdminService"%>
<%@ page import="com.sjsq.service.impl.AdminServiceImpl"%>
<%@ page import="com.sjsq.vo.Admin"%>
<%
// 获取绝对路径路径 ,开发项目一定要使用绝对路径，不然肯定出错
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<style type="text/css">
h1{
text-align: center;
}
h4{
text-align: center;color: red;
}
body{
}
</style>
</head>
<body>
<h1>用户登录</h1>
<hr>
<%
// 设置接收的编码为UTF-8
request.setCharacterEncoding("utf-8");
// 获取前端传过来的字符串
String username = request.getParameter("username");
String password=request.getParameter("password");
// 定义接受的对象
Admin admin = new Admin();
admin.setUsername(username);
admin.setPassword(password);
// 把数据库里面的Admin获取出来
AdminService adminService = new AdminServiceImpl();
// 注意数据的admin账号密码不能重复
Admin adminLogin = adminService.login(admin);
System.out.println("显示登录用户信息：");
System.out.println(adminLogin);
// 设置session
session.setAttribute("admin",adminLogin);
// 判断adminLogin是否为空
if(!(adminLogin==null)){
// 成功之后重定向到主页面
response.sendRedirect("main.jsp");
} else{
// 失败之后重定向到失败页面
response.sendRedirect("fail.jsp");
}
%>
</body>
</html>
15) logout.jsp文件代码
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>退出登录</title>
</head>
<body>
<%
// 会话失效
session.invalidate();
response.sendRedirect("login.jsp");
%>
</body>
</html>
16) main.jsp文件代码
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ page import="com.sjsq.service.StudentService" %>
<%@ page import="com.sjsq.service.impl.StudentServiceImpl" %>
<%@ page import="com.sjsq.vo.Student" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查看学生</title>
<style type="text/css">
h1 {
text-align: center;
}
body {
}
th, td {
width: 70px;
height: 35px;
text-align: center;
}
#before {
text-align: center;
}
</style>
</head>
<body>
<%-- 头部 --%>
<jsp:include page="top.jsp"/>
<%
// 设置获取注册时的编码为UTF-8
request.setCharacterEncoding("UTF-8");
StudentService studentService = new StudentServiceImpl();
// 定义一个学生类
Student student = new Student();
// 获取上一个页面传过来的值
if(request.getParameter("id")!=null && request.getParameter("id")!=""){
Integer id = Integer.parseInt(request.getParameter("id"));
student.setId(id);
}
// 获取所有学生
List<Student> studentList = studentService.selectAll(student);
%>
<h1>学生列表</h1>
<hr/>
<div id="before">
<form action="main.jsp" method="post">
请输入姓名：<input type="text" name="id" placeholder="输入学号搜索">
<input type="submit" value="查询" />
</form>
</div>
<br>
<table align="center" cellspacing="0" align="center">
<tr bgcolor="#5f9ea0">
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>民族</th>
<th>省份</th>
<th>专业</th>
<th>班级</th>
<th colspan="2">操作</th>
</tr>
<%
for (int i = 0;i<studentList.size();i++){
Student s =studentList.get(i);
%>
<tr>
<td><%=s.getId()%></td>
<td><%=s.getName()%></td>
<td><%=s.getAge()%></td>
<td><%=s.getSex()%></td>
<td><%=s.getNation()%></td>
<td><%=s.getPlace()%></td>
<td><%=s.getMajor()%></td>
<td><%=s.getClasses()%></td>
<td>
<a href="update_student.jsp?id=<%=s.getId()%>">修改</a>
<a href="delete_student.jsp?id=<%=s.getId()%>">删除</a>
</td>
</tr>
<%
}
%>
</table>
<table align="center">
<tr>
<td><a href="add_student.jsp">新增学生</a></td>
</tr>
</table>
</body>
<%-- 底部 --%>
<jsp:include page="bottom.jsp"/>
</html>
17) add_student.jsp文件代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增学生</title>
<style type="text/css">
h1{
text-align: center;
}
body{
}
div{
text-align: center;
}
#before{
text-align: center;
}
</style>
</head>
<body>
<%-- 头部 --%>
<jsp:include page="top.jsp"/>
<h1>新增学生</h1>
<hr/>
<div id="before">
<a href="javascript: window.history.go(-1)">返回上一级</a>
</div>
</br>
<form action="do_add_student.jsp" method="post" name="addForm">
<div>
<tr>
<label>学号：</label>
<input type="text" name="id" id="id" placeholder="学号" autofocus="autofocus">
</tr>
</div>
<div>
<tr>
<label>姓名：</label></td>
<input type="text" name="name" id="name" placeholder="姓名">
</tr>
</div>
<div>
<tr>
<label>年龄：</label>
<input type="text" name="age" id="age" placeholder="年龄">
</tr>
</div>
<div>
<tr>
<label>性别：</label>
<input type="text" name="sex" id="sex" placeholder="性别">
</tr>
</div>
<div>
<tr>
<label>民族：</label>
<input type="text" name="nation" id="nation" placeholder="民族">
</tr>
</div>
<div>
<tr>
<label>省份：</label>
<input type="text" name="place" id="place" placeholder="省份">
</tr>
</div>
<div>
<tr>
<label>专业：</label>
<input type="text" name="major" id="major" placeholder="专业">
</tr>
</div>
<div>
<tr>
<label>班级：</label>
<input type="text" name="classes" id="classes" placeholder="班级">
</tr>
</div>
<br>
<div id="submit">
<tr>
<button type="submit" onclick="return checkForm()">添加</button>
<button type="reset">重置</button>
</tr>
</div>
</form>
<script type="text/javascript">
function checkForm() {
var id = addForm.id.value;
var name = addForm.name.value;
// 学号和姓名不能为空
if (id == "" || id == null) {
alert("请输入学号");
addForm.id.focus();
return false;
} else if (name == "" || name == null) {
alert("请输入姓名");
addForm.name.focus();
return false;
}
alert('添加成功！');
return true;
}
</script>
<%-- 底部 --%>
<jsp:include page="bottom.jsp"/>
</body>
</html>
18) update_student.jsp文件代码
<%@ page import="com.sjsq.service.StudentService" %>
<%@ page import="com.sjsq.service.impl.StudentServiceImpl" %>
<%@ page import="com.sjsq.vo.Student" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>修改学生</title>
<style type="text/css">
h1{
text-align: center;
}
body{
}
div{
text-align: center;
}
#before{
text-align: center;
}
</style>
</head>
<body>
<%-- 头部 --%>
<jsp:include page="top.jsp"/>
<h1>新增学生</h1>
<hr/>
<%
//获取admin.jsp页面的bookid
Integer id=Integer.parseInt(request.getParameter("id"));
StudentService studentService = new StudentServiceImpl();
Student student = new Student();
student = studentService.selectStudent(id);
%>
<div id="before">
<a href="javascript: window.history.go(-1)">返回上一级</a>
</div>
</br>
<form action="do_update_student.jsp" method="post" name="addForm">
<div>
<tr>
<label>学号：</label>
<input type="text" name="id" id="id" placeholder="学号" value="<%=student.getId()%>" autofocus="autofocus">
</tr>
</div>
<div>
<tr>
<label>姓名：</label></td>
<input type="text" name="name" id="name" placeholder="姓名" value="<%=student.getName()%>">
</tr>
</div>
<div>
<tr>
<label>年龄：</label>
<input type="text" name="age" id="age" placeholder="年龄" value="<%=student.getAge()%>">
</tr>
</div>
<div>
<tr>
<label>性别：</label>
<input type="text" name="sex" id="sex" placeholder="性别" value="<%=student.getSex()%>">
</tr>
</div>
<div>
<tr>
<label>民族：</label>
<input type="text" name="nation" id="nation" placeholder="民族" value="<%=student.getNation()%>">
</tr>
</div>
<div>
<tr>
<label>省份：</label>
<input type="text" name="place" id="place" placeholder="省份" value="<%=student.getPlace()%>">
</tr>
</div>
<div>
<tr>
<label>专业：</label>
<input type="text" name="major" id="major" placeholder="专业" value="<%=student.getMajor()%>">
</tr>
</div>
<div>
<tr>
<label>班级：</label>
<input type="text" name="classes" id="classes" placeholder="班级" value="<%=student.getClasses()%>">
</tr>
</div>
<br>
<div id="submit">
<tr>
<button type="submit" onclick="return checkForm()">修改</button>
<button type="reset">重置</button>
</tr>
</div>
</form>
<script type="text/javascript">
function checkForm() {
var id = addForm.id.value;
var name = addForm.name.value;
// 学号和姓名不能为空
if (id == "" || id == null) {
alert("请输入学号");
addForm.id.focus();
return false;
} else if (name == "" || name == null) {
alert("请输入姓名");
addForm.name.focus();
return false;
}
alert('修改成功！');
return true;
}
</script>
<%-- 底部 --%>
<jsp:include page="bottom.jsp"/>
</body>
</html>
7) 程序截图
四、心得体会
通过本次实验，我实现了基于javaMVC的数据库系统，巩固使用JDBC技术访问数据库的方法，学习使用Java语言对服务器端进行编程，深入理解MVC网站设计模式的基本概念和框架结构。实现了一个微小的全栈开发，这为我时候的web开发奠定了坚实的基础，此外，我还了解到一些web技术，比如说spring boot框架and Vue2技术
五、自我评价
分数自评
|
序号 |
评分标准 |
总分 |
自评分 |
|
1 |
使用MVC模式完成管理系统的查看、增加、删除和修改功能 |
6 |
6 |
|
2 |
使用JavaScript、JQuery、Vue等技术进行了数据验证 |
1 |
1 |
|
3 |
使用了AJAX技术 |
1 |
1 |
|
4 |
代码格式有必要的缩进和空格，可读性强 |
1 |
1 |
|
5 |
使用CSS，页面美观 |
1 |
1 |
