Javascript

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

本文主要是介绍node服务器搭建起来后,返回的html引入js/css失效怎么办?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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服务器搭建起来后,返回的html引入js/css失效怎么办?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!