node.js处理静态资源请求

X-712

于 2024-05-10 14:36:53 发布

阅读量154

点赞数 1

文章标签： node.js

本文链接：https://blog.csdn.net/qq_63532615/article/details/138665385

版权

http_server.js部分

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

const myserver = http.createServer()
myserver.listen(3000, function() {
    console.log('服务器启动成功！服务器的地址是http://localhost:3000')
})
myserver.on('request', function(req, res) {
    //req.url用于在服务器上获取浏览器发送过来的请求地址
    console.log(req.url)
    // 用户请求服务器的根地址，就向浏览器发送index.html网页代码
    if(req.url == '/') {
        const filename = path.join(__dirname, 'index.html')
        fs.readFile(filename, 'utf-8', function(error, data) {
            if(error != null) {
                console.log('网页文件读取失败！')
                res.write('<h1>网页不存在（500错误）</h1>')
                res.end()
            }
            else {
                res.write(data)
                res.end()
            }
        })
    }
    // 如果index.html中的img标签向服务器的/css/style.css地址发送了请求，就向浏览器发送css文件
    else if(req.url=='/css/style.css') {
        const filename2 = path.join(__dirname,'css','style.css')
        fs.readFile(filename2,'utf-8',function(error,data) {
            if(error != null) {
                console.log('css文件读取失败！');
            }
            else {
                res.write(data)
                res.end()
            }
        })
    }
    // 如果index.html中的img标签向服务器的/imgs/logo.jpg地址发送请求，就向浏览器发送图片文件
    else if(req.url == '/imgs/logo.jpg') {
        const filename2 = path.join(__dirname, 'imgs', 'logo.jpg')
        fs.readFile(filename2, function(error, data) {
            if(error != null) {
                console.log('图片读取失败！')
            }
            else {
                res.write(data)
                res.end()
            }
        })
    }
    else {
        res.end()
    }
})

index.html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color:red;">首页</h1>
    <!-- 注意：当浏览器接收该html文件后，会根据img标签的src属性值向服务器发送第二次请求 -->
    <img src="imgs/logo.jpg">
</body>
</html>

css部分 style.css

body {
    background: lightblue
}

h1 {
    color:red;
}

X-712

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫