Question

我对node.js和js还是陌生的。我有一个具有styles.css的简单应用程序，但我不知道如何在app.js上链接它。

在index.html中有<link rel="stylesheet" type="text/css" href="css/styles.css">

这是我的node.js的app.js：

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

const hostname = '127.0.0.1';
const port = 3000;


fs.readFile('index.html', (err, html) =>{
    if (err){
        throw err;
    }
    const server = http.createServer((req,res) => {
        res.statusCode = 200;
        res.setHeader('Content-type', 'text/html');
        res.write(html);
        res.end();

    });

    server.listen(port, hostname, () => {
        console.log('Server started on port ' + port);
    });
});

那么我应该如何修改app.js使其能够找到CSS文件？

Answer 1

对于每个请求，您都返回index.html。

尝试一下：

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

const hostname = '127.0.0.1';
const port = 3000;


fs.readFile('index.html', (err, html) =>{
    if (err){
        throw err;
    }
    const server = http.createServer((req,res) => {


        res.statusCode = 200;
        if(req.url == '/'){
        res.setHeader('Content-type', 'text/html');
        res.write(html);
        res.end();
        res.statusCode = 200;
        } 

        else if(req.url == '/css/styles.css'){
            res.setHeader('Content-type', 'text/css');
            res.write(fs.readFileSync('css/styles.css'));
            res.end();
        } else {
            res.write("invalid request")
            res.end();
        }

    });

    server.listen(port, hostname, () => {
        console.log('Server started on port ' + port);
    });
});

Answer 2

如果您不限于原始node.js并且可以使用express.js，则可以使用此方法来提供静态文件

这是您的server.js

const express = require("express");
const app = express();

app.use(express.static("public"));

const PORT = process.env.PORT || 8080;

app.listen(PORT, () => {
  console.log(`Your app is listening on port ${PORT}`);
});

然后您创建一个文件夹并将其命名为public，这就是所有客户端访问的地方...

以下是一个实时演示，其中包含完整的工作示例：https://glitch.com/edit/#!/peridot-wildcat?path=README.md:1:0

如何在node.js中链接css文件

2 个答案: