如何通过没有模块的 Vanilla NodeJS 从服务器提交 html 和 js

How to submit a html and js from server via Vanilla NodeJS with no modules

我知道最好使用expressJS,但我想了解NodeJS的核心API。 我想创建一个没有任何模块的最简单的服务器。我们到处都可以找到只发送 html 文件的服务器代码:

const fs = require('fs')
const http = require('http')
const path =require('path')

const server = http.createServer((req,res)=>{
fs.readFile(path.join(__dirname,'index.html'),(err,data)=>{
        if (err){
            throw err
        }
        res.writeHead(200,{'Content-Type':'text/html'})
        res.end(data)
    })
}).listen(8080, () => {
    console.log('Server running on port 8080')
})
server.on('request', (req, resp) => {
    if(req.url === '/' && req.method === 'GET') {
        data=fs.readFileSync(__dirname + '/index.html')
        resp.writeHead(200, {
            'Content-Type': 'text/html',
        })
        return resp.end(data)
    }
}) 

如果我尝试发送 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <h1 id="text">Hello!</h1>
    <button id="change">Change</button>
<script src="index.js"></script>
</body>
</html>

脚本文件 index.js 未加载。 index.js的例子:

const text=document.getElementById('text')
const change = document.getElementById('change')
const col1='rgb(255, 0, 0)'
const col2='rgb(0, 0, 0)'
change.addEventListener('click', () => {
    
    if (text.style.color===col1){
         text.style.color=col2
    }else{
         text.style.color=col1
    }
})

如何通过纯 Node.js 发送两个文件:index.html 和 index.js? ExpressJS的类似问题:,但是使用了Express,在这个问题中我想使用纯node.js。

我认为您 server.on('request', ...) 中需要另一个 if 语句。当前的 if 语句只处理 index.html

你可以试试这个,我还没有测试代码,但逻辑上它应该工作:

server.on('request', (req, resp) => {
    if(req.url === '/' && req.method === 'GET') {
        data=fs.readFileSync(__dirname + '/index.html')
        resp.writeHead(200, {
            'Content-Type': 'text/html',
        })
        return resp.end(data)
    }

    // add this code
    if(req.url === '/index.js' && req.method === 'GET'){
        data=fs.readFileSync(__dirname + '/index.js')
        resp.writeHead(200, {
            'Content-Type': 'application/javascript',
        })
        return resp.end(data)
    }
})