站長資訊網
本篇文章通過超多代碼和圖解來帶大家深入解析Node.js，主要內容包括模塊化處理、包的基本應用、Express、跨域、操作Mysql數據庫等，希望對大家有所幫助！
一、Node.js簡介
1.1什么是Node.js
Node.js是一個調用內置ApI并且基于Chrome V8引擎的js運行環境，之前自己在本地總結了一些零散的只知識點，今天整合一下發出來。
官網地址： https://nodejs.org/zh-cn/
1.2 Node.js可以做什么
①基于 Express 框架（http://www.expressjs.com.cn/），可以快速構建 Web 應用?！鞠嚓P教程推薦：nodejs視頻教程、編程教學】
②基于 Electron 框架（https://electronjs.org/），可以構建跨平臺的桌面應用
③基于restify框架（http://restify.com/），可以快速構建 API 接口項目
④讀寫和操作數據庫、創建實用的命令行工具輔助前端開發、etc…
1.3 Node.js的安裝
下載鏈接：https://nodejs.org/en/
- LTS：長期穩定版
- Current：嘗鮮版
查看版本號：node –v
學習路線：JavaScript 基礎語法 + Node.js 內置 API 模塊（fs、path、http等）+ 第三方 API 模塊（express、mysql 等）
1.4 Node.js的使用
命令：node js文件名
終端快捷鍵：
①使用 ↑ 鍵，可以快速定位到上一次執行的命令
②使用 tab 鍵，能夠快速補全路徑
③使用 esc 鍵，能夠快速清空當前已輸入的命令
④輸入 cls 命令，可以清空終端
二、模塊化處理
2.1 什么是模塊化
定義：把復雜問題簡單化，分成一個個小問題。編程領域中的模塊化，就是遵守固定的規則，把一個大文件拆成獨立并互相依賴的多個小模塊
把代碼進行模塊化拆分的好處：
- 提高了代碼的復用性
- 提高了代碼的可維護性
- 可以實現按需加載
2.2 內置模塊
定義：由Node.js官方提供，如fs、http、path
2.2.1 fs文件系統模塊
（1）基本用法
// 引用內部模塊 const fs = require('fs'); // 文件讀取 fs.readFile('../files/test-fs.txt', 'utf-8', (err, results) => { if (err) return console.log(err.message);// 錯誤信息err null console.log(results); }) // 文件寫入 fs.writeFile('../files/test-fs.txt', 'Node.js', 'utf-8', (err) => { if (err) return console.log(err.message); console.log('寫入文件成功!'); })
登錄后復制
注意點
readFile只能讀取已經存在的文件writeFile寫入內容已經有文件，則創建同名文件，再寫入文件readFile需要在writeFile后面讀取，不然出錯
（2）防止動態拼接
node命令自動將當前路徑和js腳本文件路徑拼接，而不管.day總復習這個路徑- 我們可以使用
絕對路徑改善
(3)路徑問題
./表示當前目錄../表示父級目錄../..表示祖父目錄- 動態拼接，首部不能出現
./ ../，否則拼接失敗 /…/
2.2.2 path內置模塊
定義：拼接絕對路徑
- path.join()
- path.basename()
- path.extname()
const fs = require('fs'); const path = require('path'); const fpath = path.join(__dirname, '/../files/test-fs.txt'); fs.readFile(fpath, 'utf-8', (err, results) => { console.log(__dirname); console.log(path.basename(fpath, '.txt')); console.log(path.extname(fpath)); if (err) return console.log(err.message); console.log(results); }) // test-fs // .txt // Node.js
登錄后復制
2.2.3 http內置模塊
定義：Node.js提供創建web服務器
(1) 初始化
// 導入http模塊 const http = require('http'); //創建web服務器實例 const server = http.createServer(); //綁定request事件，監聽客戶端請求 server.on('request', (req, res) => { let str = `路徑 ${req.url} 方法 ${req.method}`; console.log(str); // 向客戶端發送中文前，設置響應頭 res.setHeader('Content-Type', 'text/html;charset=utf-8'); res.end(str); }) //啟動服務器 server.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
(2) web服務器
- 根據瀏覽器訪問的
url地址不同，返回相應的絕對路徑
const fs = require('fs'); const http = require('http'); const path = require('path'); const server = http.createServer(); let fpath = ''; server.on('request', (req, res) => { if (req.url === '/') { fpath = path.join(__dirname + '/../files/clock/index.html'); console.log(__dirname); console.log(fpath); } else { fpath = path.join(__dirname + '/../files/clock' + req.url); } fs.readFile(fpath, 'utf-8', (err, results) => { if (err) res.end('404 not find'); res.end(results); }) }) server.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
2.3 自定義模塊
定義：用戶自定義的js模塊
//引入本地文件 const custom = require('./01-node.js的使用');
登錄后復制
注意：自定義模塊開頭必須有./ …/
2.4 外部模塊
定義：由第三方提供，使用前需要下載
//下載外部導入 const moment = require('moment');
登錄后復制
監聽nodemon
npm i nodemon -g
登錄后復制
代替node使用nodedmon，每次修改內容不需要重啟服務器，自動監聽
2.5 模塊化處理
模塊作用域定義：和函數一致，當前模塊定義的方法、變量，只能在當前模塊訪問，防止變量污染
暴露：通過module.exports或者exports暴露出去，使用 require() 方法導入模塊時，導入的結果，永遠以module.exports 指向的對象為準
2.6 加載機制
定義： 一次加載緩存，從緩存加載 ，內置模塊加載優先級MAX
三、包的基本應用
包：概念像node.js的第三方模塊,包是基于內置模塊封裝出來的，提供了更高級、更方便的 API，極大的提高了開發效率
npm: 包管理工具
3.1 使用流程
- npm
安裝包 - js
導入包 - 根據開發文檔
使用包
// npm i moment const moment = require('moment'); const date = moment().format('YYYY-MM-DD HH:mm:ss'); console.log(date);//2022-09-10 10:43:24
登錄后復制
3.2 版本問題
包的版本號是以“點分十進制”形式進行定義的，總共有三位數字，例如 2.24.0
其中每一位數字所代表的的含義如下：
-
第1位數字：
大版本 -
第2位數字：
功能版本 -
第3位數字：
Bug修復版本版本號提升的規則：只要前面的版本號增長了，則后面的版本號歸零。
npm i comment@2.22.2
登錄后復制
3.3 參數問題
node_modules文件夾用來存放所有已安裝到項目中的包。require() 導入第三方包時，就是從這個目錄中查找并加載包。package-lock.json配置文件用來記錄 node_modules 目錄下的每一個包的下載信息，例如包的名字、版本號、下載地址等。package.json項目的名稱、版本號、描述等、用到了哪些包、開發期間使用的包、部署使用的包devDependencies：開發依賴dependencies：核心依賴
- 注意：程序員不要手動修改 node_modules 或 package-lock.json 文件中的任何代碼，npm 包管理工具會自動維護它們，今后在項目開發中，一定要把 node_modules 文件夾，添加到 .gitignore 忽略文件中
3.4 npm命令
//安裝包 npm i moment //安裝全局包 npm i 包名 -g //安裝包到開發階段到devDependencies npm i 包名 -D //安裝所有依賴包 npm install //卸載包 npm uninstall moment //查看已經安裝的局部包 npm ls //查看全局安裝的包 npm ls -g
登錄后復制
查看包命令：https://blog.csdn.net/qq_41664096/article/details/121797260
3.5 下載鏡像
//查看當前npm鏡像 npm config get registry //nrm鏡像工具，安裝為全局鏡像 nrm ls //切換鏡像 nrm use taobao
登錄后復制
3.6 開發自己的包
一個規范的包，它的組成結構，必須符合以下 3 點要求：
- 包必須以
單獨的目錄而存在 - 包的頂級目錄下要必須包含
package.json這個包管理配置文件 - package.json 中必須包含
name，version，main這三個屬性，分別代表包的名字、版本號、包的入口
發布包到npm上
- 鏡像切換到npm上
npm login登錄- 發布包
npm publish - 刪除包
npm unpublish 包名 --force
資源：
- https://www.npmjs.com/ 網站上搜索自己所需要的包
- https://registry.npmjs.org/ 服務器上下載自己需要的包
四、Express
4.1 簡介
Express：基于Node.js http進一步封裝，更加高級的Web開發框架
對于前端程序員來說，最常見的兩種服務器，分別是：
- Web 網站服務器：專門對外提供
Web 網頁資源的服務器 - API 接口服務器：專門對外提供
API 接口的服務器
4.2 基本使用
//導入包 const express = require('express'); //創建服務器 const app = express(); app.get('/user', (req, res) => { res.send({ 男: '18', age: 28 }); }) app.post('/user', (req, res) => { res.send('post請求'); }) app.get('/', (req, res) => { //req.query ?name=zs&age=18 這種數據 //http://127.0.0.1?name=zs&age=18 console.log(req.query); }) app.post('/:id', (req, res) => { //動態匹配參數 console.log(req.params); }) //啟動服務器 app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
4.3 托管靜態資源
定義：通過路徑暴露文件，省去文件路徑的描寫
const express = require('express'); const app = express(); //托管靜態資源，不需要訪問 app.use('/public', express.static('../files/clock')); app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
推薦VScode插件：postcode
Express 的中文官網： http://www.expressjs.com.cn/
4.4 路由
定義：客戶端與服務器映射關系
4.4.1 簡單掛載
//導入包 const express = require('express'); //創建服務器 const app = express(); app.get('/user', (req, res) => { res.send({ 男: '18', age: 28 }); }) app.post('/user', (req, res) => { res.send('post請求'); }) //啟動服務器 app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
4.4.2 模塊化路由
為了方便對路由進行模塊化的管理，Express 不建議將路由直接掛載到 app 上，而是推薦將路由抽離為單獨的模塊。
將路由抽離為單獨模塊的步驟如下：
-
創建路由
模塊對應的.js文件 -
調用
express.Router()函數創建路由對象 -
向路由對象上掛載具體的路由
-
使用
module.exports向外共享路由對象 -
使用
app.use()函數注冊路由模塊
創建路由對象
const express = require('express');//導入包 const router = express.Router();//創建路由對象 //綁定路由規則 router.get('/user/list', (req, res) => { res.send('user list message'); }) router.post('/user/add', (req, res) => { res.send('user add message'); }) //向外導出路由對象 module.exports = router;
登錄后復制
使用路由對象
const express = require('express'); const app = express(); const router = require('./11-模塊化路由'); app.use(router); app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
4.5 中間件
中間件：與路由處理函數不同，必須包含next參數
4.5.1 基本使用
const express = require('express'); const app = express(); //全局中間件的簡化形式 app.use((req, res, next) => { console.log('正在使用全局中間件'); next(); }); app.get('/',(req, res) => { res.send('Get message'); }) app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
注意
-
多個中間件共享
req,res，上游設置好，下游的中間件/路由使用 -
中間件定義先后順序執行 -
局部生效的中間件，定義在app.get('/',中間件,(req, res) => { res.send('Get message'); })登錄后復制-
-
路由之前調用中間件 -
next()函數不能忘，后面不用寫內容
4.5.2 中間件分類
（1）應用
const express = require('express'); const app = express(); //全局中間件 app.use((req, res, next) => { console.log('全局中間件'); next(); }) //局部中間件 function mw(req, res, next) { console.log('局部中間件'); next(); } app.get('/', mw, (req, res) => { res.send('server is visting'); }) app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
（2）路由
定義：綁定到 express.Router() 實例上的中間件
（3）錯誤
定義：捕獲項目錯誤，防止出錯，在所有路由之后定義
const express = require('express'); const app = express(); app.get('/', (req, res) => { throw new Error('服務器出錯'); res.send('server is visting'); }) //全局中間件 app.use((err, req, res, next) => { console.log('Error!' + err.message); res.send('Error!' + err.message); next(); }) app.listen(80, () => { console.log('http://127.0.0.1'); }) //Error!服務器出錯
登錄后復制
（4）Express 內置
const express = require('express'); const app = express(); // express.json()解析JSON請求體 app.use(express.json()); //解析application/x-www- app.use(express.urlencoded({ extended: false })); app.post('/user', (req, res) => { console.log(req.body); }) app.post('/book', (req, res) => { console.log(req.body); }) app.listen(80, () => { console.log('http://127.0.0.1'); }) // http://127.0.0.1 // { name: 'zs', age: 18 } // [Object: null prototype] { name: '西游記' }
登錄后復制
（5）第三方
npm install body-parserequire導入app.use()為全局
const express = require('express'); const app = express(); const parser = require('body-parser'); app.use(parser.urlencoded({ extended: false })); app.post('/book', (req, res) => { console.log(req.body); }) app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
注意：Express 內置的 express.urlencoded 中間件，就是基于 body-parser 這個第三方中間件進一步封裝出來的。
4.6 自定義中間件
封裝中間件
const querystring = require('querystring'); function parsebody(req, res, next) { let str = ''; req.on('data', (result) => { str += result; }) req.on('end', () => { const body = querystring.parse(str); req.body = body; next(); }) } module.exports = parsebody;
登錄后復制
測試中間件
const express = require('express'); const app = express(); const parsebody = require('./14-自定義中間件'); app.use(parsebody); app.post('/user', (req, res) => { res.send(req.body); console.log(req.body); }) app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
4.7 接口
const express = require('express'); const app = express(); const router = require('./15-接口問題'); app.use(router); app.listen(80, () => { console.log('http://127.0.0.1'); })
登錄后復制
4.7.1 GET接口
const express = require('express'); const apiRouter = express.Router(); apiRouter.get('/user', (req, res) => { const query = req.query; res.send({ status: 0, msg: 'GET 請求成功', data: query }); }) module.exports = apiRouter;
登錄后復制
4.7.2 POST接口
apiRouter.use(express.urlencoded({ extended: false })); apiRouter.post('/user', (req, res) => { const body = req.body; res.send({ status: 0, msg: 'POST 請求成功', data: body }); })
登錄后復制
4.7.3 PUT接口
4.7.4 DELETE接口
4.7.5 區別
https://blog.csdn.net/qq_42931285/article/details/119852294
https://zhuanlan.zhihu.com/p/135454697
五、跨域
5.1 CORS
5.1.1 原理
概念：由Http響應頭構成，決定瀏覽器是否阻止js代碼獲取資源，在服務器端配置
5.1.2 響應頭
//只允許特定的域名訪問、*代表全部 res.setHeader('Access-Control-Allow-Origin', 'http://www.baidu.com'); //配置請求頭信息 res.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Custom-Header'); //配置請求頭方法 * 代表全部 res.setHeader('Access-Control-Allow-Methods', 'GET,POST,DELETE,PUT');
登錄后復制
5.1.3 分類
（1）簡單請求
- 請求方式：GET、POST、HEAD
- HTTP 頭部信息不超過以下幾種字段：
無自定義頭部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三個值application/x-www-form-urlencoded、multipart/form-data、text/plain） - 客戶端與服務器只發送
一次請求
（2）預檢請求
- 請求方式：GET、POST、HEAD之外的方式
自定義頭部字段OPTION預檢，成功后發送帶有數據的請求
5.2 JSONP
概念：只支持GET請求
六、Mysql數據庫
定義：組織、存儲、管理數據的倉庫
6.1 SQL命令
6.1.1 查詢
select * from userswhere id>1 and id <5
登錄后復制
6.1.2 插入
insert into users(username,password) values('jack','666')
登錄后復制
6.1.3 更新
update users set password='666666'where username='jack'
登錄后復制
6.1.4 刪除
delete from users where id=9
登錄后復制
6.2 Node.js使用
6.2.1 初始化
- 導包：
npm i mysql
//引入mysql const mysql = require('mysql'); //建立數據庫連接 const db = mysql.createPool({ url: '127.0.0.1',//數據庫IP地址 user: 'root',//賬號 password: '123456',//密碼 database: 'test_db'//操作哪一個數據庫 });
登錄后復制
6.2.2 查詢
const queryStr = 'select * from users'; db.query(queryStr, (err, results) => { if (err) return console.log(err.message); console.log(results); }) PS E:FEDjsnode.jsnode.js—資料day總復習code> node .18-mysql操作.js [ RowDataPacket { id: 1, username: 'zz', password: '123', status: 0 }, RowDataPacket { id: 2, username: 'ls', password: 'abc', status: 0 }, RowDataPacket { id: 4, username: 'jony', password: '456', status: 0 } ]
登錄后復制
6.2.3 插入
const user = { username: 'superman', password: 'jknad' }; const insertStr = 'insert into users set ?'; db.query(insertStr, user, (err, results) => { if (err) return console.log(err.message); if (results.affectedRows == 1) { console.log('插入數據成功'); } }) //插入數據成功
登錄后復制
6.2.4 更新
const user = { id: 10, username: 'super', password: '123456' }; const updateStr = 'update users set ? where id=?'; db.query(updateStr, [user, user.id], (err, results) => { if (err) return console.log(err.message); if (results.affectedRows == 1) { console.log('更新數據成功'); } })
登錄后復制
6.2.5 刪除
(1) 一般刪除
const deleteStr = 'delete from users where id=?'; db.query(deleteStr, 10, (err, results) => { if (err) return console.log(err.message); if (results.affectedRows == 1) { console.log('刪除成功'); } })
登錄后復制
(2) 標記刪除
const deleteStr = 'update users set status=1 where id=?'; db.query(deleteStr, 10, (err, results) => { if (err) return console.log(err.message); if (results.affectedRows == 1) { console.log('刪除成功'); } })
登錄后復制
七、前后端的身份認證
7.1 Web開發模式
7.1.1 基于服務端渲染的傳統 Web 開發模式
概念：服務端在后臺拼接html頁面，發送給客戶端，不需要ajax
特點：
- 前端耗時少
- 有利于SEO
- 占用服務端資源
- 不利于前后端分離開發
7.1.2 基于前后端分離的新型 Web 開發模式
概念：后端提供API接口，前端通過ajax調用接口
特點：
- 開發體驗好
- 用戶體驗好
- 減輕服務器渲染壓力
- 不利于SEO
不談業務場景而盲目選擇使用何種開發模式都是耍流氓
- 比如
企業級網站，主要功能是展示而沒有復雜的交互，并且需要良好的SEO，則這時我們就需要使用服務器端渲染 - 而類似
后臺管理項目，交互性比較強，不需要考慮SEO，那么就可以使用前后端分離的開發模式 - 另外，具體使用何種開發模式并不是絕對的，為了同時兼顧了首頁的渲染速度和前后端分離的開發效率，一些網站采用了
首屏服務器端渲染 + 其他頁面前后端分離的開發模式
7.2 身份認證
概念：通過不同的手段（驗證碼、密碼、人臉、指紋...）,認證客戶的身份
7.3 Session認證機制
7.3.1 Cookie
Cookie：存儲在瀏覽器不超過4KB字符串，鍵值對形式存儲
- 自動發送
- 域名獨立
- 過期時限
- 4KB限制
- 容易偽造，不建議存放
隱私數據
7.3.2 Session
核心：會員卡+pos機認證
npm install express-session
