node.js開發web server部落格專案(1)
阿新 • • 發佈:2019-12-31
一、nodejs與javascript的區別
1.1 ECMAScript
- 不能操作DOM 不能監聽click事件,不能傳送ajax請求
- 不能處理http請求 不能操作檔案
- 只有ECMAScript不能做任何實際的專案
1.2 javascript
- 使用ECMAScript語法規範 外加Web API
- DOM操作 BOM操作 事件繫結 Ajax
- 兩者結合 即可完成瀏覽器端任何操作
1.3 nodejs
- 使用ECMAScript語法規範 外加nodejs API 缺一不可
- 處理http 處理檔案
- 兩者結合 完成server端的操作
{
"name": "debugger-test" ,"version": "1.0.0","description": "","main": "index.js",// 重要 入口檔案
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},"keywords": [],"author": "","license": "ISC"
}
複製程式碼
// app.js
const http = require('http');
// 用http模組建立一個服務 服務端返回兩個引數req,res
const server = http.createServer((req,res )=>{
res.writeHead(200,{
'content-type': 'text/html' // 返回的資訊格式是html格式
})
res.end('<h1>hello world</h1>') // 返回的具體內容
})
server.listen(3000,()=>{
console.log('listening on 3000 port')
})
複製程式碼
1.4 server端開發和前端開發的區別
- 服務穩定性
- server端可能會遭受各種惡意攻擊和誤操作
- 單個客戶端可以意外掛掉,但是服務端不能
- 使用PM2做程式守候 -- 指程式一旦掛掉會自動重啟 不用人工
- 考慮記憶體和CPU(優化,擴充套件)
- 客戶端獨佔一個瀏覽器,記憶體和CPU都不是問題
- server端要承載很多請求,CPU和記憶體都是稀缺資源
- 使用stream寫日誌(優化),使用redis存session(擴充套件)
- 日誌記錄 對server端非常重要
- 前端也會參與寫日誌,但只是日誌的發起方,不關心後續
- server端要記錄日誌,儲存日誌,分析日誌,前端不關心
- 多種日誌記錄方式,如何分析日誌,根據不同情況選擇不同的日誌記錄的方式
- 安全 前端可以輕易攻破 但server端不會輕易被攻破
- server端要隨時準備接收各種惡意攻擊,前端則很少
- 如:越權操作,資料庫攻擊
- 登入驗證 預防xss攻擊和sql注入
- 叢集和服務拆分 server端承載的流量越來越大
- 產品發展速度快,流量可能會迅速增加
- 通過擴充套件機器和服務拆分來承載大流量
二、專案分析
2.1 專案實現目標
- 開發一個部落格系統 具有部落格的基本功能
- 只開發server端,不關心前端
2.2 專案需求分析
- 首頁,作者主頁,部落格詳情頁
- 登入頁
- 管理中心,新建頁,編輯頁
2.3 專案技術方案
- 資料如何儲存
- 部落格
- 如何與前端對接,即介面設計
三、開發介面
// app.js
const http = require('http');
// 用http模組建立一個服務 服務端返回兩個引數req,res
const server = http.createServer((req,{
'content-type': 'text/html' // 返回的資訊格式是html格式
})
res.end('<h1>hello world</h1>') // 返回的具體內容
})
server.listen(8000,()=>{
console.log('listening on 8000 port')
})
複製程式碼
3.1 從輸入url到頁面渲染的過程?
- DNS解析(解析到一個IP地址),客戶端和伺服器端建立TCP連線,傳送http請求
- 客戶端找到伺服器,會三次握手
- 第一次握手:客戶端詢問伺服器 是否可以用
- 第二次握手:伺服器端告訴客戶端可用
- 第三次握手:客戶端告訴伺服器端,即將訪問 傳送http請求
-
- server端接收到http請求,處理,並返回
-
nodejs處理http請求
-
get請求和querystring(url引數)
- get請求 即客戶端要向server端獲取資料,如查詢部落格列表
- 通過querystring來傳遞資料,如a.html?a=100&b=200
- 瀏覽器直接訪問,就傳送get請求
const http = require('http'); const querystring = require('querystring'); const server = http.createServer((req,res)=>{ console.log(req.method) // GET const url = req.url // 獲取請求的完整url req.query = querystring.parse(url.split('?')[1]) // 解析querystring res.end(JSON.stringify(req.query));//將querystring返回 }); server.listen(8000); 複製程式碼
-
post請求和postdata
- 客戶端要像服務端傳遞資料,如新建部落格
- 通過postData傳遞資料
- 瀏覽器無法直接模擬,需要手寫js,或者使用postman
-
- server端接收到http請求,處理,並返回
const http = require('http');
const server = http.createServer((req,res)=>{
if(req.method === 'POST'){
// 資料格式
conssole.log('content-type',req.headers['content-type']);
// 接受資料
let postData = "";
req.on('data',chunk=>{
postData += chunk.toString()
});
req.on('end',()=>{
console.log(postData);
res.end('hello world'); //在這裡返回,因為是非同步
})
}
});
server.listen(8000);
複製程式碼
- 路由(介面地址)
複製程式碼
const http=require('http');
const server = http.createServer((req,res)=>{
const url= req.url;
const path = url.split('?')[0];
res.end(path); //返回路由
});
server.listen(8000);
複製程式碼
- 客戶端接收到返回資料,處理資料(如渲染頁面,執行JS)
四、部落格專案
4.1 搭建環境
-
blog-1
- bin
- www.js
- app.js 存放http.createServer()內的回撥函式
- bin
-
npm init -y
入口檔案改成"main": "bin/www.js",
-
yarn add nodemon cross-env --save-dev
安裝-
nodemon
可以監控檔案變化 可以自動重啟node 不需要手動重啟 -
cross-env
識別當前的環境 開發環境-dev 線上環境-production
//package.json "scripts": { "test": "echo \"Error: no test specified\" && exit 1","dev": "cross-env NODE_ENV=dev nodemon ./bin/www.js" },複製程式碼
-
-
npm run dev
4.2 開發介面-初始化路由
- 返回假資料:將路由和資料處理分離,以符合設計原則