使用纯粹的Servlet完成单表的增删改查的操作
实现步骤
第一步:准备一个数据库表
create database z_staff_info;
use z_staff_info;
create table dept(
dept int primary key,
dname varchar(255),
loc varchar(255)
);
insert into dept(dept, dname, loc) values (10,'销售部','北京');
insert into dept(dept, dname, loc) values (20,'研发部','上海');
insert into dept(dept, dname, loc) values (30,'技术部','广州');
insert into dept(dept, dname, loc) values (40,'媒体部','深圳');
select * from dept;
第二步:准备一套HTML页面(项目原型,使用Hbu)
把HTML页面准备好
然后将HTML页面中的链接都够跑通
应该设计哪些页面
新增页面:add.html
修改页面:edlt.html
详情页面:detail.html
欢迎页面:index.html
列表页面:list.html (以列表页面为核心,展开其他操作)
定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
定义和用法
<tr> 标签定义 HTML 表格中的行。
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格:
- 表头单元格 - 包含表头信息(由 th 元素创建)
- 标准单元格 - 包含数据(由 td 元素创建)
th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。
定义和用法
<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。
add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新增部门</title>
</head>
<body>
<h1 align="center">新增部门</h1>
<hr>
<form action="list.html" method="get" align="center">
部门编号<input type="text" name="deptno"/><br>
部门名称<input type="text" name="dname"/><br>
部门位置<input type="" name="loc"/><br>
<input type="submit" name="保存"/><br>
</form>
</body>
</html>
detail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>部门详情</title>
</head>
<body>
<h1>部门详情</h1>
<hr>
部门编号:20<br>
部门名称:销售部<br>
部门位置:北京<br>
<input type="button" value="后退" onclick="window.history.back()"/>
</body>
</html>
edit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改部门</title>
</head>
<body>
<h1 align="center">修改部门</h1>
<hr>
<form action="list.html" method="get" align="center">
部门编号<input type="text" name="deptno" value="20" readonly/><br>
部门名称<input type="text" name="dname" value="销售部"/><br>
部门位置<input type="" name="loc" value="北京"/><br>
<input type="submit" name="修改"/><br>
</form>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎使用oa系统</title>
</head>
<body>
<a href="list.html">查看部门列表</a>
</body>
</html>
list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>部门列表</title>
</head>
<body>
<h1 align="center">部门列表<h1>
<hr>
<table border="1px" align="center" width="50%">
<tr>
<th>序号</th>
<th>部门编号</th>
<th>部门名称</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>10</td>
<td>销售部</td>
<td>
<a href="">删除</a>
<a href="edit.html">修改</a>
<a href="detail.html">详情</a>
</td>
</tr>
<tr>
<td>2</td>
<td>20</td>
<td>研发部</td>
<td>
<a href="">删除</a>
<a href="edit.html">修改</a>
<a href="detail.html">详情</a>
</td>
</tr>
<tr>
<td>3</td>
<td>30</td>
<td>研发部</td>
<td>
<a href="">删除</a>
<a href="edit.html">修改</a>
<a href="detail.html">详情</a>
</td>
</tr>
</table>
<hr>
<a href="add.html"><h6 align="center">新增部门</h6></a>
</body>
</html>
第三步:分析我们这个系统包括哪些功能?
什么叫做一个功能呢?
只要这个操作连接了数据库,就表示一个独立的功能
包括哪些功能?
查看部门列表
新增部门
删除部门
查看部门详细信息
跳转修改页面
修改部门
第四步:在idea中搭建开发环境
创建一个webapp
向webapp中添加连接数据库的jar包(mysql驱动)
jdbc的工具类
第五步:实现第一个功能:查看部门列表
第一:先修改前端页面的超链接
<a href="/oa/dept/list">查看部门列表</a>
第二:编写web.xml
<servlet>
<servlet-name>list</servlet-name>
<servlet-class>com.yang</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>list</servlet-name>
<url-pattern>/dept/list</url-pattern>
</servlet-mapping>
第三:编写DeptListServlet类继承HttpServlet类,然后重写doget
package com.yang;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class DeptListServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
第四:在DeptListServlet类的doGet方法中连接数据库,查询所有的部门,动态的展示部门列表页面
动态部分
//连接数据库,查询所有的部门
Connection conn =null;
PreparedStatement ps =null;
ResultSet rs=null;
try {
// 获取连接
conn=DBUtil.getConnection();
// 获取预编译的数据库操作对象
String sql="select dept,dname,loc from dept";
ps=conn.prepareStatement(sql);
// 执行sql语句
rs=ps.executeQuery();
// 处理结果集
int i=0;
while(rs.next()){
String deptno = rs.getString("dept");
String dname = rs.getString("dname");
String loc = rs.getString("loc");
out.println(" <tr>");
out.println(" <td>"+(++i)+"</td>");
out.println(" <td>"+deptno+"</td>");
out.println(" <td>"+dname+"</td>");
out.println(" <td>");
out.println(" <a href=''>删除</a>");
out.println(" <a href='edit.html'>修改</a>");
out.println(" <a href='detail.html'>详情</a>");
out.println(" </td>");
out.println(" </tr>");
}
} catch (SQLException e) {
throw new RuntimeException(e);
}finally {
DBUtil.close(conn,ps,rs);
}
package com.yang;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DeptListServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println(" <head>");
out.println(" <meta charset='utf-8'>");
out.println(" <title>部门列表</title>");
out.println(" </head>");
out.println(" <body>");
out.println(" <h1 align='center'>部门列表</h1>");
out.println(" <hr>");
out.println(" <table border='1px' align='center' width='50%'>");
out.println(" <tr>");
out.println(" <th>序号</th>");
out.println(" <th>部门编号</th>");
out.println(" <th>部门名称</th>");
out.println(" <th>操作</th>");
out.println(" </tr>");
//连接数据库,查询所有的部门
Connection conn =null;
PreparedStatement ps =null;
ResultSet rs=null;
try {
// 获取连接
conn=DBUtil.getConnection();
// 获取预编译的数据库操作对象
String sql="select dept,dname,loc from dept";
ps=conn.prepareStatement(sql);
// 执行sql语句
rs=ps.executeQuery();
// 处理结果集
int i=0;
while(rs.next()){
String deptno = rs.getString("dept");
String dname = rs.getString("dname");
String loc = rs.getString("loc");
out.println(" <tr>");
out.println(" <td>"+(++i)+"</td>");
out.println(" <td>"+deptno+"</td>");
out.println(" <td>"+dname+"</td>");
out.println(" <td>");
out.println(" <a href=''>删除</a>");
out.println(" <a href='edit.html'>修改</a>");
out.println(" <a href='detail.html'>详情</a>");
out.println(" </td>");
out.println(" </tr>");
}
} catch (SQLException e) {
throw new RuntimeException(e);
}finally {
DBUtil.close(conn,ps,rs);
}
/*固定*/
out.println(" </table>");
out.println(" <hr>");
out.println(" <a href='add.html'><h6 align='center'>新增部门</h6></a>");
out.println(" </body>");
out.println("</html>");
}
}
第六步:实现详情功能
从这出发:
<a href='detail.html'>详情</a>"
技巧:
out.println(" <a href='"+contextPath+"/dept/detail?deptno="+deptno+"'>详情</a>");
重点:
浏览器请求一定加 项目名
向服务器提交数据的格式:/oa/dept/detail?deptno=10
解决:
配置web.xml
编写一个类:DeptDetailServlet 继承HttpServlet,重写doGet方法
package com.yang;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class DeptDetailServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
在doGet发放中:连接数据库,根据部门编号查询该部门的信息。动态展示部门
package com.yang;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DeptDetailServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println(" <head>");
out.println(" <meta charset='utf-8'>");
out.println(" <title>部门详情</title>");
out.println(" </head>");
out.println(" <body>");
out.println(" <h1>部门详情</h1>");
out.println(" <hr>");
String deptno = request.getParameter("deptno");
Connection conn =null;
PreparedStatement ps =null;
ResultSet rs=null;
// 获取连接
try {
conn=DBUtil.getConnection();
// 获取预编译的数据库操作对象
String sql="select dept,dname,loc from dept where dept= ?";
ps=conn.prepareStatement(sql);
// 执行sql语句
ps.setString(1,deptno);
rs=ps.executeQuery();
// 处理结果集
if (rs.next()) {
String dname = rs.getString("dname");
String loc = rs.getString("loc");
out.println("部门编号:"+deptno+"<br>");
out.println("部门名称:"+dname+"<br>");
out.println("部门位置:"+loc+"<br>");
}
} catch (SQLException e) {
throw new RuntimeException(e);
}finally {
DBUtil.close(conn,ps,rs);
}
out.println(" <input type='button' value='后退' onclick='window.history.back()'/>");
out.println(" </body>");
out.println("</html>");
}
}
/* * 思路: * 第一步:获取部门编号 * 第二部:根据部门编号查询数据库,获取该部门编号对应的部门信息 * 第三步:将部门信息响应到浏览器上 * */
第七步:删除部门
<a href="javascript:void(0)" onclick="del(10)">删除</a>
<script type="text/javascript">
function del(dno){
//弹出确认框
var ok=window.confirm("删除不可恢复!");
if(ok){
//发送请求进行删除的操作
//在JS代码当中如发送请求给服务器
document.location.href="/oa/dept/delete?deptno="+dno;
}
}
</script>
以上的前端程序要写到后端的JAVA代码当中:
out.print()方法将以上代码输出到浏览器上
解决404问题
配置web.xml
<servlet>
<servlet-name>delete</servlet-name>
<servlet-class>com.yang.DeptDelServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>delete</servlet-name>
<url-pattern>/dept/delete</url-pattern>
</servlet-mapping>
编写类继承HttpServlet,重写DoGet方法
package com.yang;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
public class DeptDelServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//根据部门编号删除部门
// 获取部门编号
String deptno = request.getParameter("deptno");
//连接数据库
Connection conn=null;
PreparedStatement ps =null;
int count=0;
try {
conn =DBUtil.getConnection();
String sql="delete from dept where dept = ?";
ps = conn.prepareStatement(sql);
ps.setString(1,deptno);
count = ps.executeUpdate();
//conn.commit();
} catch (SQLException e) {
throw new RuntimeException(e);
}finally {
DBUtil.close(conn,ps,null);
}
//判断删除成功还是失败
if(count == 1)
{
//删除成功
//仍然跳转到部门列表页面
//部门列表页面的显示需要执行一个Servlet,转发
request.getRequestDispatcher("/dept/list").forward(request,response);
}else{
//删除失败
request.getRequestDispatcher("/error.html").forward(request,response);
}
}
}