通过 WebStorm 使用 Node.js 后端时，页面未 Importing/Executing 链接 JavaScript

Question

这可能是一种糟糕的方法，但我正在尝试通过将脚本导入节点服务器 [=61] 上托管的 HTML 文档来完成 W3School 的 jQuery 教程=] 通过 WebStorm。

我已经在 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);
});

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

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

Answer 1

您只向客户端发送 html 文件，而不考虑它要求的 url。制作一个 switch case 并响应它所要求的文件。

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 文件提供 link 时，浏览器再次向 localhost:/main.js 发出请求并获取 js 文件。

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

通过 WebStorm 使用 Node.js 后端时，页面未 Importing/Executing 链接 JavaScript

Page Not Importing/Executing Linked JavaScript when Using A Node.js Backend via WebStorm

html

javascript

jquery

node.js

webstorm