手摸手帶你肝 nodejs (二)

這是我參與8月更文挑戰的第7天，活動詳情查看:8月更文挑戰

Node建立Web服務器

服務器與瀏覽器之間的請求響應處理

• 請求：瀏覽器向服務器發送請求，請求服務器的某個文件。
• 處理：服務器接收到瀏覽器請求以後，找到對應的文件。
• 響應：服務器讀讀取出文件內容，再將文件內容返回給瀏覽器。

使用http模塊搭建Web服務器

• http是一個系統模塊，讓咱們可以經過簡單的流程建立一個Web服務器

建立Web服務器4步驟：

1. 加載/導入/引入 http 模塊
2. 建立服務器對象
3. 開啓服務器
4. 監聽服務器請求並進行處理

//1. 加載/導入 http 模塊
const http = require('http');

//2. 建立服務器對象
const server = http.createServer();

//3. 開啓服務器
server.listen(3000, () => {
    console.log('Server is running...');
});

//4. 監聽瀏覽器請求並進行處理
//on：該方法用來監聽事件
//參數1: 事件類型， request表明瀏覽器請求事件
//參數2: 當監聽到瀏覽器請求後觸發的回調函數，該函數中有兩個參數 req和res
// req（request）: 請求對象
// res（response）: 響應對象
server.on('request', (req, res) => {
    // end方法可以將數據返回給瀏覽器，瀏覽器會顯示該字符串
    res.end('Hello Nodejs');
});
複製代碼

不一樣URL顯示不一樣內容

核心：req（請求對象）中有url屬性，該屬性中保存了當前請求的url地址

注意： url屬性中保存的地址是沒有 協議、IP、端口號，而且以 / 開頭的地址 示例：

// 目標: 不一樣的url地址顯示不一樣的內容

//1. 加載 http 模塊
const http = require('http');

//2. 建立服務器
const server = http.createServer();

//3. 開啓服務器
server.listen(3000, () => {
    console.log('server is running...');
});

//4. 監聽瀏覽器請求
server.on('request', (req, res) => {
    //req對象的url屬性中保存了當前請求的url地址
    //console.log(req.url);
    
    const url = req.url;

    if (url === '/') {
        res.end('index-page');

    } else if (url === '/admin/login') {
        res.end('login-page');

    } else if (url === '/goods/list') {
        res.end('list-page');

    } else {
        res.end('not found');
    }
})
複製代碼

不一樣url顯示不一樣html頁面

核心： fs.readFile 讀取html頁面內容，再將文件內容經過res.end方法返回給瀏覽器

//4. 監聽瀏覽器請求
server.on('request', (req, res) => {
    //req對象的url屬性中保存了當前請求的url地址
    //console.log(req.url);
    
    const url = req.url;
    
    if (url === '/') {
        //調用fs.readFile讀取 index.html 頁面
        //再將頁面內容用res.end方法返回給瀏覽器
        fs.readFile('./view/index.html', (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })

    } else if (url === '/login') {
        fs.readFile('./view/login.html', (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })
    }
})
複製代碼

如何解決瀏覽器顯示中文亂碼問題

核心：使用 res（響應對象）中的 setHeader方法

// res.setHeader('content-type', 'text/html;charset=utf-8');
//4. 監聽瀏覽器請求
server.on('request', (req, res) => {
    //req對象的url屬性中保存了當前請求的url地址
    //console.log(req.url);
    
    const url = req.url;
    res.setHeader('content-type', 'text/html;charset=utf-8');
    if (url === '/') {
        res.end('首頁');

    } else if (url === '/admin/login') {
        res.end('登陸頁');

    } else if (url === '/goods/list') {
        res.end('列表頁');

    } else {
        res.end('not found');
    }
})
複製代碼

靜態資源加載

1. 瀏覽器中輸入地址,按下回車鍵發送請求.
2. 服務器找到對應的文件, 並將內容返回給瀏覽器.
3. 瀏覽器接收到服務器返回內容開始進行解析.
   • 當解析到 link 標籤時,再次請求服務器,獲取a.css 文件內容.
   • 當解析到 script 標籤時, 再次請求服務器,獲取b.js 文件內容.
   • 當解析到 img 標籤,再次請求服務器,獲取圖片文件.

//4. 監聽瀏覽器請求
server.on('request', (req, res) => {
    //req對象的url屬性中保存了當前請求的url地址
    //console.log(req.url)
    const url = req.url;
    if (url === '/') {
        //調用fs.readFile讀取 index.html 頁面
        //再將頁面內容用res.end方法返回給瀏覽器
        fs.readFile('./view/index.html', (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })
    } else if (url === '/login') {
        fs.readFile('./view/login.html', (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })

    /** *核心思路: 以public開頭的url地址全均可以使用一個else分支來處理 */
    } else if (url.startsWith('/public')) {
        // url = '/public/css/a.css';
        // url = '/public/css/aa.css';
        // url = '/public/js/b.js';
        // url = '/public/img/c.jpg'
        fs.readFile('.' + url, (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })
    } 
})
複製代碼

點贊支持、手留餘香、與有榮焉，動動你發財的小手喲，感謝各位大佬能留下您的足跡。

往期精彩推薦

前端萬字面經——基礎篇

前端萬字面積——進階篇

聊一聊前端開發中最經常使用的兩種管理工具

聊聊讓人頭疼的正則表達式

手摸手帶你肝nodejs(一)

獲取文件blob流地址實現下載功能