简单探讨Web项目中的路径问题

最新推荐文章于 2023-12-17 18:34:46 发布

Coufran

最新推荐文章于 2023-12-17 18:34:46 发布

阅读量186

点赞数

分类专栏：知识点

本文链接：https://blog.csdn.net/Coufran/article/details/79814398

版权

知识点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

背景

最近发现很多同学在构建Web项目时，都出现了CSS和JS文件加载不出来的情况，而导致这个问题的原因又有太多的共同之处。所以，在这里写一篇博客帮助大家解决这些问题。如果有什么错误或者不容易理解的地方，欢迎提出建议和意见。

引言

本文基于一个错误案例，先对bug进行调试、修正、分析，最后说明其中的知识点，并找出最佳实践。

正文

错误案例

错误案例使用Eclipse开发，基于Servlet实现。

目录结构如下：

目录结构

基本逻辑：

浏览器请求TestServlet，TestSevlet将请求转发给test.jsp，test.jsp中包含一个test.css的外链。

问题：

页面没有CSS渲染效果。

核心代码如下：

//TestServlet.java

@WebServlet("/test.do")
public class TestServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("view/test.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

<!-- test.jsp -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Blog_20180401_0001</title>
		<link type="text/css" rel="stylesheet" href="css/test.css">
	</head>
	<body>
		<h1>Hello,World!</h1>
	</body>
</html>

/* test.css */

@charset "UTF-8";

h1 {
	color: lightblue;
	text-decoration: underline;
}

问题截图

如果CSS生效，Hello,World!这行文字应该是浅蓝色、加下划线的。
问题截图

bug调试/修正

首先在浏览器按F12打开调试窗口，切换到网络(或Network)下，刷新界面，发现test.css报了404错误，没有加载到页面上，请求的URL地址是http://localhost:8081/Blog_20180401_0001/css/test.css。
浏览器错误信息
回到Eclipse中，直接右键test.css，点击Run on Server，发现URL地址是http://localhost:8081/Blog_20180401_0001/view/css/test.css。
CSS文件URL
正确的URL比错误的多了一层view，遂将test.jsp中的href加一层view，如下图，刷新浏览器，访问正确。
修正后JSP
正确访问

bug分析

在编辑JSP文件的时候，我们在写完链接后，经常会在链接处按下Ctrl（仅限Eclipse），来查看链接有没有被正确引用。
在此处看似已经被正确引用了，但是，实际上，由于JSP是由Servlet转发过来的，所以其实引用关系应该建立在Servlet和CSS之间，而不应该建立在JSP和CSS之间。
所以，在后续访问的时候，可能就会出现CSS未被正确引用，导致没有CSS样式的情况出现。

知识点

编辑中……

Coufran

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单探讨Web项目中的路径问题

背景最近发现很多同学在构建Web项目时，都出现了CSS和JS文件加载不出来的情况，而导致这个问题的原因又有太多的共同之处。所以，在这里写一篇博客帮助大家解决这些问题。如果有什么错误或者不容易理解的地方，欢迎提出建议和意见。引言本文基于一个错误案例，先对bug进行调试、修正、分析，最后说明其中的知识点，并找出最佳实践。正文错误案例错误案例使用Eclipse开发，基...
复制链接

扫一扫