最近开始研究javaweb相关的一些技术,不得不说,就码代码的便捷度而言,java比c语言要强太多了,面向对象的设计理念较之面向过程确实有着强大的优势。但是由于c语言对于底层控制的强大能力,使得它仍然是包括本人所从事的设备制造领域在内的众多行业的首选。
话不多说,今天所要分享的是一点学习的笔记,帮助像我一样初识java,jsp的同学们解决可能会遇到的问题
大体的背景如此啊:
1.用jsp做了一个页面带有登录功能,想要添加登出功能
2.项目的大体结构如下:
其中主页中的index.jsp同时调用了common文件夹下的footer,header,以及taglib单个jsp文件,分别为底部固定框,头部固定框,以及网站的根路径。关键的header以及taglib代码分别如下:
header
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<style>
...
</style>
<div class="header">
<div class='logo'>原创文字</div>
<ul>
<li class='first'><a href="index.jsp">首页</a></li>
<li class='item'><a href="javascript:void(0)">原创故事</a></li>
<li class='item'><a href="javascript:void(0)">热门专题</a></li>
<li class='item'><a href="javascript:void(0)">欣赏美文</a></li>
<li class='item'><a href="javascript:void(0)">赞助</a></li>
</ul>
<div class='login'>
<c:choose>
<c:when test="${empty sessionScope.username}">
<span><a href="login.jsp">登陆</a></span>
<span>|</span>
<span><a href="javascript:void(0)">注册</a></span>
</c:when>
<c:otherwise>
<span><a href="javascript:void(0)">欢迎您,${sessionScope.username}</a></span>
<span> | </span>
<span><a href="${basePath}/controller/logoutController.jsp">登出</a></span>
</c:otherwise>
</c:choose>
</div>
</div>
taglib
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
int port = request.getServerPort();
String basePath = null;
if(port==80){
basePath = request.getScheme()+"://"+request.getServerName()+path;
}else{
basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
}
request.setAttribute("basePath", basePath);
%>
首页的index
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 头部页面 -->
<%@include file="common/header.jsp"%>
<!-- 获取路径 -->
<%@include file="common/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎来到我的博客</title>
<style>
...
</style>
</head>
<body>
<div class="banner">
<div class="content">
<ul class="second">
<li><a href="javascript:void(0)"><img alt="thirdimg"
src="${basePath}/static/img/3.jpg"></a></li>
<li><a href="javascript:void(0)"><img alt="firstimg"
src="${basePath}/static/img/1.jpg"></a></li>
<li><a href="javascript:void(0)"><img alt="secondimg"
src="${basePath}/static/img/2.jpg"></a></li>
<li><a href="javascript:void(0)"><img alt="thirdimg"
src="${basePath}/static/img/3.jpg"></a></li>
<li><a href="javascript:void(0)"><img alt="firstimg"
src="${basePath}/static/img/1.jpg"></a></li>
</ul>
<i class="btn_left"></i> <i class="btn_right"></i>
<script src="${basePath}/static/js/jQuery.js"></script>
<script type="text/javascript">
var leftBtn = $(".btn_left").eq(0);
var rightBtn = $(".btn_right").eq(0);
var ul = $('.banner .content ul').eq(0);
var timer = null;
var index = 0;
var imgwidth = $('.banner .content ul li img').width(); //获取轮播图片的宽度
var len = $('.banner .content ul li').length - 2//获取总共的图片数量
function movePicture(){
$('.banner .content ul').animate({'margin-left':-imgwidth * (index+1)},1000,function(){
if(index == len){
$(this).css('margin-left',-imgwidth);
index = 0;
}
if(index == -1){
$(this).css('margin-left',-imgwidth * len);
index = len - 1;
}
});
}
rightBtn.on('click',function(){
clearTimeout(timer); //定时器清零
timer = setTimeout(function(){
index ++;
movePicture();
},300);
});
leftBtn.on('click',function(){
clearTimeout(timer); //定时器清零
timer = setTimeout(function(){
index --;
movePicture();
},300);
});
</script>
</div>
</div>
<!-- 内容区域 -->
<div style='border: 1px solid #ccc'>
<br />
<br />
<div class='category'>
<div class='title'>连载小说</div>
<ul class='items'>
<li class='item'></li>
<li class='item'></li>
<li class='item'></li>
<div style='clear: both'></div>
</ul>
</div>
<div class='category'>
<div class='title'>编程代码类</div>
<ul class='items'>
<li class='item'></li>
<li class='item'></li>
<div style='clear: both'></div>
</ul>
</div>
</div>
<!-- 底部申明 -->
<%@include file="common/footer.jsp"%>
</body>
</html>
代码中当登录完成需要退出时,触发header.jsp中的登出按钮理论上是走如下逻辑:
<span><a href="${basePath}/controller/logoutController.jsp">登出</a></span>
但是系统一直提示系统却报出404无法找到文件的异常。
实际上在taglib中我已经明确获取到了系统的根路径并且保存在了basepath这个参数中,index也include了这个文件。更奇怪的是,index中的javascript的代码段中也使用了这个文件进行进行加载,进行登录的校验工作,唯独登出的时候报出了错误。
在我百思不得其解的时候我发现了问题所在。原来我在index加载文件的时候,顺序出现了问题,应该先调用tablib,再调用header,而我却把先后顺序放反了。basepath在taglib的文件中定义了,而header需要调用这个变量,所以应该放在加载taglib之后再加载到index中,这样实现basepat变量的使用。如下图
修改后的index include文件顺序:
<!-- 获取路径 -->
<%@include file="common/taglib.jsp"%>
<!-- 头部页面 -->
<%@include file="common/header.jsp"%>
重新刷新页面后,正常的实现了页面的切换。
可能是用c用习惯了,include文件的时候一般不会考虑先后顺序的问题,然而通过解决这个小问题,使我加深了对于jsp的认识,可能这个错误比较低级,但是我觉得初入门的新手们也很有可能会遇到和我一样的问题故编辑此文。一来为将来回头总结学习过程设置节点,二来,如果能为广大刚入门的小伙伴们解决同样问题的话,那也甚好。