您的位置:首页 > Web前端 > Node.js

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

2018-07-14 17:09 716 查看

目录结构如图:

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  文件路径   即可

 

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

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: