Javascript 文件未加载到本地主机

Question

I am just learning express and I tried to create a simple webpage on localhost:3000. I created a text box with a submit button, which on click will get the text element inside the text box and print it on the console.

我的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 工作正常

Answer 1

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

所以你必须test.js可用。

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

因此，在您拥有 node.js 文件的位置，创建一个“public”文件夹

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

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

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

在HTML中：

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

'static' 是您想要的 public 路由名称 'public' 是您应用程序中文件夹的名称

当然，您可以根据需要更改路径和文件夹名称。

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

引用它

Answer 2

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

当您启动它时（使用 app.listen()），服务器将侦听传入请求和 return awnser。

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

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

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

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

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

正如我所说，您可以创建一个 'public' 文件夹并告诉您的应用它包含静态文件：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'.

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

Javascript 文件未加载到本地主机

Javascript file isn't loading on local host

javascript

node.js

express

handlebars.js