基于node.js实现一个静态资源服务器

目录结构如图：

index.html页面

一个h1标签，以及一个外联js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="./js/index.js"></script>
</head>
<body>
    <h1>这是首页</h1>
</body>
</html>

list页面：

一个h1标签和一个img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是列表页</h1>
    <img src="./images/vue.png" alt="">
</body>
</html>

index.js页面：

页面加载完成给body添加背景颜色

vonload = function () {
    document.body.style.backgroundColor = "red"
}

页面结构都是相当的简单，当然主要目地是为了模拟实现一个基本的http服务器

下面是具体代码逻辑部分

// 1.引入node中自己定义的核心模块
 // 使用 HTTP 服务器与客户端  需要 require('http')。
const http = require("http");
 // 文件系统
const fs = require("fs");
 // 路径
const path = require("path");

 // 2.创建一个服务器
const server = http.createServer();
 // 3.为这个server服务器，通过  on  方法，绑定一个 事件来监听每次请求
server.on("request", (req, res) => {
    // 获取当前请文件名
    let url = req.url;
    // 调用封装函数
    readStaticFile(url,res)
})
 // 4.启动服务器
server.listen(3000,() => {  // 默认为localhost（本地主机）; 端口为3000
    console.log("server is running")
})

function readStaticFile(url, res) {
    // 读取对应路径的文件
    fs.readFile(path.join(__dirname, 'static', url), (err, data) => {
        // 找不到文件则返回404
        if (err) return res.end("404");
        // res.end来返回上面读取的内容
        res.end(data)
    }) 
}

以上就实现了一个最基本的静态资源服务器。

使用express.static来快速托管静态资源文件

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。

中文官网：点击打开链接

关于express的使用这里暂时先不说明，抽空一并总结，可以先看一下具体的实现

// 1. 导入 express 模块
const express = require("express");
// 2. 创建服务器
const app = express();
//  使用 express.static 来托管 assets 目录
// 这里app.use是一个中间件，所谓中间件其实也是一个路由，是一个可以处理所有http请求的路由
app.use(express.static("./assets"))
// 3. 开启服务器
app.listen(3001, () => { // 默认为localhost（本地主机）; 端口号3001

  console.log("express is runing")

})

nodemon

在做服务器相关业务逻辑的时候，每次更改代码都要重启项目工程，这里给大家推荐一个非常好用的插件，nodemon ，相信有的朋友是知道的，这里就简单介绍一下基本使用

nodemon安装

npm i stall nodemon -g (因为是一个工具所以全局安装)

nodemon使用

和用 node 来运行文件一样只需 nodemon 文件路径即可

此时在你更改代码时会自动帮你重启。

基于node.js实现一个静态资源服务器

使用express.static来快速托管静态资源文件

nodemon

猜你喜欢