首页 > 编程语言> > node服务器搭建起来后，返回的html引入js/css失效怎么办？

node服务器搭建起来后，返回的html引入js/css失效怎么办？

2021-10-30 01:00:09 作者：互联网

node服务器搭建起来后，返回的html引入js/css失效

先搞一个node服务器，用官网方文档的代码,启动服务器输入127.0.0.1:3000直接打开，看到字符就成功了。
中文可能会出现乱码，修改字符串解析就行，或者换成英文。

const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200
    res.setHeader('Content-Type', 'text/plain')
    res.end('你好世界\n')
})

server.listen(port, () => {
    console.log(`服务器运行在 http://${hostname}:${port}/`)
})

如何发送html页面等文件？
引入文件系统(fs)模块。
怎么用？
当成自己定义好的函数来使用就行了，查查文档，
小技巧：ctrl+f快速搜索关键字
fs.readFile(path[, options], callback)
3个参数，路径，可选项，回调函数
看一下页面，没问题，但是怎么有3个请求：地址,ico，js
第一个是我们html的请求，
第二个是页面标头的图标。
第三个不知道是什么，先不管。

node服务器返回的html成功了，但是<script>标签的引入js却失败了
为什么发送的html，js引入会失效？
因为没有做地址处理。
Uncaught SyntaxError: Unexpected token '<'
分析：出现这个问题一般是路径没有写对，但是看我们的服务器，本身只能返回一个html页面。
而html文件的script标签也会向服务器发送请求，那么需要js文件，服务器还是返回html文件，所以导致了货不对板。
解决：分析请求的路径，根据不同的路径为条件，返回不同的文件即可。

其他引入略
// 1，引入url模块
const url = require('url');

const server = http.createServer((req, res) => {
    ...略
    // 2.解析请求路径
    let pathname = url.parse(req.url).pathname;
    console.log(pathname);
    // 3.按照路径返回不同的文件。
    if (pathname === '/') {
        fs.readFile('./index.html', 'utf8', (err, data) => {
            // ...返回处理略
        });
    } else{
        fs.readFile('./index.js', 'utf8',略 )
}})
server.listen(略)

找不到文件错误？
GET 'xxx' net::ERR_CONNECTION_RESET
检查文件路径，检查代码拼写或者逻辑。

扩展

静态文件夹处理
文件放在文件夹里里怎么处理？
问：路径连文件夹里的文件名也一起当做成路径
拆成数组
html引入些css，imag之类，放在文件夹里。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <link rel="stylesheet" type="text/css" href="/static/index.css" /></head>
<body>
    <div class="test">test</div>
</body>
<script type="text/javascript" src="/static/index.js"></script></html>

function pathHandle(pathname) {
    let result;
    if (pathname === '/') {
        return result = pathname;
    } else {
        result = pathname.split('/');}
    return result
};
const server = http.createServer((req, res) => {
    res.statusCode = 200;
    let pathname = url.parse(req.url).pathname;
    let ptHandle = pathHandle(pathname);
    // 这里还可以抽象出来做成单独的撸又
    if (ptHandle[0] === '/') {
        let pathUrl = './index.html'
        // 处理代码抽象出来
        pathCallback(res, pathUrl);
    } else if (ptHandle[1] === 'static') {
        let pathUrl = './static/' + ptHandle[2];
        pathCallback(res, pathUrl);
    } else {res.end('404');    }
})

server.listen(port, () => {
    console.log(`服务器运行在 http://${hostname}:${port}/`)
})

标签：node,const,res,js,html,pathname,http
来源： https://www.cnblogs.com/block-0/p/15484115.html