提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

基于 EL表达式 + JSTL标签+base标签再次改造oa项目

项目 基于 标签 表达式 el 再次 base 改造
2023-09-14 09:14:07 时间

目录

一： EL表达式 + JSTL标签进行改造oa项目

二：使用base标签进一步优化

一： EL表达式 + JSTL标签进行改造oa项目

①前面我们已经基于Servlet+Session+Cookie+JSP对oa项目进行了更改；现在我们已经学习了EL表达式和JSTL标签库，所以就可以进一步优化代码了！

②使用EL表达式和JSTL标签库去替换.jsp中的java代码！实际上主要使用的还是EL表达式，只有替换for循环时使用的才是JSTL标签库。

注意：使用JSTL标签库需要引用两个jar包：

③taglibs-standard-impl-1.2.5.jar

taglibs-standard-spec-1.2.5.jar

（1）修改add.jsp页面

<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增部门</title>
	</head>
	<body>
		<!--<h3>欢迎<%=session.getAttribute("username")%>登录</h3>-->
		<h3>欢迎${username}登录</h3>
		
		<h3>欢迎登录</h3>
		<h1>新增部门</h1>
		<hr >
		<!--<form action="<%=request.getContextPath()%>/dept/add" method="post">-->
		<form action="${pageContext.request.contextPath}/dept/add" method="post">
			部门编号<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>

（2）修改detail.jsp页面

<!--不需要引入了<%@ page import="com.bjpowernode.oa.bean.Dept" %>-->
<%@page contentType="text/html;charset=UTF-8" %>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>部门详情</title>
	</head>
	<body>
		<!--<h3>欢迎<%=session.getAttribute("username")%>登录</h3>-->
		<h3>欢迎${username}登录</h3>
		
		<h1>部门详情</h1>
		<hr >

		<!--不需要了
			// 从request域当中取出数据，强制类型转换
			Dept dept = (Dept)request.getAttribute("deptList");
		-->

		<!--
		部门编号：<%=dept.getDeptno()%> <br>
		部门名称：<%=dept.getDname()%><br>
		部门位置：<%=dept.getLoc()%><br>
		-->
		<!--这里的deptList不是随便写的，是前面我们setAttribute("deptList")时的变量名-->
		部门编号：${deptList.deptno} <br>
		部门名称：${deptList.dname}<br>
		部门位置：${deptList.loc}<br>
		
		<input type="button" value="后退" onclick="window.history.back()"/>
	</body>
</html>

（3）修改modify.jsp页面

<!--<%@ page import="com.bjpowernode.oa.bean.Dept" %>-->
<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改部门</title>
	</head>
	<body>
		<h1>修改部门</h1>
		<hr >

		<!--<%
			Dept dept = (Dept)request.getAttribute("deptList");
		%>-->

		<!--<form action="<%=request.getContextPath()%>/dept/modify" method="post">
			部门编号<input type="text" name="deptno" value="<%=dept.getDeptno()%>" readonly /><br>
			部门名称<input type="text" name="dname" value="<%=dept.getDname()%>"/><br>
			部门位置<input type="text" name="loc" value="<%=dept.getLoc()%>"/><br>
			<input type="submit" value="修改"/><br>
		</form>-->

		<form action="${pageContext.request.contextPath}/dept/modify" method="post">
			部门编号<input type="text" name="deptno" value="${deptList.deptno}" readonly /><br>
			部门名称<input type="text" name="dname" value="${deptList.deptno}"/><br>
			部门位置<input type="text" name="loc" value="${deptList.loc}"/><br>
			<input type="submit" value="修改"/><br>
		</form>
	</body>
</html>

（4）修改error.jsp页面

<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆失败</title>
</head>
<body>
    <!--登录失败，请<a href="<%=request.getContextPath()%>/index.jsp">重新登录</a>-->
    登录失败，请<a href="${pageContext.request.contextPath}/index.jsp">重新登录</a>
</body>
</html>

（5）修改index.jsp页面

<%@page contentType="text/html;charset=UTF-8"%>
<!--表示访问jsp的时候不生成session对象-->
<%@page session="false" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎使用OA系统</title>
	</head>
	<body>

		<h1>LOGIN PAGE</h1>
		<hr>
		<!--<form action="<%=request.getContextPath()%>/dept/login" method="post">-->
		<form action="${pageContext.request.contextPath}/dept/login" method="post">
			username：<input type="text" name="username"><br>
			password：<input type="password" name="password"><br>

			<!--在最初index.jsp的登录页面添加一个复选框-->
			<input type="checkbox" name="flag" value="1">十天内免登录<br>

			<input type="submit" value="login">
		</form>

	</body>
</html>

（6）修改list.jsp页面

<!--<%@ page import="com.bjpowernode.oa.bean.Dept" %>-->
<!--<%@ page import="java.util.List" %>-->
<%@page contentType="text/html;charset=UTF-8" %>
<!--使用JSTL标签库，改for-->
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>部门列表页面</title>
</head>
<body>
<!--
<h3>欢迎<%=session.getAttribute("username")%>登录</h3>
<a href="<%=request.getContextPath()%>/dept/exit">退出系统</a>
-->
<h3>欢迎${username}登录</h3>
<a href="${pageContext.request.contextPath}/dept/exit">退出系统</a>

<script type="text/javascript">
    function del(dno) {
        // 弹出确认框，用户点击确定，返回true，点击取消返回false
        var ok = window.confirm("亲，删了不可恢复哦！");
        if (ok) {
           // document.location.href = "<%=request.getContextPath()%>/dept/delete?deptno=" + dno;
            document.location.href = "${pageContext.request.contextPath}/dept/delete?deptno=" + dno;

        }
    }
</script>

<h1 align="center">部门列表</h1>
<hr>
<table border="1px" align="center" width="50%">
    <tr>
        <th>序号</th>
        <th>部门编号</th>
        <th>部门名称</th>
        <th>操作</th>
    </tr>

    <!--<%
        // 从request域当中取出集合
        // getAttribute取出来的是Object类型，这里进行了强制类型转换
        List<Dept> deptList = (List<Dept>) request.getAttribute("deptList");
        // 循环遍历
        int i = 0;
        for (Dept dept : deptList) {
    %>
    <tr>
        <td><%=++i%>
        </td>
        <td><%=dept.getDeptno()%>
        </td>
        <td><%=dept.getLoc()%>
        </td>
        <td>
            <a href="javascript:void(0)" onclick="del(<%=dept.getDeptno()%>)">删除</a>
            <a href="<%=request.getContextPath()%>/dept/detail?f=modify&deptno=<%=dept.getDeptno()%>">修改</a>
            <a href="<%=request.getContextPath()%>/dept/detail?f=detail&deptno=<%=dept.getDeptno()%>">详情</a>
        </td>
    </tr>
    <%
        }
    %>-->

    <c:forEach items="${deptList}" varStatus="deptStatus" var="dept">
        <tr>
            <td>${deptStatus.count}</td>
            <td>${dept.deptno}</td>
            <td>${dept.dname}</td>
            <td>
                <a href="javascript:void(0)" onclick="del(${dept.deptno})">删除</a>
                <a href="${pageContext.request.contextPath}/dept/detail?f=modify&deptno=${dept.deptno}">修改</a>
                <a href="${pageContext.request.contextPath}/dept/detail?f=detail&deptno=${dept.deptno}">详情</a>
            </td>
        </tr>
    </c:forEach>

</table>

<hr>
<!--<a href="<%=request.getContextPath()%>/add.jsp">新增部门</a>-->
<a href="${pageContext.request.contextPath}/add.jsp">新增部门</a>
</body>
</html>

总结：我们把所有jsp文件中的java代码全都换成了EL表达式和JSTL标签的形式，看着就舒服多了！但是目前还是有很多重复的代码，比如路径${pageContext.request.contextPath}；所以我们可以使用base标签进一步优化！

二：使用base标签进一步优化

①在前端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代码中的路径最好写上全路径；只有HTML 页面的路径才会默认加上base标签里面的路径。

⑤那么怎么把base中的路径写成动态的呢？例如：http://localhost:8080/oa/

😊${pageContext.request.scheme}获取到的就是协议： http

😊${pageContext.request.serverName}获取到的就是本机IP：localhost

😊${pageContext.request.serverPort}获取到的就是端口号： 8080

😊${pageContext.request.contextPath}获取到的就是项目名：oa

<base href="http://localhost:8080/oa/">
<!--就等价于-->
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">

相关文章