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

例3. 構建 Web 服務器

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

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

1、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>

2、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>

3、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模版引擎的渲染單一模版文件，請跟著以下步驟來構建示例：

在code/04_templatingEngine目錄下執行npm install art-template --save命令，安裝將art-template包安裝到當前示例項目中。
在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 頁面，其具體步驟如下：

在code/04_templatingEngine目錄下執行touch tpl1.art tpl2.art命令，創建兩個模版文件，然后在這兩個文件中分別輸入以下代碼：

1、tpl1.art :

<header>
<h1>查看個人信息</h1>
<br>
</header>

2、tpl2.art ：

<footer>
<div>
<p>? 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 頁面，其具體步驟如下：

在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>? 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命令，并執行以下步驟：

在code/05_webForm/get_form目錄下執行npm install art-template命令，將art-template安裝到當前示例項目中。
在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命令，并執行以下步驟：

在code/05_webForm/get_form目錄下執行npm install art-template命令，將art-template安裝到當前示例項目中。
在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命令，結果如下：

取更多資源加微信公眾號【Java幫幫】 (是公眾號，不是微信好友哦)

學習交流請加【Java幫幫】自學交流QQ群553841695

為前端開發，你的一天是不是這樣度過的？

8:00--9:30 鬧鈴響了N遍之后，匆忙起床洗漱，在擁擠的地鐵上刷朋友圈、公眾號和技術論壇9:30--10:00 到公司，吃早點，打開電腦收郵件，終終終于準備好狀態開始寫代碼啦！12:00--13:30 午飯時間，邊吃邊上網閑逛，看看技術文檔，打兩局王者榮耀或者睡午覺13:30--15:30奮斗的下午開始了，處理雜務然后寫代碼15:30--16:30被產品部叫去討論產品變動的可能性（圍觀不同技術組之間扯皮）問題終于解決！16:30--18:30 coding，項目leader詢問了進度18:30--19:00 肚子餓了和同事一起訂餐吃飯19:10-- 21:00加班接著擼代碼，測試來找，前天提交的代碼有問題，開始吭哧吭哧改bug21:00 幾個bug終于改完了，收拾東西坐地鐵回家22:30 到家繼續寫今天的任務，奮斗一個多小時終于完成了（還是晚上干活效率高呀）24:00 洗漱，刷會手機再睡覺，一天過去了

對比一下，大家度過的每一天是不是和這很相似？每天忙成狗，但是心里又空落落的，感覺一無所獲？

想一想，在2019年已經過半了：

年初制定的學習計劃完成了多少？

node.js和Vue框架掌握了嗎？

買的《Javascript語言精粹》翻過嗎？

收藏的視頻都看了嗎？

其實，近兩年前端圈內的競爭越來越激烈，企業對前端崗位的要求更為嚴格（現在找工作你會發現，企業不僅僅是需要應聘者基礎扎實，而且對主流技術棧和技術廣度都有要求），對前端從業者來說，不進則退的危機感和焦慮感更重了。

那么，克服焦慮最好的方法是什么？

不斷學習，充實自己

小編整理了一套web學習視頻資料和電子書，幫大家輕松學習進步web前端

獲取方式：轉發+關注私信小編“學習”即可免費獲取

下面是部分大綱

第1部分　起步

第1章　何為Web發布

第2章　準備好工具

第3章　HTML和CSS簡介

第2部分　創建網頁

第4章　HTML基礎知識

第5章　使用列表組織信息

第6章　使用鏈接

第3部分　HTML和CSS的高級用法

第7章　使用HTML和CSS設置文本的格式

第8章　使用CSS設置網站的樣式

第9章　在網頁中使用圖像

第10章　創建表格

第11章　使用CSS定位元素

第12章　設計表單

第13章　使用HTML5定義頁面的結構

第14章　集成多媒體：視頻和聲音

第15章　高級CSS：使用CSS設置頁面布局

第16章　響應式Web設計

第4部分　使用JavaScript和jQuery

第17章　JavaScript簡介

第18章　使用jQuery

第19章　在頁面中使用JavaScript

第20章　使用框架和鏈接窗口

第5部分　一個都不能少

第21章　移動Web設計

第22章　用戶體驗設計

第6部分　發布到Web

第23章　如何發布網站

第24章　使用服務器

第25章　搜索引擎和SEO

在線咨詢

上一篇：基于Java的旅游網站的設計與實現-計算機畢業設計源碼+LW文檔
下一篇：HTML5干貨分享，入門者值得一看

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商