526互联

老杜 JavaWeb 讲解（十八） ——项目优化（Servlet+JSP+EL+JSTL）

发布时间 2023-08-03 12:51:58作者: 猪无名

(十六)项目优化（Servlet+JSP+EL+JSTL）

相关视频：

55-EL表达式JSTL和base标签改造OA

新旧代码对比：

注意点：

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}/">