148.Node.js學習筆記（二）2018.11.27
阿新 • • 發佈：2018-12-13
目錄
1. 程式碼規範
1.1程式碼規範問題
為了約定大家的程式碼風格，所以在社群中誕生了一些比較規範的程式碼風格規範：
- JavaScript Standard Style
- Airbnb JavaScript Style
1.2 程式碼分號問題
- 當採用不同的程式碼風格的時候，只需要注意以下情況就可以避免相應的錯誤：
- 當一行程式碼是以：( 、 [ 、 ` 開頭的時候，則前面補上一個分號;用來避免一些語法解析錯誤。
- 在一些第三方的程式碼中能看到一上來就以一個;或者!、&、~ 開頭的程式碼，其實與分號的效果一樣的。
- 結論：
- 無論程式碼是否有分號，都建議如果一行程式碼是以(、[、`開頭的，最好在其前面補上;分號
1.3 模板字串
- 模板字串以反引號``為標誌
- 支援換行和拼接變數
例如：var foo = `
hello nodejs
hello
world`
console.log(foo); //會輸出
//hello nodejs
//hello
//world2. http-Apache
2.1 http-Apache功能
var http = require('http'); var fs = require('fs'); // 1. 建立server var server = http.createServer(); // 2. 監聽server的request請求事件，設定請求處理函式 var wwwDir = './www'; server.on('request',function(req,res){ var url = req.url; var filePath = '/index.html'; if(url !== '/'){ filePath = url; } fs.readFile(wwwDir+filePath,function(err,data){ if(err){ return res.end('404 Not Found.'); } res.end(data); }); }); // 3. 繫結埠號，啟動服務 server.listen(3000,function(){ console.log('伺服器已經啟動'); });
2.2 fs 讀取目錄
var fs = require('fs');
fs.readdir('E:/node/02/www',function(err,file){
if(err){
return console.log('目錄不存在');
}
console.log(file);
});
2.3 http-Apache目錄列表
var http = require('http');
var fs = require('fs');
// 1. 建立server
var server = http.createServer();
// 2. 監聽server的request請求事件，設定請求處理函式
var wwwDir = './www';
server.on('request',function(req,res){
var url = req.url
fs.readFile('./template.html',function(err,data){
if(err){
return res.end('not fund 404');
}
// 1. 如何得到 wwwDir 目錄列表中的檔名和目錄名
// fs.readdir
// 2. 如何將得到的檔名和目錄名替換到template.html中
// 2.1 在template.html中需要替換的位置預留一個特殊的標記
// 2.2 根據files生成需要的html內容
// 模板引擎
// 只要做了這兩件事，問題就解決了
fs.readdir(wwwDir,function(err,files){
if(err){
return res.end('Can not find www dir.');
}
var content = ''
files.forEach( function(item) {
content += `<tr>
<td data-value="image/"><a class="icon dir" href="/E:/node/02/www/image/">${item}/</a></td>
<td class="detailsColumn" data-value="0"></td>
<td class="detailsColumn" data-value="1533979817">2018/8/11 下午5:30:17</td>
</tr>`
});
data = data.toString();
// 普通的字串解析替換，瀏覽器看到的結果就不一樣了
data = data.replace('^_^',content);
res.end(data);
});
});
});
// 3. 繫結埠號，啟動服務
server.listen(3000,function(){
console.log('伺服器已經啟動');
});
3. 在node中使用模板引擎
- art-template 不僅可以在瀏覽器中使用，也可以在node中使用
- 網址：https://aui.github.io/art-template/zh-cn/index.html
3.1 安裝
npm install art-template --save
# 該命令在哪執行就會把包下載到哪裡，預設會下載到 node_modules 目錄中3.2 在瀏覽器中使用art-template
強調：模板引擎不關心你的字串內容，只關心自己能認識的模板標記語法，例如{{ }}，語法被稱之為mustache語法，八字鬍。
<script src="node_modules/art-template/lib/template-web.js"></script>
<script type="text/template" id="tpl">
hello {{name}}
</script>
<script>
var ret = template('tpl',{
name: 'JACK'
});
console.log(ret);
</script>
3.3 在node中使用模板引擎
- 模板引擎最早就是誕生於伺服器領域，後來才發展到了前端
- 安裝 npm install art-template –save
- 在需要適應的檔案中模組中載入 art-template
- 只需要使用 require 方法載入就可以了： require(‘art-template’)
- 引數中的 art-template 就是你下載的包的名字
- 查文件，使用模板引擎的API
var template = require(‘art-template’) // 將模板原始碼編譯成函式並立刻執行 //template.render(source, data, options); var tplStr = <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <h2>name: {{name}}</h2> <h3>age: {{age}}</h3> </body> </html> var ret = template.render(tplStr, { name: ‘Jack’, age: 18 })讀取檔案中的html進行渲染
var template = require('art-template')
var fs = require('fs')
fs.readFile('./tpl.html',function(err,data){
if(err){
return console.log('讀取檔案失敗了');
}
// 預設讀取到的 data 是二進位制資料
// 而模板引擎的 render 方法需要接受的是字串
// 所以我們需要把 data 二進位制資料轉換為 字串 才可以給模板引擎使用
var ret = template.render(data.toString(),{
name: 'Jack',
age: 23
});
});
3.4 在Apache案例中使用模板引擎
var http = require('http');
var fs = require('fs');
var template = require('art-template');
// 1. 建立server
var server = http.createServer();
// 2. 監聽server的request請求事件，設定請求處理函式
var wwwDir = './www';
server.on('request',function(req,res){
var url = req.url
fs.readFile('./template-apache.html',function(err,data){
if(err){
return res.end('not fund 404');
}
// 1. 如何得到 wwwDir 目錄列表中的檔名和目錄名
// fs.readdir
// 2. 如何將得到的檔名和目錄名替換到template.html中
// 2.1 在template.html中需要替換的位置預留一個特殊的標記
// 2.2 根據files生成需要的html內容
// 模板引擎
// 只要做了這兩件事，問題就解決了
fs.readdir(wwwDir,function(err,files){
if(err){
return res.end('Can not find www dir.');
}
htmlStr = template.render(data.toString(),{
title: 'test',
files: files
})
res.end(htmlStr);
});
});
});
// 3. 繫結埠號，啟動服務
server.listen(3000,function(){
console.log('伺服器已經啟動');
});
4. 服務端渲染和客戶端渲染
4.1 服務端渲染
- 說白了就是在服務端使用模板引擎
- 模板引起最早誕生於服務端，後來才發展到了前端
4.2 服務端渲染和客戶端渲染的區別
- 客戶端渲染不利於SEO搜尋引擎優化
- 服務端渲染是可以被爬蟲抓取到的，客戶端非同步渲染是很難被爬蟲抓取到的
- 所以真正的網站既不是純非同步也不是純服務端渲染出來的，而是兩者之間的結合做的
- 例如京東商品列表就是採用的是服務端渲染，目的是為了SEO搜尋引擎優化
- 而商品評論列表為了使用者體驗，而且不需要SEO優化，所有采用客戶端渲染
5. 留言板
瀏覽器在收到html響應內容之後，就要開始從上到下一次解析，當在解析的過程中，如果發現link,script,img,iframe,video,audio等具有src或者link的href屬性標籤的時候，瀏覽器會自動對這些資源發起新的請求。
# 把當前模組所有的依賴項的宣告放在最上面
# 為了讓目錄結構保持統一清晰，所以我們約定,把所有的html檔案都放到views資料夾中
# 注意：在服務端中，檔案中的路徑不要去寫相對路徑，因為這個時候所有的資源都是通過url標識獲取的
# 瀏覽器在真正發請求的時候會把 http://127.0.0.1:3000拼上
# 不要再想檔案路徑了，把所有的路徑都想成url
var http = require('http')
var fs = require('fs')
var template = require('art-template')
var url = require('url')
http.createServer(function(req, res){
var parseObj = url.parse(req.url, true)
// 單獨獲取不包含查詢字串的路勁部分
var pathname = parseObj.pathname
if(pathname === '/'){
fs.readFile('./views/index.html', function(err, data){
if(err){
return res.end('404 not fund .')
}
var htmlStr = template.render(data.toString(),{
comments: comments
})
res.end(htmlStr)
})
}else if(pathname.indeof('/public/') === 0){
// 統一處理
// 如果請求路徑是以/public/開頭的，則我認為只要獲取public中的某個資源
// 所以我們就直接可以把請求路徑當做檔案路徑來直接進行讀取
fs.readFile('.'+pathname, function(err, data){
if(err){
return res.end('404 not fund .')
}
res.end(data)
})
}else if(pathname === '/pinglun'){
// 一次請求對應一次響應，響應結束這次請求就結束了
// res.end(JSON.stringify(parseObj.query))
// 我們已經使用url模組的parse方法把請求的路徑中的查詢字串給解析成了一個物件
// 所以接下來要做的就是：
// 1. 獲取表單的提交的資料 parseObj.query
// 2. 將當前時間日期新增到資料物件中，然後儲存到陣列中
// 3. 讓使用者從定向跳轉到首頁 /
var comment = parseObj.query
comment.dateTime = '2014-2-2 19:22:22'
comments.push(comment)
// 服務端這個時候已經把資料儲存好了接下來就是讓使用者重新請求 / 首頁，就可以看到新增的資料了
// 如何通過伺服器讓客戶端重定向
// 1. 狀態碼設定 402 臨時重定向 statuscode
// 2. 在響應頭中通過Location告訴客戶端往哪重定向 setHeader
// 如果客戶端發現收到伺服器的響應的狀態碼是 302 就會自動去響應頭中找Location，然後對改地址傳送新的請求，所以就能看到客戶端自動跳轉了
res.statusCode = 302
res.setHeader('Location','/')
res.end()
}else{
fs.readFile('./views/404.html', function(err,data){
if(err){
return res.end('404 not found.')
}
res.end(data)
})
}
}).listen(3000，function(){
console.log('running...')
})
6. 處理網站中的靜態資源
- 為了方便的統一處理這些靜態資源，所以我們約定把所有的靜態資源都放在public目錄中
- 哪些資源能被使用者訪問，哪些不能被訪問，可以通過程式碼來進行靈活的控制
7. 表單提交
表單提交分為：
- 預設的提交行為
- 表達非同步提交
對於表單提交的請求路徑，由於其中具有使用者動態填寫的內容
所以可以通過url.parse(’請求路徑‘，true)可以獲取相應的引數
使用url.parse方法將路徑解析為一個方便操作的物件，
第二個引數為true表示直接將查詢字串轉為一個物件（通過query屬性訪問）
8. 評論留言專案流程
/ index.html
開放publick目錄中的靜態資源
- 當請求/public/xxx的時候，讀取響應public目錄中的具體資源
/post post.html
/pinglun
- 接收表單提交的資料
- 讓表單重定向到 /
- statusCode
- setHeader
補充：
Node把模板引擎儲存在檔案裡面
瀏覽器把模板字串儲存在script標籤裡面