nodejs 開發，手把手開始第一個服務器程序（原生）

時間 2020-06-15

標籤 nodejs 開發手把手開始第一個服務器程序原生简体版

原文原文鏈接

此文章爲原生 nodejs ，僅作學習使用javascript

想學習 express 和 koa2 的小夥伴請繞路css

此文章適合有HTML 和css 、js 基礎的小夥伴看哦html

若是能幫到你，榮幸之至java

文章純手打，若有紕漏歡迎下方留言node

寫在前面：web

　　127.0.0.1 : 迴環地址，每一臺電腦都有該ip，指向當前使用的電腦express

　　nodejs 中的 js 與瀏覽器中 js 的區別：瀏覽器

　　　　瀏覽器中 js ：ECMAScript 核心 + DOM + BOM服務器

　　　　Node 中的 js ：ECMAScript 核心 + 全局成員 + 模塊系統（系統模塊、第三方模塊、自定義模塊）koa

　　　　全局成員： setTimeout、setInterval、console.log() 等。

　　　　注意：這幾個名稱和功能雖然和瀏覽器中的同樣，可是是 Nodejs 本身實現的，與瀏覽器無關

安裝nodejs

　　官網： https://Nodejs.org/en/

　　中文網：http://Nodejs.cn/

　　Nodejs 系統模塊是什麼：隨着 Nodejs 一塊兒安裝，並由官方進行維護的模塊。

　　　　經常使用的系統模塊： fs、http、url、path 等一個模塊中包含了不少方法和屬性，能夠幫助咱們實現不一樣的功能

Node 建立 web 服務器

使用 HTTP 模塊搭建 web 服務器：

　　一、引入 http 模塊

　　建立一個 js 文件，例如此處取名爲 kiss.js 。

const http = require('http');

　　二、建立服務器對象

const server = http.createServer();

　　三、開啓服務器

　　此處監聽了 3000 端口

server.listen(3000, () => {
    console.log('Server is running...');
});

　　四、監聽瀏覽器請求並進行處理

server.on('request', (req, res) => {
    // end方法可以將數據返回給瀏覽器，瀏覽器會顯示該字符串
    res.end('Hello Nodejs');
});

　　on ：該方法用來監聽事件

　　參數1（此處的request）：事件類型，request 表明瀏覽器請求事件

　　參數2 ：回調函數。當監聽到瀏覽器請求後出發的回調函數，該函數中有兩個參數

　　　　　　第一個參數（此處的 req ）：請求對象

　　　　　　第二個參數（此處的 res ）：相應對象

　　end 方法可以將數據返回給瀏覽器，瀏覽器會顯示該字符串

　　遂，在 kiss.js 文件中，內容以下：

//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) => {
    // end方法可以將數據返回給瀏覽器，瀏覽器會顯示該字符串
    res.end('Hello Nodejs');
});

　　在文件目錄中打開 cmd ，運行命令 node .\kiss.js ，便可開啓服務器：

　　打開瀏覽器，在地址欄輸入 http://127.0.0.1:3000/ ，會看到 res.end() 所返回的字符串

　　如圖

顯示頁面

　　服務器已經搭建起來了，那麼下一步就是如何在瀏覽器端展現頁面了

　　首先準備一個 HTML 文件，在 kiss.js 文件同級目錄下建立一個 index.html 文件，準備內容以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kisskiss</title>
    <style>
        h2 {
            width: 800px;
            height: 60px;
            margin: 100px auto;
            line-height: 60px;
            text-align: center;
            color: white;
            background-image: linear-gradient(to right,
                      rgb(255, 211, 218) 0%,
                      rgb(132, 223, 132) 100%)
        }
    </style>
</head>
<body>
   <h2>我是 kiss 首頁</h2> 
</body>
</html>

　　此時服務器文件 kiss.js 須要另外一個模塊：文件讀取模塊 ——> readFile

　　一、引入 fs 模塊

const fs = require('fs');

　　二、調用 readFile 方法讀取文件內容

fs.readFile('./index.html', 'utf-8', (err, data) => {
    if (err) {
        return console.log(err);
    }
    
    console.log(data);
})

　　參數1 : 要讀取的文件路徑，相對路徑和絕對路徑都可（推薦使用絕對路徑）

　　參數2 : 設置字符集, 經常使用的中文字符集有三種 : utf-八、 gb23十二、 gbk 該參數是可選參數，若是不設置該參數，讀取內容默認是二進制數據

　　參數3 : 讀取完成後觸發的回調函數，該函數中有兩個參數 err 和 data

　　　　err : 錯誤對象 - 若是讀取正確 : err 爲 null ; 若是讀取失敗 : err 爲錯誤對象 ;

　　　　data : 文件中的數據

　　在 congsole.log(data) 處，即可進行對文件內容的操做，data 整個是以字符串類型被取出

　　調整後 kiss.js 文件內容以下：

const http = require('http'); //1. 導入 http 模塊
const fs = require('fs'); //5. 導入/加載/引入 文件模塊

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

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

//4. 監聽瀏覽器請求並進行處理
server.on('request', (req, res) => {

    //6. 讀取文件
    fs.readFile('./index.html', 'utf-8', (err, data) => {
        if (err) {
            return console.log(err);
        }
        //7. end方法返回讀取的文件字符串，瀏覽器會顯示該文件內容
        res.end(data);
    })
    
});

　　在 cmd 中 Ctrl + C 退出以前啓動的服務器，從新啓動服務器 node kiss.js

　　在瀏覽器中刷新頁面 http://127.0.0.1:3000/ ，能夠看到準備的 HTML 頁面已經成功展現在瀏覽器中

　　如圖

　　Tips : 中文亂碼問題

　　fs 的 readFile 函數中第二個參數可不寫，可是會形成頁面中文亂碼，另外一個解決辦法是，使用 res（響應對象）中的 setHeader 方法：

res.setHeader('content-type', 'text/html;charset=utf-8');

多個頁面時

　　再新建一個HTML頁面，index_2.html 內容以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第二個頁面</title>
    <style>
        i {
            display: block;
            background-color: pink;
            width: 300px;
            height: 50px;
            border-radius: 15px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <i>這是第二個頁面</i>
</body>
</html>

　　此時問題是，如何才能在輸入不一樣的網址的時候，顯示不一樣的兩個頁面？

　　解決辦法，修改 kiss.js 代碼以下：

const http = require('http'); //1. 導入 http 模塊
const fs = require('fs'); //5. 導入/加載/引入 文件模塊

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

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

//4. 監聽瀏覽器請求並進行處理
server.on('request', (req, res) => {
    //6. req對象的url屬性中保存了當前請求的url地址
    const url = req.url
    //7.判斷不一樣url，返回不一樣頁面到瀏覽器端進行展現
    if (url === '/') {
        //8. 讀取文件index.html
        fs.readFile('./index.html', 'utf-8', (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回讀取的文件字符串，瀏覽器會顯示該文件內容
            res.end(data);
        })
    } else if (url === '/index_2') {
        //8. 讀取文件index_2.html
        fs.readFile('./index_2.html', 'utf-8', (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回讀取的文件字符串，瀏覽器會顯示該文件內容
            res.end(data);
        })
    }
});

　　重啓服務器，在瀏覽器地址欄輸入 http://127.0.0.1:3000 ，依舊顯示原來 index.html 頁面的內容

　　在地址欄輸入 http://127.0.0.1:3000/index_2 ，顯示新的 index_2.html 頁面的內容，以下：

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

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

　　示例：

　　http://127.0.0.1:3000 ===> /

　　http://127.0.0.1:3000/index_2 ===> /index_2

靜態資源加載

　　上面已經初步體驗了一個服務器是怎樣跑起來的，可是！上面只有一個 html 文件，而且它的樣式是直接包含在 html 文件中的，若是一個 HTML 文件內引入了它的資源文件呢？好比 css 和 js 文件。

　　修改文件結構目錄以下：

　　index.html 頁面內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kisskiss</title>
    <link rel="stylesheet" type="text/css" href="../public/css/index.css">
    <script type="text/javascript" src="../public/js/index.js"></script>
</head>
<body>
   <h2>我是 kiss 首頁</h2> 
</body>
</html>

　　將原來 HTML 文件中的 css 資源單獨抽取出來寫入 index.css 文件中，index.css 文件內容：

h2 {
    width: 800px;
    height: 60px;
    margin: 100px auto;
    line-height: 60px;
    text-align: center;
    color: white;
    background-image: linear-gradient(to right,
              rgb(255, 211, 218) 0%,
              rgb(132, 223, 132) 100%)
}

　　index.js 文件內容：

alert('this is kiss.js');

　　kiss.js 文件內容：

const http = require('http'); //1. 導入 http 模塊
const fs = require('fs'); //5. 導入/加載/引入 文件模塊

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

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

//4. 監聽瀏覽器請求並進行處理
server.on('request', (req, res) => {
    //6. req對象的url屬性中保存了當前請求的url地址
    const url = req.url
    //7.判斷不一樣url，返回不一樣頁面到瀏覽器端進行展現
    if (url === '/') {
        //8. 讀取文件index.html
        fs.readFile('./view/index.html', 'utf-8', (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回讀取的文件字符串，瀏覽器會顯示該文件內容
            res.end(data);
        })
    }
});

　　啓動服務器，主頁一直處於加載狀態

　　按下鍵盤 f12 ，或者單擊鼠標右鍵 → 檢查 → 選擇 network ：

　　能夠看到 index.css 和 index.js 文件的狀態（status）顯示爲 pending

　　服務器發起了對 index.css 和 index.js 文件的請求，可是卻一直未獲得服務器的響應

　　來分析一下此處的原理：

　　一、瀏覽器中輸入請求地址 http:127.0.0.1:3000，按下回車發送請求

　　二、服務器根據請求信息的 url （此時爲 "/"）找到 index.html ，並將內容返回給瀏覽器

　　三、瀏覽器接收到服務器返回的內容，開始對 index.html 進行解析，當解析到 link 標籤和 script 標籤時，再次請求服務器，想要獲取 index.css 和 index.js 文件，但是咱們的服務器代碼中，並無寫針對這兩個文件的內容，因此也就不會返回這兩個文件的內容，服務器就會一直處於等待狀態，直到超時報錯。

　　接下來咱們修改一下 kiss.js 文件，內容以下：

const http = require('http'); //1. 導入 http 模塊
const fs = require('fs'); //5. 導入/加載/引入 文件模塊

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

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

//4. 監聽瀏覽器請求並進行處理
server.on('request', (req, res) => {
    //6. req對象的url屬性中保存了當前請求的url地址
    const url = req.url
    //7.判斷不一樣url，返回不一樣頁面到瀏覽器端進行展現
    if (url === '/') {
        //8. 讀取文件index.html
        fs.readFile('./view/index.html', 'utf-8', (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回讀取的文件字符串，瀏覽器會顯示該文件內容
            res.end(data);
        })
    } else if (url === '/index_2') {
        //8. 讀取文件index_2.html
        fs.readFile('./view/index_2.html', 'utf-8', (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回讀取的文件字符串，瀏覽器會顯示該文件內容
            res.end(data);
        })
    } else if(url.startsWith('/public')) {
        //8. 讀取index.html文件的靜態資源文件
        fs.readFile('.'+url, 'utf-8', (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回讀取的文件字符串，瀏覽器會顯示該文件內容
            res.end(data);
        })
    }
});