老杜 JavaWeb 讲解（十八） ——项目优化（Servlet+JSP+EL+JSTL）
(十六)项目优化（Servlet+JSP+EL+JSTL）
相关视频：
新旧代码对比：
注意点：
Java代码不需要改动，只需要更改jsp代码。
将需要的包导入：
jakarta.servlet.jsp.jstl-2.0.0.jar
jakarta.servlet.jsp.jstl-api-2.0.0.jar
mysql-connector-j-8.0.31.jar
add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>新增部门</title>
</head>
<body>
<h2>欢迎<%=session.getAttribute("username")%></h2>
<h1>新增部门</h1>
<hr>
<form action="<%=request.getContextPath()%>/dept/save" method="post">
部门编号：<input type="text" name="deptno"/><br>
部门名称：<input type="text" name="deptname"/><br>
部门位置：<input type="text" name="loc"/><br>
<input type="submit" value="保存"/><br>
</form>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>新增部门</title>
</head>
<body>
<h2>欢迎${username}</h2>
<h1>新增部门</h1>
<hr>
<form action="${pageContext.request.contextPath}/dept/save" method="post">
部门编号：<input type="text" name="deptno"/><br>
部门名称：<input type="text" name="deptname"/><br>
部门位置：<input type="text" name="loc"/><br>
<input type="submit" value="保存"/><br>
</form>
</body>
</html>
detail.jsp
<%@ page import="com.zwm.oa.bean.Dept" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
Dept dept = (Dept)request.getAttribute("dept");
%>
<html>
<head>
<meta charset="utf-8">
<title>部门详情</title>
</head>
<body>
<h2>欢迎<%=session.getAttribute("username")%></h2>
<h1>部门详情</h1>
<hr>
部门编号：<%=dept.getDeptno()%> <br>
部门名称：<%=dept.getDname()%> <br>
部门位置：<%=dept.getLoc()%> <br>
<input type="button" value="后退" onclick="window.history.back()"/>
</body>
</html>
<%@ page import="com.zwm.oa.bean.Dept" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>部门详情</title>
</head>
<body>
<h2>欢迎${username}</h2>
<h1>部门详情</h1>
<hr>
部门编号：${dept.deptno} <br>
部门名称：${dept.dname} <br>
部门位置：${dept.loc} <br>
<input type="button" value="后退" onclick="window.history.back()"/>
</body>
</html>
edit.jsp
<%@ page import="com.zwm.oa.bean.Dept" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
Dept dept = (Dept)request.getAttribute("dept");
%>
<html>
<head>
<meta charset="utf-8">
<title>修改部门</title>
</head>
<body>
<h2>欢迎<%=session.getAttribute("username")%></h2>
<h1>修改部门</h1>
<hr>
<form action="<%=request.getContextPath()%>/dept/modify" method="post">
部门编号：<input type="text" name="deptno" value="<%=dept.getDeptno()%>" readonly/><br>
部门名称：<input type="text" name="deptname" value="<%=dept.getDname()%>"/><br>
部门位置：<input type="text" name="loc" value="<%=dept.getLoc()%>"/><br>
<input type="submit" value="修改"/><br>
</form>
</body>
</html>
<%@ page import="com.zwm.oa.bean.Dept" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>修改部门</title>
</head>
<body>
<h2>欢迎${username}</h2>
<h1>修改部门</h1>
<hr>
<form action="${pageContext.request.contextPath}/dept/modify" method="post">
部门编号：<input type="text" name="deptno" value="${dept.deptno}" readonly/><br>
部门名称：<input type="text" name="deptname" value="${dept.dname}"/><br>
部门位置：<input type="text" name="loc" value="${dept.loc}"/><br>
<input type="submit" value="修改"/><br>
</form>
</body>
</html>
error.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>发生错误</title>
</head>
<body>
<h1>ERROR</h1>
<h1>ERROR</h1>
<h1>ERROR</h1>
<h1>ERROR</h1>
<h1>ERROR</h1>
<h1>ERROR</h1>
<a href="<%=request.getContextPath()%>/index.jsp">重新登录</a>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>发生错误</title>
</head>
<body>
<h1>ERROR</h1>
<h1>ERROR</h1>
<h1>ERROR</h1>
<h1>ERROR</h1>
<h1>ERROR</h1>
<h1>ERROR</h1>
<a href="${pageContext.request.contextPath}/index.jsp">重新登录</a>
</body>
</html>
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #666666;
}
input[type="text"],
input[type="password"] {
width: 90%;
padding: 10px;
border: 1px solid #dddddd;
border-radius: 4px;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #333333;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #222222;
}
</style>
</head>
<body>
<br>
<br>
<br>
<div class="container">
<h2>用户登录</h2>
<form action="<%=request.getContextPath()%>/user/login" method="post">
<!-- 用户名字段 -->
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required/>
</div>
<!-- 密码字段 -->
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required/>
</div>
<input type="checkbox" name="f" value="1">10天内免登录
<!-- 提交按钮 -->
<button type="submit" value="login">登录</button>
</form>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #666666;
}
input[type="text"],
input[type="password"] {
width: 90%;
padding: 10px;
border: 1px solid #dddddd;
border-radius: 4px;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #333333;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #222222;
}
</style>
</head>
<body>
<br>
<br>
<br>
<div class="container">
<h2>用户登录</h2>
<form action="${pageContext.request.contextPath}/user/login" method="post">
<!-- 用户名字段 -->
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required/>
</div>
<!-- 密码字段 -->
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required/>
</div>
<input type="checkbox" name="f" value="1">10天内免登录
<!-- 提交按钮 -->
<button type="submit" value="login">登录</button>
</form>
</div>
</body>
</html>
list.jsp
<%@ page import="com.zwm.oa.bean.Dept" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>部门列表页面</title>
</head>
<body>
<script>
function del(dno){
if(window.confirm("亲，删了不可恢复哦！")){
document.location.href = "<%=request.getContextPath()%>/dept/delete?deptno=" + dno;
}
}
</script>
<h2>欢迎<%=session.getAttribute("username")%></h2>
<a href="<%=request.getContextPath()%>/user/exit">[退出]</a>
<h1 align="center">部门列表</h1>
<hr>
<table border="1px" align="center" width="50%">
<tr>
<th>编号</th>
<th>名称</th>
<th>位置</th>
<th>操作</th>
</tr>
<%--这里返回的是一个Object，但我们已经知道返回的是List集合，所有可以进行强制转换。--%>
<%
List<Dept> deptList = (List<Dept>)request.getAttribute("deptList");
int i = 0;
for (Dept dept : deptList) {
//System.out.println(dept);
%>
<tr>
<td><%=++i%></td>
<td><%=dept.getDeptno()%></td>
<td><%=dept.getLoc()%></td>
<td>
<a href= "#" onclick="del(<%=dept.getDeptno()%>)" >删除</a>
<a href="<%=request.getContextPath()%>/dept/detail?tag=edit&deptno=<%=dept.getDeptno()%>">修改</a>
<a href="<%=request.getContextPath()%>/dept/detail?tag=detail&deptno=<%=dept.getDeptno()%>">详情</a>
</td>
</tr>
<%
}
%>
</table>
<hr>
<a href="<%=request.getContextPath()%>/add.jsp">新增部门</a>
</body>
</html>
<%@ page import="com.zwm.oa.bean.Dept" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="utf-8">
<title>部门列表页面</title>
</head>
<body>
<script>
function del(dno){
if(window.confirm("亲，删了不可恢复哦！")){
document.location.href = "<%=request.getContextPath()%>/dept/delete?deptno=" + dno;
}
}
</script>
<h2>欢迎${username}</h2>
<a href="${pageContext.request.contextPath}/user/exit">[退出]</a>
<h1 align="center">部门列表</h1>
<hr>
<table border="1px" align="center" width="50%">
<tr>
<th>编号</th>
<th>名称</th>
<th>位置</th>
<th>操作</th>
</tr>
<c:forEach items="${deptList}" var="dept" varStatus="deptStatus">
<tr>
<td>${deptStatus.count}</td>
<td>${dept.deptno}</td>
<td>${dept.loc}</td>
<td>
<a href= "#" onclick="del(${dept.deptno})" >删除</a>
<a href="${pageContext.request.contextPath}/dept/detail?tag=edit&deptno=${dept.deptno}">修改</a>
<a href="${pageContext.request.contextPath}/dept/detail?tag=detail&deptno=${dept.deptno}">详情</a>
</td>
</tr>
</c:forEach>
</table>
<hr>
<a href="${pageContext.request.contextPath}/add.jsp">新增部门</a>
</body>
</html>
EL（Expression Language）表达式和JSTL（JavaServer Pages Standard Tag Library）在 Java Web 开发中使用，可以简化和增强在 JSP 页面中对数据的操作和展示。
进一步优化：
1. base标签
在jsp代码中，大量出现${pageContext.request.contextPath}代码段，如何简化？
在前端HTML代码中，有一个标签，叫做base标签，这个标签可以设置整个网页的基础路径。
-
这是Java的语法，也不是JSP的语法。是HTML中的一个语法。HTML中的一个标签。通常出现在head标签中。
-
< base href="http://localhost:8080/oa/"> -
在当前页面中，凡是路径没有以“/”开始的，都会自动将base中的路径添加到这些路径之前。
-
< a href="ab/def"></ a>等同于：
-
< a href="http://localhost:8080/oa/ab/def"></ a>
-
-
需要注意：在JS代码中的路径，保险起见，最好不要依赖base标签。JS代码中的路径最好写上全路径。
< base href="http://localhost:8080/oa/">是写死的，一般不这样写。
写成动态获取：
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
