使用原生Nodejs搭建基本服务框架

最新推荐文章于 2025-04-13 11:36:34 发布

雨落Liy

最新推荐文章于 2025-04-13 11:36:34 发布

阅读量473

点赞数 1

分类专栏： Nodejs 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_42390185/article/details/121513000

版权

Nodejs 专栏收录该内容

8 篇文章

订阅专栏

静态服务框架搭建

有两种实现：同步与异步。

同步实现起来简洁，代码量明显少于异步实现。但当获取的资源足够多时，效率低下。

异步虽然做的操作多，但当获取的资源足够多时，使用高并发能很好的提升读取文件的效率。
开启server.js服务器后，在浏览器访问本地服务即：http://localhost:8080

创建一个工程文件夹
- 创建public文件夹
  - 创建styles文件夹（css、styl、less…文件）
  - 创建scripts文件夹（js文件）
  - 创建img文件夹（图片图标文件）
  - 创建index.html文件（用于服务器渲染首页）
- 创建server.js文件（用于创建服务器）
server.js（主服务器文件）

const http = require('http');
const path = require('path');
const mime = require('mime/lite');
// mime需要npm安装

const readStaticFile = require('./readStaticFile');

const server = http.createServer();

server.on('request',async (req, res) => {
	// 使用path模块的join方法拼接路径。
    let filePath = path.join(__dirname, './public', req.url);
    try {
        let {data, mimeType} = await readStaticFile(filePath);
        res.writeHead(200, {
            'Content-Type' : mimeType + ';charset=utf-8'
        });
        res.end(await data);
    } catch (error) {
        console.log(error);
    }

}).listen(3000);

readStaticFile.js（属于拓展脚本文件，减少主服务器的代码量）

const path = require('path');
const fs = require('fs');
const mime = require('mime/lite'); // 用于通过后缀得到对应的类型，用于设置响应体

// 1、同步实现
// function readStaticFile(fileName) {
//     let data = '';
//     let ext = path.parse(fileName).ext;
//     let mimeType = mime.getType(ext);
//     // 1、判断传过来的文件是否存在，根目录为public
//     if (fs.existsSync(fileName)) {
//         if (ext) {
//             data = fs.readFileSync(fileName);
//         } else {
//             data = fs.readFileSync('./public/index.html')
//         }
//     } else {
//         data = 'File not found!';
//     }
//     return {
//         data,
//         mimeType
//     };
// }

// 2、异步实现
function render(file) {
    try {
        return new Promise((resolve, reject) => {
            fs.readFile(file, (err, data) => {
                if (err) {
                	// 读取文件失败说明根路径为文件夹
                    reject('你访问的路径是文件夹');
                } else {
                    resolve(data);
                }
            });
        })
    } catch (error) {
        return error;
    }
}
async function readStaticFile(fileName) {
    let data = '';
    let ext = path.parse(fileName).ext; // 拓展名提取
    let mimeType = mime.getType(ext) || 'text/html';
    // 1、判断传过来的文件是否存在，根目录为public
    if (fs.existsSync(fileName)) {
    	// 判断拓展名是否为空 不为空说明访问的是文件或文件夹
        if (ext) {
            data = render(fileName);
        } else {
            data = render(path.join(fileName, '/index.html'));
        }
    } else {
        data = '没有发现文件！';
    }
    return {
        data,
        mimeType
    };
}

module.exports = readStaticFile;

index.html

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

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/common.css">
</head>

<body>
    <img src="./img/1.jpg"/>
    <img src="./img/2.jpg"/>
    <img src="./img/3.jpg"/>
    <img src="./img/4.jpg"/>
    <img src="./img/5.jpg"/>
    <img src="./img/6.jpg"/>
    <img src="./img/7.jpg"/>
</body>

</html>

common.css

*{
    margin: 0;
    padding: 0;
    font-size: 14px;
}
img{
    width: 50px;
    height: 50px;
}