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

如何解决Javascript文件未在本地主机上加载

我只是在学习快递，我试图在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文件中的script标签内，则JavaScript可以正常工作

解决方法

一旦您的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>

“静态”是您要用于公共路线的名称 “ public”是您应用中文件夹的名称

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

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

让我们进一步说明在创建诸如节点服务器之类的节点服务器时会发生什么。

启动时（使用app.listen()），服务器将侦听传入的请求并返回篷。

如果您尝试访问“ localhost：3000 / dumb”，则导航器会请求您的服务器询问他“ / dumb”路由。由于不存在，服务器会显示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”发送了一个请求，并且在我的第一个愚蠢示例中，服务器遮阳篷不知道这条路线。

您可以为每个资源（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”。

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

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

如何解决Javascript文件未在本地主机上加载

解决方法

相关推荐