Node.js學習——利用 HTTP、Url、Path、Fs 模塊創(chuàng)建一個靜態(tài)的web服務(wù)器

實驗操作

新建一個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內(nèi)置模塊獲取路徑名
    pathName = pathName !== '/' ? pathName : '/index.html' // 獲取到/就默認為/index.html

    let extname = path.extname(pathName);  // 使用內(nèi)部模塊path獲取文件后綴名

    if (pathName !== "/favicon.ico") {
        fs.readFile(path.join(__dirname, '../static') + pathName, (err, data) => {
            // 使用path根據(jù)當前路勁獲得讀取文件的相對路徑
            if (err) {
                res.writeHead(404, {
                    "Content-Type": "text/html;charset=UTF-8"
                });
                res.end('404這個網(wǎng)頁不存在');
            }
            let mime = common.getMime(extname);  // 使用自定義模塊根據(jù)后綴名獲取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 函數(shù)所列舉的類并不完整，引入完整的對應(yīng)關(guān)系需要使用一個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內(nèi)置模塊獲取路徑名
    pathName = pathName !== '/' ? pathName : '/index.html' // 獲取到/就默認為/index.html

    let extname = path.extname(pathName);  // 使用內(nèi)容模塊path獲取文件后綴名

    if (pathName !== "/favicon.ico") {
        fs.readFile(path.join(__dirname, './static') + pathName, async (err, data) => {
            // 使用path根據(jù)當前路勁獲得讀取文件的相對路徑
            if (err) {
                res.writeHead(404, {
                    "Content-Type": "text/html;charset=UTF-8"
                });
                res.end('404這個網(wǎng)頁不存在');
            }
            // let mime = common.getMime(extname);  // 使用自定義模塊根據(jù)后綴名獲取Content-Type的值
            let mime = await common.getFileMime(extname);  // 使用自定義模塊根據(jù)后綴名獲取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

封裝靜態(tài)web服務(wù)

新建/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內(nèi)置模塊獲取路徑名
    pathName = pathName !== '/' ? pathName : '/index.html' // 獲取到/就默認為/index.html

    let extname = path.extname(pathName);  // 使用內(nèi)容模塊path獲取文件后綴名
    
    if (pathName !== "/favicon.ico") {

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

            if(data){
                let mime = getFileMime(extname);  // 使用自定義模塊根據(jù)后綴名獲取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 = "這是數(shù)據(jù)庫傳回的數(shù)據(jù)";
        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('處理之后的業(yè)務(wù)邏輯')
    } 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實現(xiàn)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('處理之后的業(yè)務(wù)邏輯')
    } 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 = ''; 
// 數(shù)據(jù)塊接收中 
req.on('data', function (postDataChunk) {
    postData += postDataChunk;
});
 // 數(shù)據(jù)接收完畢，執(zhí)行回調(diào)函數(shù) 
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路由中的內(nèi)容并以及新增一個/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對象封裝靜態(tài)方法和路由訪問

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內(nèi)置模塊獲取路徑名
        pathName = pathName !== '/' ? pathName : '/index.html' // 獲取到/就默認為/index.html    
        let extname = path.extname(pathName);  // 使用內(nèi)容模塊path獲取文件后綴名        
        if (pathName !== "/favicon.ico") {
            try {
                let data = fs.readFileSync('./' + staticPath + pathName);
                if(data){
                    let mime = getFileMime(extname);  // 使用自定義模塊根據(jù)后綴名獲取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修改為如下內(nèi)容

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");
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容