Node.js学习——利用 HTTP、Url、Path、Fs 模块创建一个静态的web服务器

实验操作

新建一个app.js文件

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

let common = require('./modules/common');

http.createServer((req, res) => {

    let pathName = req.url; // 获取到请求的url

    pathName = url.parse(pathName).pathname; // 使用url内置模块获取路径名
    pathName = pathName !== '/' ? pathName : '/index.html' // 获取到/就默认为/index.html

    let extname = path.extname(pathName);  // 使用内部模块path获取文件后缀名

    if (pathName !== "/favicon.ico") {
        fs.readFile(path.join(__dirname, '../static') + pathName, (err, data) => {
            // 使用path根据当前路劲获得读取文件的相对路径
            if (err) {
                res.writeHead(404, {
                    "Content-Type": "text/html;charset=UTF-8"
                });
                res.end('404这个网页不存在');
            }
            let mime = common.getMime(extname);  // 使用自定义模块根据后缀名获取Content-Type的值

            res.writeHead(200, {
                "Content-Type": "" + mime + ";charset=UTF-8"
            });
            res.end(data);
        })
    }

}).listen(3000);

console.log("Server runing at http://127.0.0.1:3000");

在app.js目录下新建/modules/common.js

exports.getMime = function (extname) {

    switch (extname) {
        case '.html':
            return 'text/html';
        case '.css':
            return 'text/css';
        case '.js':
            return 'text/javascript';
        default:
            return 'text/html';
    }

}

以上的common.js中的getMime 函数所列举的类并不完整，引入完整的对应关系需要使用一个json文件:https://github.com/wxyzcctv/node-demo-sd10/blob/main/data/mime.json
该json文件放在/data/mime.json
在common.js文件中使用添加如下代码：

const fs = require('fs');
const path = require('path');
// 方式一
exports.getFileMime = function (extname) {
    return new Promise((resolve, reject) => {
        fs.readFile(path.join(__dirname, '../data/mime.json'), (err, data) => {
            if (err) {
                console.log(err);
                reject(err)
                return err;
            }
            let mime = JSON.parse(data.toString());
            resolve(mime[extname])
        })
    })
}

// 方式二：
exports.getFileMime = function (extname) {
    let data = fs.readFileSync(path.join(__dirname, '../data/mime.json'));
    let mime = JSON.parse(data.toString());
    return mime[extname]
}

common.js中使用方式一，此时app.js中代码为

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

let common = require('./modules/common');

http.createServer((req, res) => {

    let pathName = req.url; // 获取到请求的url

    pathName = url.parse(pathName).pathname; // 使用url内置模块获取路径名
    pathName = pathName !== '/' ? pathName : '/index.html' // 获取到/就默认为/index.html

    let extname = path.extname(pathName);  // 使用内容模块path获取文件后缀名

    if (pathName !== "/favicon.ico") {
        fs.readFile(path.join(__dirname, './static') + pathName, async (err, data) => {
            // 使用path根据当前路劲获得读取文件的相对路径
            if (err) {
                res.writeHead(404, {
                    "Content-Type": "text/html;charset=UTF-8"
                });
                res.end('404这个网页不存在');
            }
            // let mime = common.getMime(extname);  // 使用自定义模块根据后缀名获取Content-Type的值
            let mime = await common.getFileMime(extname);  // 使用自定义模块根据后缀名获取Content-Type的值

            res.writeHead(200, {
                "Content-Type": "" + mime + ";charset=UTF-8"
            });
            res.end(data);
        })
    }

}).listen(3000);

console.log("Server runing at http://127.0.0.1:3000");

common.js中使用方式二就在app.js中就去掉async和await

封装静态web服务

新建/module/routers.js

const fs = require('fs');
const path = require('path');
const url = require('url');

let getFileMime = function (extraname) {
    let data = fs.readFileSync(path.join(__dirname,'../data/mime.json'));  // 同步操作
    data = JSON.parse(data.toString())
    return data[extraname]
}

exports.static = function(req,res,staticPath){

    let pathName = req.url; // 获取到请求的url
    
    pathName = url.parse(pathName).pathname; // 使用url内置模块获取路径名
    pathName = pathName !== '/' ? pathName : '/index.html' // 获取到/就默认为/index.html

    let extname = path.extname(pathName);  // 使用内容模块path获取文件后缀名
    
    if (pathName !== "/favicon.ico") {

        try {
            let data = fs.readFileSync('../' + staticPath + pathName);  // 同步操作

            if(data){
                let mime = getFileMime(extname);  // 使用自定义模块根据后缀名获取Content-Type的值

                res.writeHead(200, {
                    "Content-Type": "" + mime + ";charset=UTF-8"
                });
                res.end(data);
            }
        } catch (error) {
            
        }        
    }
}

在app.js文件中

const http = require('http');

const url = require('url');

let routers = require('./modules/routers.js');


http.createServer((req, res) => {


    routers.static(req, res, 'static');
    // 增加路由
    let pathName = url.parse(req.url).pathname;
    if(pathName === '/login'){
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('访问登录页面');
    } else if(pathName === '/register'){
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('访问登录页面');
    } else if(pathName === '/admin'){
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('访问管理页面');
    }

}).listen(3000);

console.log("Server runing at http://127.0.0.1:3000");

使用ejs

EJS 常用标签

<% %>流程控制标签
<%= %>输出标签（原文输出 HTML 标签）
<%- %>输出标签（HTML 会被浏览器解析）

<a href="<%= url %>"><img src="<%= imageURL %>" alt=""></a><ul>
<ul> <% for(var i = 0 ; i < news.length ; i++){ %> <li><%= news[i] %></li> <% } %> </ul>

先安装ejs： npm install ejs --save
新建views/login.ejs文件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>这是一个登录页面</h2>
    <h3>
        <%=msg%>
    </h3>

    <br>

    <ul>
        <%for(let i=0; i < list.length; i++){ %>
            <li>
                <%=list[i].title%>
            </li>
            <%}%>

    </ul>
</body>

</html>

然后在app.js中使用ejs

const http = require('http');
const url = require('url');
let routes = require('./modules/routes');
const ejs = require('ejs')


http.createServer((req, res) => {

    routes.static(req, res, 'static')

    let pathName = url.parse(req.url).pathname;
    if (pathName === '/login') {
        let msg = "这是数据库传回的数据";
        let list = [
            { title: '标题1' },
            { title: '标题2' },
            { title: '标题3' },
            { title: '标题4' },
            { title: '标题5' },
        ]
        ejs.renderFile('./views/login.ejs', { msg: msg, list: list }, (err, data) => {
            if (err) {
                console.log(err);
                return;
            }
            res.writeHead(200, {
                "Content-Type": "text/html;charset=UTF-8"
            });
            res.end(data)
        })
    } else if (pathName === '/register') {
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('正在操作注册页面')
    } else if (pathName === '/admin') {
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('处理之后的业务逻辑')
    } else {
        // res.writeHead(404, {
        //     "Content-Type": "text/html;charset=UTF-8"
        // });
        // res.end('404页面不存在')
    }

}).listen(3000);

console.log("Server runing at http://127.0.0.1:3000");

获取请求方法名
req.method;

GET请求

获取 GET 传值：
var urlinfo=url.parse(req.url,true).query;
在app.js中添加/news的路由，并在浏览器的地址栏中输入http://localhost:3000/news?id=1&page=2实现get请求，

const http = require('http');
const url = require('url');
let routes = require('./modules/routes');
const ejs = require('ejs')

http.createServer((req, res) => {
    routes.static(req, res, 'static')

    let pathName = url.parse(req.url).pathname;
    if (pathName === '/login') {
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('这是一个登录页面')
    } else if (pathName === '/register') {
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('正在操作注册页面')
    } else if (pathName === '/admin') {
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('处理之后的业务逻辑')
    } else if (pathName === '/news') {
        // 获取请求方法名
        console.log(req.method);
        let params = url.parse(req.url, true).query;
        console.log(params.page);
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('获取get请求成功')
    }

}).listen(3000);

console.log("Server runing at http://127.0.0.1:3000");

POST请求

获取 POST 传值：

var postData = ''; 
// 数据块接收中 
req.on('data', function (postDataChunk) {
    postData += postDataChunk;
});
 // 数据接收完毕，执行回调函数 
req.on('end', function () {
    try {
        postData = JSON.parse(postData);
    } catch (e) {}
    req.query = postData;
    console.log(querystring.parse(postData));
});

新建views/form.ejs

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="/doLogin" method="post">
        用户名：<input type="text" name="userName" value="admin">
        <br>
        <br>
        密 码：<input type="password" name="password" value="123456">
        <br>
        <br>
        <input type="submit" value="提交">

    </form>
</body>

</html>

在app.js中修改logoin路由中的内容并以及新增一个/doLogin路由

if (pathName === '/login') {
        ejs.renderFile('./views/form.ejs', (err, data) => {
            if (err) {
                console.log(err);
                return err;
            }
            res.writeHead(200, {
                "Content-Type": "text/html;charset=UTF-8"
            });
            res.end(data)
        })
    } else if (pathName === '/doLogin') {
        let postStr = '';
        req.on('data', (chunk) => {
            postStr += chunk
        })
        req.on('end', () => {
            console.log(postStr);
            res.end(postStr)
        })
    }

封装路由

在/modules/routers.js文件中
使用app对象封装静态方法和路由访问

const fs = require('fs');
const path = require('path');
const url = require('url');
const ejs = require('ejs');

let getFileMime = function (extraname) {
    let data = fs.readFileSync(path.join(__dirname,'../data/mime.json'));
    data = JSON.parse(data.toString())
    return data[extraname]
}

let app = {
    static: function(req,res,staticPath){
        let pathName = req.url; // 获取到请求的url
        pathName = url.parse(pathName).pathname; // 使用url内置模块获取路径名
        pathName = pathName !== '/' ? pathName : '/index.html' // 获取到/就默认为/index.html    
        let extname = path.extname(pathName);  // 使用内容模块path获取文件后缀名        
        if (pathName !== "/favicon.ico") {
            try {
                let data = fs.readFileSync('./' + staticPath + pathName);
                if(data){
                    let mime = getFileMime(extname);  // 使用自定义模块根据后缀名获取Content-Type的值    
                    res.writeHead(200, {
                        "Content-Type": "" + mime + ";charset=UTF-8"
                    });
                    res.end(data);
                }
            } catch (error) {
                
            }            
        }
    },
    // 该部分是路由封装
    // <-----------
    login: (req,res)=>{
        // 处理登录路由的操作
        ejs.renderFile(path.join(__dirname,'../views/form.ejs'),(err,data)=>{
            if(err){
                console.log(err);
                return err;
            }
            res.writeHead(200, {
                "Content-Type": "text/html;charset=UTF-8"
            });
            res.end(data);
        })
    },
    register: (req,res)=>{
        // 处理注册路由的操作
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('访问注册页面');
    },
    admin: (req,res)=>{
        // 处理操作路由的操作
        res.writeHead(200, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('访问操作页面');
    },
    doLogin: (req,res)=>{
        // 处理返回的post请求路由
        let postStr = ''
        req.on('data',(chunk)=>{
            postStr += chunk;
        });
        req.on('end', ()=>{
            console.log(postStr);
            res.end(postStr)
        })
    },
    error: (req,res)=>{
        // 处理不存在的路由
        res.writeHead(404, {
            "Content-Type": "text/html;charset=UTF-8"
        });
        res.end('访问页面不存在');
    },
    // ----------->
}

module.exports = app;

此时的app.js修改为如下内容

const http = require('http');
const url = require('url');
let routers = require('./modules/routers.js');

http.createServer((req, res) => {

    routers.static(req, res, 'static');
    // 获取路由名称
    let pathName = url.parse(req.url).pathname.replace('/','');
    try {
        routers[pathName](req,res);
    } catch (error) {
        routers['error'](req,res);
    }    

}).listen(3000);

console.log("Server runing at http://127.0.0.1:3000");

最后编辑于：2022.01.25 15:48:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,634评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,951评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,427评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,770评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,835评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,799评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,768评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,544评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,979评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,271评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,427评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,121评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,756评论 3赞 324
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,375评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,579评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,410评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,315评论 2赞 352