V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
ARslince
V2EX  ›  问与答

使用 nodejs 时,遇到了一个问题,求助大家

  •  
  •   ARslince · 2023-08-24 09:09:52 +08:00 · 1674 次点击
    这是一个创建于 491 天前的主题,其中的信息可能已经有所发展或是发生改变。
    node 版本:16.13.2

    问题描述:

    我在 server.js 中使用 fs.readFileSync 去读取一个 html 文件,然后用 response.end(html) 返回结果。

    问题来了,如果 html 文件中 js 和 css 分别采用 <script> 标签和 <style> 标签引用,那么返回到页面的效果

    正常;如果 js 和 css 都采用外部引入方式,那么样式和逻辑都不会被返回,这是为什么呢?

    以下是 server.js 和 index.html

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


    const server = http.createServer((req, res) => {
    let { pathname } = new URL(req.url, 'http://127.0.0.1')
    if (pathname === '/index.html') {
    let html = fs.readFileSync('./page/index.html')
    res.end(html)
    }
    })

    server.listen(9000, () => {
    console.log('server is runing......');
    })




    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <style>
    td {
    padding: 20px 40px;
    }

    table tr:nth-child(odd) {
    background-color: #aef;
    }

    table tr:nth-child(even) {
    background-color: #fcb;
    }

    table,
    td {
    border-collapse: collapse;
    }
    </style>
    </head>

    <body>
    <h1>你好呀 111</h1>
    <table border="1">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    </body>
    <!-- <script src="./js/index.js"></script> -->
    <script>
    const tds = document.querySelectorAll('td')
    tds.forEach(item => {
    item.onclick = function () {
    this.style.background = '#222'
    }
    })
    </script>

    </html>


    这是正常的显示样式


    而当我把 css 和 js 使用外部引入的方式就出问题了


    点击×号取消后,是如下样子
    14 条回复    2023-08-24 13:27:44 +08:00
    HelloWorld556
        1
    HelloWorld556  
       2023-08-24 09:13:46 +08:00
    是要设置 public 吗?我很少用 nodejs , 不知道对不对
    powerN
        2
    powerN  
       2023-08-24 09:18:47 +08:00
    你这两个文件是请求的 ./ 目录下的。对应 127.0.0.2:9000/css 127.0.0.2:9000/js
    但是没看到你在 nodejs 中返回这两个文件。且一直 pending 的可能是不是因为你只判断了 pathname === '/index.html' 才 res.end()
    其他的资源没有就不会 res.end.
    gadfly3173
        3
    gadfly3173  
       2023-08-24 09:19:18 +08:00 via Android
    看起来像是浏览器不能访问到你的 css 和 js 文件,你看看你是不是没处理对其他文件的访问请求
    zhangxh1023
        4
    zhangxh1023  
       2023-08-24 09:20:08 +08:00
    比如:你引入了 `./js/index.js` ,那么浏览器会像你的当前网址的相对路径,请求资源 `index.js`,你可以在 network 里面看到请求的目标地址,应该是: `http://xxxx:9000/js/index.js`, 如果你的服务端没有返回对应的 js 文件,就不行了。

    你应该搜索一下: web 静态资源服务器
    lanz0519
        5
    lanz0519  
       2023-08-24 09:20:09 +08:00
    你只是返回了 html 的资源,类似的功能通过 static 方式去管理更好,搜 nodejs 静态资源管理就能搜到
    Rache1
        6
    Rache1  
       2023-08-24 09:20:28 +08:00
    你这 server 回调里面只对 index.html 做了处理响应呀。
    crazyTanuki
        7
    crazyTanuki  
       2023-08-24 09:35:57 +08:00
    我觉得是路径问题
    ARslince
        8
    ARslince  
    OP
       2023-08-24 09:38:39 +08:00
    谢谢各位老哥,问题已经解决了,原因是因为我 server 回调中只对 index.html 做了处理,并没有对 css 和 js 做处理,感谢各位!
    mdn
        9
    mdn  
       2023-08-24 09:47:48 +08:00
    你这也太简陋了吧,是学习吗?

    用下 express 也不至于有这个问题
    https://expressjs.com/en/starter/static-files.html
    ARslince
        10
    ARslince  
    OP
       2023-08-24 10:15:38 +08:00
    刚开始学 nodejs ,在看一些比较基础的内容
    victimsss
        11
    victimsss  
       2023-08-24 11:16:26 +08:00
    nodejs 学一下主要的模块 然后可以按照项目的思路写 demo 了,网上很多 express 和 Nestjs 的教程。
    knva
        12
    knva  
       2023-08-24 11:36:21 +08:00
    因为静态文件没找到呗
    iOCZ
        13
    iOCZ  
       2023-08-24 11:39:12 +08:00
    得把本地 require 地址变为服务器地址
    webszy
        14
    webszy  
       2023-08-24 13:27:44 +08:00 via Android
    你尝试自己写 web 服务器,就要自己处理各种静态资源,除非你把那些资源内联到 html 里
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   970 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:01 · PVG 04:01 · LAX 12:01 · JFK 15:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.