Javascript 和 CSS 在节点服务器中不起作用

Question

So I'm trying to make a web app, using a node server. I run into a problem where the CSS, Javascript don't work when linking them with a src like or.

The only way I can have css and javascript, is to directly put it inside the script and style parameters, but that doesn't seem that practical

The error that it pulls out shows a url: 127.0.0.1/home.js

why is this happening, and is there a work around?

here is the code

const fetch = require('node-fetch');
const fs = require("fs");
const http = require("http");
const url = require("url");

const server = http.createServer((req, res) => {

    // get URL
    const pathName = url.parse(req.url, true).pathname;

    console.log(pathName);
    // create split pathName
    const pathSplit = pathName.split("/");
    pathSplit.shift();

    // HOME PATH
    if(pathName === "/home" || pathName === "/"){
        // Get HTML data
        const data = renderHome();

        res.writeHead(200, {"content-type": "text/html"});
        
        fs.readFile(`${__dirname}/templates/template-basic.html`, "utf-8", (err, data) => {

            fs.readFile(`${__dirname}/templates/template-battlepass.html`, "utf-8", (err, d) => {
                let output = data.replace("{%CONTAINER%}", d);
                res.end(output);
            });
        });
        
    }
    
    // ITEM SHOP PATH
    else if(pathName === "/itemShop") {
        // Get HTML data
        const data = renderItemShop();
        
        res.writeHead(200, {"content-type": "text/html"});
        res.end("This is the item shop page");
    }
    
    // TOURNAMENTS PATH
    else if(pathName === "/tournaments") {
        // Get HTML data
        const data = renderTournaments();

        res.writeHead(200, {"content-type": "text/html"});
        res.end("this is the tournaments page");
    }
    
    // ITEMS PATH
    else if(pathSplit[0] === "items") {

        // List all the items for the page
        const itemsPages = ["backpacks", "contrails", "emotes", "gliders", "skins", "pickaxes", "wraps"];
        let itemConfirm = false;
        
        // If URL has been found, change itemConfirm to true
        for(let i = 0; i < itemsPages.length; i++){
            if(itemsPages[i] === pathSplit[1]){
                // Get HTML data
                const data = renderItems(pathSplit[1]);
                
                res.writeHead(200, {"content-type": "text/html"});
                res.end(`This is the page for ${pathSplit[1]} in items`);
                itemConfirm = true;
            }
        };

        // If itemConfirm is false, no url found
        if(itemConfirm === false) {
            res.writeHead(404, {"content-type": "text/html"});
            res.end(`No URL found for ${pathSplit[1]} in items`);
        };
    }

    // JAVASCRIPT

    // NO URL FOUND PATH: 404
    else{
        res.writeHead(404, {"content-type": "text/html"});
        res.end("could not find URL");
    }
});
server.listen(1337, "127.0.0.1", () => {
    console.log("listening for reqs now");
});

Answer 1

I created a simple server that can serve any type of file using the mime-types library. My basic http server works like this:

const http = require('http');
const fs = require('fs');
const path = require('path');
const mime = require('mime-types'); //Creates the appropriate headerType based on the extension

http.createServer(function (request, response) {
  let fileName = path.basename(request.url) || 'index.html' //so that the homepage uses index.html
  filePathPart = path.dirname(request.url).slice(1) + "/" + fileName
  filePath = "public/" + filePathPart //I store my files in public/js/ or public/css/
  console.log(filePath) //just to check if I got the correct files
  mimeType = mime.contentType(fileName)
  getFile(response, mimeType, filePath)
}).listen(8080);


//I wrote a function to write all the responses the server gives, with this I don't need to expect a specific number of inputs, I can load any number of js/css files or even other html pages.
function getFile(response, mimeType, filePath) {
  fs.readFile(filePath, function (err, contents) {
    response.writeHead(200, { "Content-Type": mimeType });
    response.end(contents);
  })
}