英文:
Tomcat can't see js-script
问题
我正在使用servlets和jsp开发web项目。我在IntelliJ中构建项目。在项目中，我有一个jsp文件来管理图形和用户表单。graphics.js 负责图形和表单验证 - validator.js。
我的问题是：Tomcat可以正确使用 graphics.js，但无法找到 validator.js。在控制台中，我收到一个404消息，说找不到 validator.js，尽管它与 graphics.js 在同一个文件夹中。
我会非常感激对这种情况的解释。我找到了类似的问题，但它们的答案对我没有帮助。如果我重复了其中一个问题，我道歉。
项目结构：
src
ControllerServlet.java
AreaCheckingServlet.java
web
css
style.css
js
graphics.js
validator.js
WEB-INF
Form.jsp
web.xml
Form.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<style><%@include file="/css/style.css"%></style>
<title>web-lab-2</title>
<script src="${pageContext.request.contextPath}/js/graphics.js"></script>
<script src="${pageContext.request.contextPath}/js/validator.js"></script>
</head>
<body>
<div id="canvas" class="one_line">
<canvas id="graphics" height="600px" width="600px"></canvas>
<script>draw(600, 240, 25)</script>
</div>
<div id="input_column" class="one_line">
<form class="js-form">
<div id="x" class="input">
<p>choose the value of x</p>
<input id="x=-4" name="x" type="radio" value="-4">
<label for="x=-4">-4</label><br>
<input id="x=-3" name="x" type="radio" value="-3">
<label for="x=-3">-3</label><br>
<input id="x=-2" name="x" type="radio" value="-2">
<label for="x=-2">-2</label><br>
<input id="x=-1" name="x" type="radio" value="-1">
<label for="x=-1">-1</label><br>
<input id="x=0" name="x" type="radio" value="0">
<label for="x=0">0</label><br>
<input id="x=1" name="x" type="radio" value="1">
<label for="x=1">1</label><br>
<input id="x=2" name="x" type="radio" value="2">
<label for="x=2">2</label><br>
<input id="x=3" name="x" type="radio" value="3">
<label for="x=3">3</label><br>
<input id="x=4" name="x" type="radio" value="4">
<label for="x=4">4</label><br>
</div>
<div id="y" class="input">
<p></p>
<label for="y-inp">choose the value of y</label>
<p></p>
<input id="y-inp" name="y" type="text" placeholder="type a number between -3 and 5" class="y">
</div>
<br>
<div id="r-group" class="input">
<input id="r=1" name="r" type="checkbox" value="1">
<label for="r=1">1</label><br>
<input id="r=2" name="r" type="checkbox" value="2">
<label for="r=2">2</label><br>
<input id="r=3" name="r" type="checkbox" value="3">
<label for="r=3">3</label><br>
<input id="r=4" name="r" type="checkbox" value="4">
<label for="r=4">4</label><br>
<input id="r=5" name="r" type="checkbox" value="5">
<label for="r=5">5</label><br>
</div>
<div>
<label for="submit">Send</label><br>
<input id="submit" type="button" onclick="validate()">
</div>
</form>
</div>
</body>
</html>
graphics.js:
function draw(side, r, mar) {
const canvas = document.getElementById("graphics")
const context = canvas.getContext('2d')
context.fillStyle = (30, 30, 30)
context.globalAlpha = 0.15
context.fillRect(0, 0, side, side)
context.fillStyle = "blue"
context.globalAlpha = 0.65
context.fillRect(side / 2, side / 2, r, -r / 2)
context.beginPath()
context.arc(side / 2, side / 2, r, 0, Math.PI / 2)
context.moveTo(side / 2, side / 2)
context.lineTo(side / 2 + r, side / 2)
context.lineTo(side / 2, side / 2 + r)
context.fill()
context.beginPath()
context.moveTo(side / 2, side / 2)
context.lineTo(side / 2 - r / 2, side / 2)
context.lineTo(side / 2, side / 2 + r)
context.fill()
context.fillStyle = "black"
context.globalAlpha = 1;
context.beginPath();
context.moveTo(0, side / 2);
context.lineTo(side, side / 2);
context.moveTo(side / 2, 0);
context.lineTo(side / 2, side);
context.stroke();
context.font = '20px monospace'
context.fillText('-R', side / 2 - r, side / 2 + mar)
context.fillText('-R/2', side / 2 - r / 2, side / 2 + mar)
context.fillText('0', side / 2 - mar * 0.75, side / 2 + mar)
context.fillText('R/2', side / 2 + r / 2, side / 2 + mar)
context.fillText('R', side / 2 + r, side / 2 + mar)
context.fillText('R', side / 2 - mar * 0.75
<details>
<summary>英文:</summary>
I am developing web-project using servlets and jsp. I am building the project in intellij. In the project I have one jsp that manage graphics and user form. ```graphics.js``` is responsible for the graphics and for form validation - ```validator.js```.
My problem: Tomcat works correctly with ```graphics.js``` but he can't find the ```validator.js```. In the console, I have a 404 message that says there is no ```validator.js```, although it is in the same folder as the ```graphics.js```.
I would be very grateful for an explanation of this situation. I found similar questions, but the answers to them did not help me. I apologize if I repeat one of them
The project structure:
src
ControllerServlet.java
AreaCheckingServlet.java
web
css
style.css
js
graphics.js
validator.js
WEB-INF
Form.jsp
web.xml
Form.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<style><%@include file="/css/style.css"%></style>
<title>web-lab-2</title>
<script src="${pageContext.request.contextPath}/js/graphics.js"></script>
<script src="${pageContext.request.contextPath}/js/validator.js"></script>
</head>
<body>
<div id="canvas" class="one_line">
<canvas id="graphics" height="600px" width="600px"></canvas>
<script>draw(600, 240, 25)</script>
</div>
<div id="input_column" class="one_line">
<form class="js-form">
<div id="x" class="input">
<p>choose the value of x</p>
<input id="x=-4" name="x" type="radio" value="-4">
<label for="x=-4">-4</label><br>
<input id="x=-3" name="x" type="radio" value="-3">
<label for="x=-3">-3</label><br>
<input id="x=-2" name="x" type="radio" value="-2">
<label for="x=-2">-2</label><br>
<input id="x=-1" name="x" type="radio" value="-1">
<label for="x=-1">-1</label><br>
<input id="x=0" name="x" type="radio" value="0">
<label for="x=0">0</label><br>
<input id="x=1" name="x" type="radio" value="1">
<label for="x=1">1</label><br>
<input id="x=2" name="x" type="radio" value="2">
<label for="x=2">2</label><br>
<input id="x=3" name="x" type="radio" value="3">
<label for="x=3">3</label><br>
<input id="x=4" name="x" type="radio" value="4">
<label for="x=4">4</label><br>
</div>
<div id="y" class="input">
<p></p>
<label for="y-inp">choose the value of y</label>
<p></p>
<input id="y-inp" name="y" type="text" placeholder="type a number between -3 and 5" class="y">
</div>
<br>
<div id="r-group" class="input">
<input id="r=1" name="r" type="checkbox" value="1">
<label for="r=1">1</label><br>
<input id="r=2" name="r" type="checkbox" value="2">
<label for="r=2">2</label><br>
<input id="r=3" name="r" type="checkbox" value="3">
<label for="r=3">3</label><br>
<input id="r=4" name="r" type="checkbox" value="4">
<label for="r=4">4</label><br>
<input id="r=5" name="r" type="checkbox" value="5">
<label for="r=5">5</label><br>
</div>
<div>
<label for="submit">Send</label><br>
<input id="submit" type="button" onclick="validate()">
</div>
</form>
</div>
</body>
</html>
graphics.js:
function draw(side, r, mar) {
const canvas = document.getElementById("graphics")
const context = canvas.getContext('2d')
context.fillStyle = (30, 30, 30)
context.globalAlpha = 0.15
context.fillRect(0, 0, side, side)
context.fillStyle = "blue"
context.globalAlpha = 0.65
context.fillRect(side / 2, side / 2, r, -r / 2)
context.beginPath()
context.arc(side / 2, side / 2, r, 0, Math.PI / 2)
context.moveTo(side / 2, side / 2)
context.lineTo(side / 2 + r, side / 2)
context.lineTo(side / 2, side / 2 + r)
context.fill()
context.beginPath()
context.moveTo(side / 2, side / 2)
context.lineTo(side / 2 - r / 2, side / 2)
context.lineTo(side / 2, side / 2 + r)
context.fill()
context.fillStyle = "black"
context.globalAlpha = 1;
context.beginPath();
context.moveTo(0, side / 2);
context.lineTo(side, side / 2);
context.moveTo(side / 2, 0);
context.lineTo(side / 2, side);
context.stroke();
context.font = '20px monospace'
context.fillText('-R', side / 2 - r, side / 2 + mar)
context.fillText('-R/2', side / 2 - r / 2, side / 2 + mar)
context.fillText('0', side / 2 - mar * 0.75, side / 2 + mar)
context.fillText('R/2', side / 2 + r / 2, side / 2 + mar)
context.fillText('R', side / 2 + r, side / 2 + mar)
context.fillText('R', side / 2 - mar * 0.75, side / 2 - r)
context.fillText('R/2', side / 2 - mar * 1.5, side / 2 - r / 2)
context.fillText('-R/2', side / 2 - mar * 2, side / 2 + r / 2)
context.fillText('-R', side / 2 - mar * 1.25, side / 2 + r)
console.log("done")
}
validator.js(there is only a message about the correct work for debugging yet):
function validate() {
console.log("donedone")
}
I tried to change the directory with js-scripts, change URLs in the code to "/js/validator.js", "js/validator.js" and "../js/validator.js" (it is worth noting that the ```graphics.js``` was correctly located with all these paths), also I tried to search ```validator.js``` directly by "localhost:8080/js/validator.js". This didn't work either, but "localhost:8080/js/graphics.js " works.
UPD: I also tried rebuild/clean artefacts. And recreating the project from 0 too
</details>
# 答案1
**得分**: 0
I still didn't understand what the error was. But it helped me to replace the old lines of code:
```html
<script src="${pageContext.request.contextPath}/js/graphics.js"></script>
<script src="${pageContext.request.contextPath}/js/validator.js"></script>
with these:
<script><%@include file="/js/graphics.js"%></script>
<script><%@include file="/js/validator.js"%></script>
UPD: After some research, I assume that the problem was the lack of Tomcat permission to use files from my project folder.
英文:
I still didn't understand what the error was. But it helped me to replace the old lines of code:
<script src="${pageContext.request.contextPath}/js/graphics.js"></script>
<script src="${pageContext.request.contextPath}/js/validator.js"></script>
with these:
<script><%@include file="/js/graphics.js"%></script>
<script><%@include file="/js/validator.js"%></script>
UPD: After some research, I assume that the problem was the lack of Tomcat permission to use files from my project folder.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论