Javascript 文件未在本地主机上加载答案

【问题标题】：Javascript file isn't loading on local hostJavascript 文件未在本地主机上加载
【发布时间】：2020-10-20 13:45:49
【问题描述】：

我只是在学习 express，我尝试在 localhost:3000 上创建一个简单的网页。我创建了一个带有提交按钮的文本框，单击该按钮将获取文本框中的文本元素并将其打印在控制台上。

我的 node.js 代码是：

const express = require('express')
const path = require('path')
const hbs = require('hbs')

const app=express();

app.set('view engine', 'hbs');
const dir= path.join(__dirname,'../templates/views');
const partials=path.join(__dirname,'../templates/partials')
app.set('views',dir);
hbs.registerPartials(partials);

app.get('', (req, res) => {
    res.render('test')
});

app.listen(3000, () => {
    console.log(`Server started on port`);
});

test.hbs文件代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     {{>header}}
    <form class="form">
        <input type="text" placeholder="Write here" class="textbox">
        <input type="submit" class="btn">
    </form>
    <script src="./test.js"></script>
</body>
</html>

而javascript代码是

const values={
    nodeForm:document.querySelector('.form'),
    nodeText:document.querySelector('.textbox'),
    nodeBtn:document.querySelector('.btn')
}

values.nodeForm.addEventListener('submit',e=>{
    e.preventDefault();
    console.log(nodeText.value)
    
})

但是当我打开localhost:3000时，控制台页面给我一个错误，说GET http://localhost:3000/test.js net::ERR_ABORTED 404 (Not Found)

编辑：如果我将脚本放在 test.hbs 文件中的脚本标记中，Javascript 可以正常工作

【问题讨论】：

querySelector('.forms') class="forms" 在哪里？为什么属性中有逗号？ placeholder="Write here",class="textbox"
@epascarello，我改了。它没有用。不过谢谢。

标签： javascript node.js express handlebars.js

【解决方案1】：

让我们进一步解释当您创建像您这样的节点服务器时会发生什么。

当您启动它时（使用app.listen()），服务器将监听传入的请求并返回一个 awnser。

如果您尝试访问“localhost:3000/dumb”，导航器会请求您的服务器向他询问“/dumb”路线。由于它不存在，服务器 awnser 出现 404 错误。

如果您现在尝试访问“localhost:3000/”，服务器会找到一个路由，执行您的回调 ((req, res) => res.render('test'))，在此回调中您使用 Handlebar 生成一个发送到导航器的 html 页面。

然后导航器获取 HTML，解析它并找到几个链接（如 <script src="./test.js"> 以及 <img href="./myimage.png"> 或 <stylesheet href="./style.css">）为了能够完全呈现页面，导航器将请求它找到的每个链接以获取相关的资源。

因此，在您的情况下，导航器向“localhost:3000/test.js”发送了另一个请求，并且在我的第一个愚蠢示例中，服务器 awnser 它不知道这条路线。

您可以为每个资源创建一个路由 (app.get('./test.js', /*...*/) 并带有一个回调发送回正确的资源。但由于这些文件只是静态的（不需要任何计算），解决它的最常见方法是使它们静态可用。这意味着对您的应用说“这个文件夹中充满了静态文件，请为它们提供服务”。

正如我所说，您可以创建一个“公共”文件夹并告诉您的应用它包含静态文件：app.use(express.static('./public')); 当然，'./public' 是根应用程序的正确路径（package.json 和 node_modules 所在的位置）。

然后，这个文件夹中的每个文件和文件夹都成为可达路由。所以如果你有一个 'js' 文件夹，然后你想创建一个app.get('/js', /*...*/) 路由，你就会有冲突。

所以常用的方法是在一个路由下服务这个文件夹。例如app.use('/static', express.static('./public')); 将使 './public' 文件夹下的所有内容在 '/static' 路由下可用。在你的情况下'localhost:3000/static/test.js'。

我希望这更清楚，对不起英语不好，这不是我的母语。

【讨论】：

哦，伙计，这是很多信息。非常感谢你把它简化得这么好。我很感激。
你从哪里学到这些东西的人？我真的很想学习这种深度。
啊哈，我读了 5 年的小学，学到了很多领域的基础知识。这只是 xp，继续学习并尝试更多地了解正在发生的事情，你会明白的。
5 年哇，太棒了。我想让你成为我的导师。大声笑
@DarkDevil 如果你愿意，我可以，但我不知道如何联系你，我不想暴露我的公共邮件......

【解决方案2】：

一旦您的 html 返回到您的导航器，它将加载它需要的任何资源（例如图像、css 或脚本）。这就是为什么您收到 404 错误，它无法访问 'localhost/test.js'

所以你必须让 test.js 可用。

常见的方法是使用 /public 文件夹并将所有静态资源放入其中。

所以你有你的 node.js 文件，创建一个“公共”文件夹

将你的 test.js 文件放入其中。

在你的 app.listen() 之前在 Node 中添加这个：

app.use('/static', express.static('public'));

在 HTML 中：

<script src="/static/test.js"></script>

'static' 是你想要的公共路由的名字 'public' 是应用中文件夹的名称

当然你可以随意更改路由和文件夹名称。

您可以向其中添加子文件夹。例如将 test.js 放在路径 app/public/js/test.js 中。并在 HTML 中使用 src="/static/js/test.js" 引用它

【讨论】：

感谢朋友帮助我。您是否建议我在主“app.js”所在的位置创建一个名为“Static”的目录并将我的文件放入其中？
不完全是我编辑我的遮阳篷，所以它会更清晰
能否请您详细说明一下'常用的方法是使用 /public 文件夹并将所有可用资源放入其中'
应该更清楚知道，如果您仍然需要精确度，我会随时待命；-)
非常感谢您将其简化得如此之好。我在我的 node.js 文件所在的 src 目录下创建了一个公共目录，并写了这个 'app.use('/static', express.static('public'));'在我的 test.hbs 文件中的 app.listen 和之前，但结果仍然相同。它说'GET localhost:3000/static/test.js net::ERR_ABORTED 404（未找到）'