页面在通过 WebStorm 使用Node.js后端时未导入/执行链接的 JavaScript

这可能是一个糟糕的方法，但我正在尝试通过将脚本导入到通过WebStorm运行的Node服务器上托管的HTML文档中来执行W3School的jQuery教程。

我已经在Preferences > Languages & Frameworks > JavaScript > Libraries下安装并启用了jQuery库。 jQuery已添加到package.json中，并列在侧边栏的外部库下。

到目前为止，该项目由三个文件组成：node-server.js(当然会创建 Node 服务器(、main.html(一个空白的 HTML 文档(和 main.js(包含我们的 JS 和 jQuery 的文件(。其内容如下：

node-server.js

var http = require('http');
var fs = require('fs');
const PORT=1337;
var html = fs.readFileSync('main.html');
http.createServer(function (req, res)
{
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(html);
}).listen(PORT);

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>W3Schools Learn jQuery Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>

main.js

$(document).ready( function ()
{
    var henlo = '<h1>henlo programer</h1>';
    var stinky = '<h1>helllo you STINKY PROGRAMMER</h1>';
    var ugly = '<h1>go build a website ugly</h1>';
    var body = $('body');
    body.append(henlo);
    body.append(stinky);
    body.append(ugly);
});

加载页面将返回仅包含 main.html 内容的 DOM。导入任何类型的JS似乎都会失败，因为包含像alert('asdf')这样的简单指令的简单.js文档不会执行。将alert('asdf')或main.js的内容直接写入页面上的<script>标记中会执行这两个脚本。

我可能缺少一些明显的东西，对吧？

您只将 html 文件发送到客户端，而不考虑它请求的 url。制作一个开关大小写，并用它要求的文件进行响应。

var http = require('http');
var fs = require('fs'); 
const PORT=1337;
var html = fs.readFileSync('main.html');
var js = fs.readFileSync('main.js');
var server = http.createServer(function (req, res) { 
    switch (req.url) { 
        case "/main.js" :
            res.writeHead(200, {"Content-Type": "text/javascript"});
            res.write(js);
            break;
         default :
            res.writeHead(200, {"Content-Type": "text/html"}); 
            res.write(html); 
    }
    res.end(); 
}).listen(PORT);

首次加载页面时，将执行默认大小写并使用 html 文件进行响应。但是当你在其中提供js文件的链接时，浏览器再次向localhost：/main发出请求.js并获取js文件。

考虑使用像Express js这样的框架

相关内容

最新更新

热门标签：