2. 程式人生 > 實用技巧 >Node.js 學習筆記之三：構建 Web 服務

Node.js 學習筆記之三：構建 Web 服務

阿新 • • 發佈：2020-08-28

示例3. 構建 Web 伺服器

這部分示例將致力於用 Node.js 模擬一個類似於 Apache 的 Web 伺服器，處理瀏覽器端的請求，將相關的頁面響應給瀏覽器。首先，我們要在code目錄下執行mkdir 03_webSever命令來建立用於存放這一組示例的目錄。然後執行以下步驟：

  1. 在code/03_webSever目錄下執行mkdir www命令，建立網站目錄，然後在其中建立index.htm和login.htm兩個 HTML 檔案以及一個名為style.css的 CSS 檔案：

    • index.htm:

      <!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>首頁</title>
    </head>
    <body>
        <h1>你好,nodejs！</h1>
        <p> <a href="login.htm">請登入！</a> </p>
    </body>
</html>

    • login.htm:

      <!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>登入頁面</title>
    </head>
    <body>
        <h1>你已經登入。。。</h1>
        <p> <a href="index.htm">回首頁！</a> </p>
    </body>
</html>

    • style.css:

      body {
    background: gray;
}

  2. 在code/03_webSever目錄下執行touch 03-webServer.js命令，建立指令碼檔案，並輸入如下程式碼：

    const http = require('http')
const fs = require('fs')
const server = http.createServer()

server.on('request', function(req, res) {
    const webRoot = './www'
    const url = req.url
    if ( url === '/' ) {
        url = '/index.htm'
    }

    fs.readFile(webRoot+url, function(err, data) {
        if ( err !== null ) {
            console.error('錯誤資訊：' + err.message)
            return res.end('<h1>404 頁面沒找到！</h1>')
        }
        res.end(data)
    })
})

server.listen(8080, function(){
    console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

  3. 儲存所有檔案後，在code/03_webSever目錄下執行node 03-webServer.js命令，然後開啟瀏覽器並訪問http://localhost:8080/，就會看到如下頁面：

示例4. 使用art-template模版引擎生成網頁

這一部分本示例將以生成個人資訊頁面為例，演示在伺服器端基於 Node.js 使用art-template模板引擎來生成網頁。為此，我們需要在code目錄下執行mkdir 04_templatingEngine命令來建立用於存放這一組示例的目錄。

1. 單模版渲染

首先來示範一下如何使用art-template模版引擎的渲染單一模版檔案，請跟著以下步驟來構建示例：

  1. 在code/04_templatingEngine目錄下執行npm install art-template --save命令，安裝將art-template包安裝到當前示例專案中。

  2. 在code/04_templatingEngine目錄下執行touch singleTpl.htm命令，建立一個模版檔案，並在其中輸入以下程式碼：

    <!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>{{ name }}的個人資訊</title>
    </head>
    <body>
        <h1>{{ name }}的個人資訊</h1>
        <table>
            <tr><td>姓名：</td><td>{{ name }}</td></tr>
            <tr><td>年齡：</td><td>{{ age }}</td></tr>
            <tr><td>性別：</td><td>{{ sex }}</td></tr>
            <tr>
                <td>愛好：</td>
                <td>{{ each items }} {{ $value }} {{ /each }}</td>
            </tr>
        </table>
    </body>
</html>

  3. 在code/04_templatingEngine目錄下執行touch 04-useTemplating_engine.js命令，建立一個指令碼檔案，具體如下：

    const http = require('http')
const fs = require('fs')
const template = require('art-template')

class human {
    constructor(name, age, sex, items=[])
    {
        this.name  = name
        this.age   = age
        this.sex   = sex
        this.items = items
    }
}

const server = http.createServer()

server.on('request', function(req, res){
    const url = req.url
    let boy = null
    if ( url === '/' ) {
        boy = new human('凌傑', '37', '男', ['看書', '看電影','旅遊'])
    } else if ( url === '/wang' ) {
        boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
    }

    if ( boy === null ) {
        return res.end('<h1>404 頁面沒找到！</h1>')
    }

    fs.readFile('./singleTpl.htm', function(err, data){
        if ( err !== null ) {
            return res.end('<h1>404 沒找到模版檔案！</h1>')
        }

        const strHtml = template.render(data.toString(), {
            name : boy.name,
            age  : boy.age,
            sex  : boy.sex,
            items: boy.items
        })

        res.end(strHtml)
    })
})

server.listen(8080, function(){
    console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

  4. 儲存所有檔案後，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine.js命令，然後開啟瀏覽器並訪問http://localhost:8080/wang，就會看到如下頁面：

2. 多模版組合渲染

在同一 Web 應用中，所有的頁面通常都由相同的頭部和底部元素，所以為了減少程式碼的冗餘，提高重用率，開發者們通常會考慮將重複的部分獨立成一個單獨的模版檔案，然後用相互包含的方式組合成頁面。下面就繼續以art-template模板引擎為例來演示一下如何將多個模版組合渲染成單一的 HTML 頁面，其具體步驟如下：

  1. 在code/04_templatingEngine目錄下執行touch tpl1.art tpl2.art命令，建立兩個模版檔案，然後在這兩個檔案中分別輸入以下程式碼：

    • tpl1.art :

      <header>
   <h1>檢視個人資訊</h1>
   <br>
</header>

    • tpl2.art ：

      <footer>
   <div>
       <p>&copy; 2016 owlman.org；本站系純HTML5站點。</p>
   </div>
</footer>

  2. 在code/04_templatingEngine目錄下執行touch multiTpl.htm命令建立用於組合的 HTML 頁面檔案，並在其中輸入以下程式碼：

    <!DOCTYPE html>
<html lang="zh-cn">
     <head>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="style.css" />
         <title>檢視個人資訊</title>
     </head>
     <body>
         {{ include './tpl1.art' }}
         <h2>{{ name }}的個人資訊</h2>
         <table>
             <tr><td>姓名：</td><td>{{ name }}</td></tr>
             <tr><td>年齡：</td><td>{{ age }}</td></tr>
             <tr><td>性別：</td><td>{{ sex }}</td></tr>
             <tr>
                 <td>愛好：</td>
                 <td>{{ each items }} {{ $value }} {{ /each }}</td>
             </tr>
         </table>
         {{ include './tpl2.art' }}
     </body>
 </html>

  3. 在code/04_templatingEngine目錄下執行cp 04-useTemplating_engine.js 04-useTemplating_engine2.js命令，將之前的程式碼複製一份，並修改如下：

    const http = require('http')
const fs = require('fs')
const template = require('art-template')

template.defaults.root = __dirname // 配置模版的查詢根目錄

class human {
    constructor(name, age, sex, items=[])
    {
        this.name  = name
        this.age   = age
        this.sex   = sex
        this.items = items
    }
}

const server = http.createServer()

server.on('request', function(req, res){
    const url = req.url
    let boy = null
    if ( url === '/' ) {
        boy = new human('凌傑', '37', '男', ['看書', '看電影','旅遊'])
    } else if ( url === '/wang' ) {
        boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
    }

    if ( boy === null ) {
        return res.end('<h1>404 頁面沒找到！</h1>')
    }

    fs.readFile('./multiTpl.htm', function(err, data){ // 修改了要讀取的模版檔案
        if ( err !== null ) {
            return res.end('<h1>404 沒找到模版檔案！</h1>')
        }

        const strHtml = template.render(data.toString(), {
            name : boy.name,
            age  : boy.age,
            sex  : boy.sex,
            items: boy.items
        })

        res.end(strHtml)
    })
})

server.listen(8080, function(){
    console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

  4. 儲存所有檔案後，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine2.js命令，然後開啟瀏覽器並訪問http://localhost:8080，就會看到如下頁面：

3. 多模版繼承渲染

當然，如果重複的元素只有頭部和尾部的話，有時候使用模版繼承語法來渲染頁面會是一個更好的選擇，下面就來繼續演示一下art-template模板引擎的繼承語法來渲染 HTML 頁面，其具體步驟如下：

  1. 在code/04_templatingEngine目錄下執行touch baseTpl.art命令，建立父模版檔案，然後在該檔案中輸入以下程式碼：

    <!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>{{ name }}的個人資訊</title>
     </head>
     <body>
        <header>
           <h1>檢視個人資訊</h1>
           <br>
        </header>

         {{ block 'message' }}
         {{ /block }}

        <footer>
            <div>
                <p>&copy; 2016 owlman.org；本站系純HTML5站點。</p>
            </div>
        </footer>
     </body>
</html>

  2. 在code/04_templatingEngine目錄下執行touch extendTpl.htm命令，建立子模版檔案，然後在該檔案中輸入以下程式碼：

    {{ extend 'baseTpl.art' }}

{{ block 'message' }}
<h1>{{ name }}的個人資訊</h1>
<table>
    <tr><td>姓名：</td><td>{{ name }}</td></tr>
    <tr><td>年齡：</td><td>{{ age }}</td></tr>
    <tr><td>性別：</td><td>{{ sex }}</td></tr>
    <tr>
        <td>愛好：</td>
        <td>{{ each items }} {{ $value }} {{ /each }}</td>
    </tr>
</table>
{{ /block }}

  3. 在code/04_templatingEngine目錄下執行cp 04-useTemplating_engine.js 04-useTemplating_engine3.js命令，將之前的程式碼複製一份，並修改如下：

    // 用Node.js生成動態頁面
// 作者：owlman
// 時間：2019年07月12日

const http = require('http')
const fs = require('fs')
const template = require('art-template')

template.defaults.root = __dirname

class human {
    constructor(name, age, sex, items=[])
    {
        this.name  = name
        this.age   = age
        this.sex   = sex
        this.items = items
    }
}

const server = http.createServer()

server.on('request', function(req, res) {
    const url = req.url
    let boy = null
    if (url === '/') {
        boy = new human('凌傑', '37', '男', ['看書', '看電影','旅遊'])
    } else if (url === '/wang') {
        boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
    }

    if (boy === null) {
        return res.end('<h1>404 頁面沒找到！</h1>')
    }

    fs.readFile('./extendTpl.htm', function(err, data) {
        if ( err !== null ) {
           return res.end('<h1>404 沒找到模版檔案！</h1>')
        }

        const strHtml = template.render(data.toString(), {
            name : boy.name,
            age  : boy.age,
            sex  : boy.sex,
            items: boy.items
        })

        res.end(strHtml)
    })
})

server.listen(8080, function(){
    console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

  4. 儲存所有檔案後，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine3.js命令，然後開啟瀏覽器並訪問http://localhost:8080，就會看到與之前相同的頁面。

示例5. Web 表單處理

這一部分示例將致力於演示用 Node.js 處理 Web 表單，我們將會分別示範如何用get和post兩種方法來處理表單的請求。首先，我們要在code目錄下執行mkdir 05_webForm命令來建立用於存放這一組示例的目錄。

1. get 方法

先用一個資訊查詢程式來演示一下如何處理使用get方法來發送請求的表單。首先，在code/05_webForm目錄下執行mkdir get_form命令，並執行以下步驟：

  1. 在code/05_webForm/get_form目錄下執行npm install art-template命令，將art-template安裝到當前示例專案中。

  2. 在code/05_webForm/get_form目錄下執行touch index.htm，建立一個模版檔案，具體如下：

    <!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>個人資訊查詢</title>
</head>
<body>
    <h1>個人資訊查詢</h1>
    <form action="/query" method="GET">
        <label for="message">請輸入要查詢的姓名：</label>
        <input type="text" name="qname" />
        <input type="submit" value="查詢" />
    </form>
    <br />
    {{ if name }}
        <table>
            <caption>{{ name }}的個人資訊</caption>
            <tr><td>姓名：</td><td>{{ name }}</td></tr>
            <tr><td>年齡：</td><td>{{ age }}</td></tr>
            <tr><td>性別：</td><td>{{ sex }}</td></tr>
            <tr>
                <td>愛好：</td>
                <td>{{ each items }} {{ $value }} {{ /each }}</td>
            </tr>
        </table>
    {{ else if query_error }}
        <h2>沒有找到相關資訊！</h2>
    {{ /if }}
</body>
</html>

  3. 在code/05_webForm/get_form目錄下執行touch app.js，建立一個指令碼檔案，具體如下：

    const http = require('http')
const fs = require('fs')
const url = require('url')
const template = require('art-template')

class human {
    constructor(name, age, sex, items=[])
    {
        this.name  = name
        this.age   = age
        this.sex   = sex
        this.items = items
    }
}

const db = [
    new human('凌傑', '37', '男', ['看書', '看電影','旅遊']),
    new human('蔓兒', '25', '女', ['看書', '看電影','寫作']),
    new human('張語', '32', '女', ['看書', '旅遊','繪畫'])
]

const server = http.createServer(function(req, res){
    const query = url.parse(req.url, true)
    let obj = null
    let query_error = false
    if ( query.pathname === '/' ) {
        query_error = false
    }
    else if (query.pathname === '/query') {
        for(let i = 0; i < db.length; ++i) {
            if (db[i].name == query.query["qname"]) {
                obj = db[i]
            }
        }
        if ( obj === null ) {
            query_error = true
        }
    } else  {
        return res.end('<h1>404 頁面沒找到！</h1>')
    }

    fs.readFile('./index.htm', function(err, data){
        if ( err !== null ) {
            return res.end('<h1>404 沒找到模版檔案！</h1>')
        }

        let strHtml = null
        if ( obj !== null ) {
            strHtml = template.render(data.toString(), {
                name : obj.name,
                age  : obj.age,
                sex  : obj.sex,
                items: obj.items,
                query_error: query_error
            })
        } else {
            strHtml = template.render(data.toString(), {
                name : false,
                query_error: query_error
            })
        }
        res.end(strHtml)
    })
})

server.listen(8080, function() {
    console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

  4. 儲存所有檔案後，在code/05_webForm/get_form目錄下執行node app.js命令，結果如下：

2. post 方法

先來演示如何處理使用post方法來發送請求的表單。首先，在code/05_webForm目錄下執行mkdir post_form命令，並執行以下步驟：

  1. 在code/05_webForm/get_form目錄下執行npm install art-template命令，將art-template安裝到當前示例專案中。

  2. 在code/05_webForm/post_form目錄下執行touch index.htm，建立一個模版檔案，具體如下：

    <!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>個人資訊管理</title>
</head>
<body>
    <h1>個人資訊管理</h1>
    <table>
        <caption>個人資料表</caption>
        <tr><th>姓名</th><th>年齡</th><th>性別</th><th>愛好</th></tr>
        {{ each db }}
        <tr>
            <td>{{ $value.name }} </td>
            <td>{{ $value.age }} </td>
            <td>{{ $value.sex }} </td>
            <td>{{ each $value.items }} {{ $value }} {{ /each }}</td>
        </tr>
        {{ /each }}
    </table>

    <form action="/add" method="POST">
    <table>
        <caption>錄入新人員</caption>
        <tr><td>姓名：</td><td><input type="text" name="uname" /></td></tr>
        <tr><td>年齡：</td><td><input type="text" name="age"></td></tr>
        <tr><td>性別：</td><td><input type="text" name="sex"></td></tr>
        <tr><td>愛好：</td><td><input type="text" name="items"></td></tr>
    </table>
    <input type="submit" value="新增" />
    </form>
</body>
</html>

  3. 在code/05_webForm/post_form目錄下執行touch app.js，建立一個指令碼檔案，具體如下：

    const http = require('http')
const fs = require('fs')
const url = require('url')
const querystring = require('querystring')
const template = require('art-template')

class human {
    constructor(name, age, sex, items=[])
    {
        this.name  = name
        this.age   = age
        this.sex   = sex
        this.items = items
    }
}

const db = [
    new human('凌傑', '37', '男', ['看書', '看電影','旅遊']),
    new human('蔓兒', '25', '女', ['看書', '看電影','寫作']),
    new human('張語', '32', '女', ['看書', '旅遊','繪畫'])
]

const server = http.createServer(function(req, res){
    const query = url.parse(req.url, true)
    if ( query.pathname === '/' ) {
        fs.readFile('./index.htm', function(err, data) {
            if ( err !== null ) {
                return res.end('<h1>404 沒找到模版檔案！</h1>')
            }

            const strHtml = template.render(data.toString(), {
                "db": db
            })

            res.end(strHtml)
        })
    }
    else if ( query.pathname === '/add' ) {
        req.on('data', function(chunk) {
            const obj = querystring.parse(chunk.toString())
            db.push(new human(
                obj['uname'],
                obj['age'],
                obj['sex'],
                obj['items'].split('，'),
            ))
        })

        res.writeHead(302, {
            'location': `/`
        })

        res.end()
    } else  {
        return res.end('<h1>404 頁面沒找到！</h1>')
    }
})

server.listen(8080, function(){
    console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

  4. 儲存所有檔案後，在code/05_webForm/post_form目錄下執行node app.js命令，結果如下：

相關推薦

Node.js 學習筆記之三：構建 Web 服務

示例3. 構建 Web 伺服器 這部分示例將致力於用 Node.js 模擬一個類似於 Apache 的 Web 伺服器，處理瀏覽器端的請求，將相關的頁面響應給瀏覽器。首先，我們要在code目錄下執行mkdir 03_webSever命令來建立用於存放這

Node.js 學習筆記之二：基本使用

示例1. 跟大家說 Hello 由於 Node.js 只是 JavaScript 程式的執行時環境，所以它並不會限制 JavaScript 程式碼的具體執行形式。為了說明這一點，本示例將使用四種形式來跟大家說"Hello"。首先，我們要在co

Node.js 學習筆記之五：使用 Express 框架

這部分示例將通過你好，Express、留言板和學生管理三個應用的實現來演示Express框架的基本使用。首先來搭建該示例專案的基本腳手架，為此我們需要在code目錄下執行mkdir 07_Expressjs命令來建立用於存放這一組示例的

Vue.js 學習筆記之六：構建更復雜的元件

在掌握瞭如何構建與編譯 Vue 元件的基礎知識之後，接下來就可以試著來構建一些更具有實際用處的複雜元件了。為了賦予元件更具實用性的後面，首先要做的就是讓這些元件具備監聽使用者自定義事件的能力，並且允許使用者

Vue.js 學習筆記之五：編譯 vue 元件

正如上一篇筆記中所說，直接使用 ES6 標準提供的模組規範來編寫 Vue 元件在很多情況下可能並不是最佳實踐。主要原因有兩個，首先是市面上還有許多並沒有對 ES6 標準提供完全支援的 Web 瀏覽器，這樣做可能會導致某些

LDAP學習筆記之三：389-DS(RHDS) 之TLS配置

一、生成CA證書 這裡CA伺服器和server是同一臺機器，如果不是同一臺機器注意兩臺機器的時區及時間是否一致

k8s學習筆記之二：使用kubeadm配置Ingress

Ingress 1、在master上執行 wget https://raw.githubusercontent.com/kubernetes/ingress-nginx/nginx-0.20.0/deploy/mandatory.yaml

k8s學習筆記之二：Pod

一、deployment部署pod 備註：// 部署pod到指定節點 在啟動Pod的yaml檔案中與containers同級別的位置新增如下兩行即可

k8s學習筆記之五：volume，PV ,PVC

預設情況下容器的資料都是非持久化的， 在容器消亡以後資料也跟著丟失， 所以 Docker 提供了 Volume 機制以便將資料持久化儲存。 類似的， Kubernetes 提供了更強大的 Volume 機制和豐富的外掛， 解決了容器資料持久

《轉》VMware vSphere 5.1 學習系列之三：安裝 ESXi

>>> 目 錄 一、 ESXi系統要求 1 ESXi硬體要求 1 二、 以互動方式安裝ESXi 4 安裝ESXi系統 4 啟動ESXi系統 15 三、 配置ESXi 19 進入ESXi系統配置介面 19 修改ESXi密碼 21 配置Management Ne

全棧微信小程式商城 學習筆記之三 路由

一、編寫簡單模組 一個應用多個模組，tp裡預設只有一個index模組 現在來新建一個模組，

JS學習筆記之JS預解析

技術標籤：JS學習筆記javascript JS預解析學習筆記 最近在學習JavaScript的預解析內容將筆記分享給大家

d3.js學習筆記（三）------散點圖（添加了數軸）

技術標籤：D3.js資料視覺化d3.js 添加了數軸的散點圖 要點： 1、定義數軸時是用 d3.axisBottom()、 d3.axisLeft() 2、數軸是要基於比例尺工作，所以必須呼叫 .scale(比例尺) 3、ticks() 是用來定義刻度線的數量，

hive學習筆記之八：Sqoop

歡迎訪問我的GitHub https://github.com/zq2599/blog_demos 內容：所有原創文章分類彙總及配套原始碼，涉及Java、Docker、Kubernetes、DevOPS等；

yii圖書商城 學習筆記之三 後臺介面

後臺管理員賬戶相關頁面 賬戶登入相關介面 新建UserController 新建Login, Edit, ResetPwd方法

hive學習筆記之十：使用者自定義聚合函式(UDAF)

歡迎訪問我的GitHub 這裡分類和彙總了欣宸的全部原創(含配套原始碼)：https://github.com/zq2599/blog_demos

萬字Node.js學習筆記

Node.js學習筆記 Node.js 可以解析JS程式碼（沒有瀏覽器安全級別的限制）提供很多系統級別的API，如：

LDAP學習筆記之四：NIS簡解

一、簡介 1NIS的產生 正所謂有需求才會有產品，有問題才會有方法去解決，那麼NIS是怎麼產生的呢？

LDAP學習筆記之六：LDAP主從複製

一、前置操作 1.新增一臺ldap伺服器，除主機名稱外其他相同，也可以用之前生產的安裝檔案安裝，修改檔案中 FullMachineName 及ServerIdentifier欄位為本機主機名稱，通過 setup-ds-admin.pl -s -f setupxxx.inf，命令

node-js 學習筆記

node-js 學習筆記 day01 一 1安裝完之後node--js之後檢查 2五大瀏覽器：ie 谷歌 火狐 safri opera 核心：渲染引擎（css+html）+js引擎