Question

这可能是一种不好的方法，但是我试图通过将脚本导入到通过WebStorm运行的节点服务器上托管的HTML文档来完成W3School的jQuery教程。

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

到目前为止，该项目包含三个文件：node-server.js（当然创建节点服务器），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>标记会执行这两个脚本。

可能有一些我很想知道的事情，对吗？

Answer 1

您只是将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

这样的框架

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

1 个答案: