主页 / 问题 / 1209255
Accepted
Александр
Asked:2021-11-25 00:38:45 +0000 UTC2021-11-25 00:38:45 +0000 UTC

不包括外部 css 文件

  • 772

我正在尝试使用 node.js 开始开发。我几乎不会在里面或 js 中翻找，但我想弄清楚。启动服务器时，我重定向到主页，但样式未连接到它。下面的代码

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

const server = http.createServer((req, res)=>{
    
    let filePath = path.join(__dirname, 'html', req.url === '/' ? 'index.html' : req.url)
    const ext = path.extname(filePath)
    
    let contentType = 'text/html'
    switch (ext){
        case '.css':
            contentType = 'text/css'
            break
        case '.js':
            contentType = 'text/javascript'
            break
        default:
            contentType = 'text/html'
    }
    
    if(!ext){
        filePath += '.html'
    }

    fs.readFile(filePath, (err, content) => {
        if(err){
            fs.readFile(path.join(__dirname, 'html', 'error.html'), (err, data)=>{
                if(err){
                    res.writeHead(500)
                    res.end('Error')
                } else{
                    res.writeHead(200, {
                        'Content-Type': contentType
                    })
                    res.end(data)
                }
            })
        } else{
            res.statusCode = 200;
            res.setHeader('Content-Type', contentType);
            res.end(content)
        }
    })
    
})

const PORT = process.env.PORT || 3000

server.listen(PORT, ()=>{
    console.log(`Server has been started on ${PORT} ...`)
})
body{
    background: rgb(223, 12, 12);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <title>Home page</title>
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/contact">Contact</a>
    </nav>
    <h1>Home page</h1>
</body>
</html>

<!-- begin snippet: js hide: false console: true babel: false -->

文件夹结构如下：

我试图以不同的方式连接风格，有一点，有两个，没有它们。始终为白色背景和黑色文本。如果将 css 推入 html 文件夹，则样式已连接，但这可能不正确。最初，浏览器有一个样式被识别为的警告type="text/html"，但现在没有这样的消息。

我想知道如何使一切正常工作？

PS：题外话：有什么值得看的，明确如何在node.js下开发（初学者最好清晰易懂）？

html

1 个回答

  1. Best Answer

    在应用程序入口点，形成了正在打开的文件的路径。新文件到页面的所有连接都会调用此脚本，因此，我没有正确形成正在打开的文件的路径。最初，我假设如果我加载了一个文件index.html，然后通过其中指定的路径，服务器将很容易找到并连接所需的样式文件。事实证明并非如此。解决方案如下：

    // определение дефолтного пути до открываемого файла
let filePath = path.join(__dirname, 'html', req.url === '/' ? 'index.html' : req.url)
const ext = path.extname(filePath) // определяем расширение открываемого файла

// определяем тип открываемого файла
let contentType = 'text/html'
switch (ext){
    case '.css':
        contentType = 'text/css'
        filePath = path.join(__dirname, req.url) // формируем новый путь до файла
        break
    case '.js':
        contentType = 'text/javascript'
        filePath = path.join(__dirname, req.url)
        break
    default:
        contentType = 'text/html'
}

    也许这个问题有更好的解决方案，但到目前为止我还不知道。

    • 0

相关问题