目录
第一步：设计数据库表
# 部门表
drop table if exists dept;
create table dept(
deptno int primary key,
dname varchar(255),
loc varchar(255)
);
insert into dept(deptno, dname, loc) values(10, 'XiaoShouBu', 'BEIJING');
insert into dept(deptno, dname, loc) values(20, 'YanFaBu', 'SHANGHAI');
insert into dept(deptno, dname, loc) values(30, 'JiShuBu', 'GUANGZHOU');
insert into dept(deptno, dname, loc) values(40, 'MeiTiBu', 'SHENZHEN');
commit;
select * from dept;第二步：准备前端页面，怎删改查页面的运行
用户运行代码，出现欢迎页面，点击部门列表，进入部门列表页面
在部门列表页面进行怎删改查的操作：
核心代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加部门</title>
</head>
<body>
<form action="list.html" method="get">
部门编号<input type="text" name="deptno"/><br />
部门名称<input type="text" name="dname"/><br />
部门位置<input type="text" name="loc"/><br />
<input type="submit" value="保存"/><br />
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>部门详情</title>
</head>
<body>
<h1>部门详情</h1>
<hr />
部门编号<br />
部门名称<br />
部门位置<br />
<input type="button" value="后退" onclick="window.history.back()"/>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改部门</title>
</head>
<body>
<form action="list.html" method="get">
部门编号<input type="text" name="deptno" value="2" readonly/><br />
部门名称<input type="text" name="dname" value="研发部"/><br />
部门位置<input type="text" name="loc" value="天津"/><br />
<input type="submit" value="保存"/><br />
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>部门列表页面</title>
</head>
<body>
<script type="text/javascript">
function del(dno){
var ok = window.confirm("亲，真的要删吗")
if(ok){
//发送请求
document.location.href = "/oa/dept/delete?deptno="+dno;
}
}
</script>
<h1>部门列表</h1>
<hr />
<table border="1px" align="center">
<tr>
<td>序号</td>
<td>部门编号</td>
<td>部门名称</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>10</td>
<td>销售部</td>
<td>
<a href="javascript:void(0)" onclick="del(10)">删除</a>
<a href="edit.html">修改</a>
<a href="dtail.html">详情</a>
</td>
</tr>
<tr>
<td>2</td>
<td>20</td>
<td>研发部</td>
<td>
<a href="javascript:void(0)" onclick="del(20)">删除</a>
<a href="edit.html">修改</a>
<a href="dtail.html">详情</a>
</td>
</tr>
<tr>
<td>3</td>
<td>30</td>
<td>运营部</td>
<td>
<a href="javascript:void(0)" onclick="del(30)">删除</a>
<a href="edit.html">修改</a>
<a href="dtail.html">详情</a>
</td>
</tr>
<td>
<a href="add.html">添加</a>
</td>
</table>
</body>
</html>第三步：搭建IDEA的运行环境
tomcat：apache-tomcat-7.0.52
IDEA：IntelliJ IDEA 2018.2.8
所需要的架包：mysql-connector-java-5.1.7-bin.jar；
jstl.jar；
standard.jar
第四步：后端代码的实现以及前端代码的改造
前置：封装JDBC代码
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/bjpowernode
user=root
password=123456package com.servlet.oa.utils;
import java.sql.*;
import java.util.ResourceBundle;
/**
*JDBC工具类
**/
public class DButil {
//静态变量，在类加载时执行
//属性资源绑定
private static ResourceBundle bundle = ResourceBundle.getBundle("resources.jdbc");
//根据key获取value
private static String driver=bundle.getString("driver");
private static String url=bundle.getString("url");;
private static String user=bundle.getString("user");;
private static String password=bundle.getString("password");;
//注册驱动
static {
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public static Connection getConnection() throws SQLException {
//获取连接
Connection conn = DriverManager.getConnection(url,user,password);
return conn;
}
//释放资源
public static void close(Connection conn, Statement ps, ResultSet rs){
if (rs == null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps == null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn == null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
1、实现用户点击【部门列表】按钮跳转到部门列表页面
- 修改前端页面中跳转按钮的超链接
<a href="list.html">部门列表</a><a href="/oa/dept/list">部门列表</a>这段代码是一个 HTML 超链接，当用户单击该链接时，会发送 GET 请求到
/oa/dept/list路径，获取部门列表信息。其中，
href属性指定了链接的目标地址为/oa/dept/list，在默认情况下浏览器会将目标地址作为相对路径来解析。如果想要指定绝对路径，可以在链接前面加上协议名称（http或https）和主机地址，例如<a href="http://www.example.com/oa/dept/list">部门列表</a>。 -
编写xml文件：
在 Java web 中，XML 文件主要有以下几个作用：
-
配置 web 应用：通过 web.xml 文件配置应用的基本信息，例如 URL 映射、Servlet 的初始化参数、错误页面等。
-
配置 Servlet：通过使用 Servlet 的注解或在 web.xml 配置文件中添加 servlet 元素的方式，来定义和配置 Servlet 的初始化参数、映射 URL 以及关联监听器等。
-
定义数据源：使用 context.xml 文件可以定义数据源信息，JNDI 因此可以向与服务器运行环境绑定的资源进行链接。
-
配置拦截器：通过编写 web.xml 文件中的 filter 和 filter-mapping 元素来配置过滤器，实现对请求和响应进行预处理和后处理，进行日志记录、字符编码设置、防止 XSS 攻击和 CSRF 攻击等操作。
-
定义目录结构：通过使用 ant 风格转换的规则来描述包和类路径。例如，将类库文件存放到 WEB-INF/lib 目录中，Java 类文件存放在 WEB-INF/classes 中。
-
这段代码是在 Web 应用程序中定义了一个 Servlet，并将其映射到 URL
/dept/list上。具体来说，此处的配置做了以下两件事情：使用
<servlet>标签定义了一个名为list的 Servlet，它的 Java 类完整类名是com.servlet.oa.web.action.DeptListServlet。使用
<servlet-mapping>标签将 Servlet 名称为list的 Servlet 映射到了 URL 模式为/dept/list上。这段配置使得当用户访问/dept/list时，Servlet 容器能够调用com.servlet.oa.web.action.DeptListServlet来响应该请求，并执行相关逻辑后生成相应内容返回给客户端。其中，<servlet>标签中的servlet-name元素指定了 Servlet 的名称，该名称可被<servlet-mapping>中的servlet-name引用。<servlet-class>元素指定了 Servlet 的实现类。 -
<servlet-mapping>标签中的servlet-name元素引用了之前定义的 Servlet 名称，<url-pattern>元素则指定了要映射的 URL 模式，也就是客户端将访问的地址。此处请求路径为 /dept/list，这意味着所有以/dept/list路径开头的请求都会被交给com.servlet.oa.web.action.DeptListServlet这个 Servlet 进行处理。<!--查询部门列表--> <servlet> <servlet-name>list</servlet-name> <servlet-class>com.servlet.oa.web.action.DeptListServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>list</servlet-name> <url-pattern>/dept/list</url-pattern> </servlet-mapping>
-
-
编写
/oa/dept/list路径下的servlet代码 -
在src目录下创建com.servlet.oa.web.action目录，在action目录下创建DeptListServlet.java文件，并在其中继承HttpSrevlet类，重写doGet方法
package com.bjpowernode.oa.web.action; import jakarta.servlet.ServletException; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; public class DeptListServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }在doGet方法中，需要辨别【前端代码】中哪些是需要连接数据库进行动态展示的
//获取应用的根路径 String contextPath = request.getContextPath(); //设置响应的内容类型及字符集，防止中文乱码的额出现 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("<script type='text/javascript'>"); out.println(" function del(dno){"); out.println(" var ok = window.confirm('亲，真的要删吗')"); out.println(" if(ok){"); out.println(" //发送请求"); out.println(" document.location.href = '"+contextPath+"/dept/delete?deptno='+dno;"); out.println(" }"); out.println("}"); out.println("</script>"); out.println(" </head>"); out.println(" <body>"); out.println(" <h1>部门列表</h1>"); out.println(" <hr />"); out.println(" <table border='1px' align='center'>"); out.println(" <tr>"); out.println(" <td>序号</td>"); out.println(" <td>部门编号</td>"); out.println(" <td>部门名称</td>"); out.println(" <td>操作</td>"); out.println(" </tr>"); //往上是死的 //连接数据库，查询所有部门列表 Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; try { //获取连接 conn = DButil.getConnection(); //获取预编译的数据库操作对象 String sql
最低0.47元/天 解锁文章
2067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
