99久久精品国产综合一区,国语自产拍精品香蕉在线播放,99精品福利国产在线

本篇文章通過超多代碼和圖解來帶大家深入解析Node.js，主要內容包括模塊化處理、包的基本應用、Express、跨域、操作Mysql數據庫等，希望對大家有所幫助！

一文帶你深入了解Node.js（圖文詳解）

一、Node.js簡介

1.1什么是Node.js

一文帶你深入了解Node.js（圖文詳解）

Node.js是一個調用內置ApI并且基于Chrome V8引擎的js運行環境，之前自己在本地總結了一些零散的只知識點，今天整合一下發出來。

官網地址： https://nodejs.org/zh-cn/

1.2 Node.js可以做什么

①基于 Express 框架（http://www.expressjs.com.cn/），可以快速構建 Web 應用。【相關教程推薦：nodejs視頻教程、編程教學】

②基于 Electron 框架（https://electronjs.org/），可以構建跨平臺的桌面應用

③基于restify框架（http://restify.com/），可以快速構建 API 接口項目

④讀寫和操作數據庫、創建實用的命令行工具輔助前端開發、etc…

1.3 Node.js的安裝

下載鏈接：https://nodejs.org/en/

一文帶你深入了解Node.js（圖文詳解）

LTS：長期穩定版
Current：嘗鮮版

查看版本號：node –v

一文帶你深入了解Node.js（圖文詳解）

學習路線：JavaScript 基礎語法 + Node.js 內置 API 模塊（fs、path、http等）+ 第三方 API 模塊（express、mysql 等）

1.4 Node.js的使用

命令：node js文件名

一文帶你深入了解Node.js（圖文詳解）

終端快捷鍵：

①使用 ↑ 鍵，可以快速定位到上一次執行的命令

②使用 tab 鍵，能夠快速補全路徑

③使用 esc 鍵，能夠快速清空當前已輸入的命令

④輸入 cls 命令，可以清空終端

二、模塊化處理

2.1 什么是模塊化

一文帶你深入了解Node.js（圖文詳解）

定義：把復雜問題簡單化，分成一個個小問題。編程領域中的模塊化，就是遵守固定的規則，把一個大文件拆成獨立并互相依賴的多個小模塊

把代碼進行模塊化拆分的好處：

提高了代碼的復用性
提高了代碼的可維護性
可以實現按需加載

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（圖文詳解）

node 命令自動將當前路徑和js腳本文件路徑拼接，而不管.day總復習這個路徑
我們可以使用絕對路徑改善

一文帶你深入了解Node.js（圖文詳解）

(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服務器

一文帶你深入了解Node.js（圖文詳解）

(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服務器

一文帶你深入了解Node.js（圖文詳解）

根據瀏覽器訪問的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的使用');
登錄后復制

一文帶你深入了解Node.js（圖文詳解）

注意：自定義模塊開頭必須有./ …/

2.4 外部模塊

定義：由第三方提供，使用前需要下載


//下載外部導入 const moment = require('moment');
登錄后復制

一文帶你深入了解Node.js（圖文詳解）

監聽nodemon


npm i nodemon -g
登錄后復制

代替node使用nodedmon，每次修改內容不需要重啟服務器，自動監聽

2.5 模塊化處理

模塊作用域定義：和函數一致，當前模塊定義的方法、變量，只能在當前模塊訪問，防止變量污染

一文帶你深入了解Node.js（圖文詳解）

暴露：通過module.exports或者exports暴露出去，使用 require() 方法導入模塊時，導入的結果，永遠以module.exports 指向的對象為準

2.6 加載機制

定義： 一次加載緩存，從緩存加載 ，內置模塊加載優先級MAX

三、包的基本應用

包：概念像node.js的第三方模塊,包是基于內置模塊封裝出來的，提供了更高級、更方便的 API，極大的提高了開發效率

npm: 包管理工具

一文帶你深入了解Node.js（圖文詳解）

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.js（圖文詳解）

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 下載鏡像

一文帶你深入了解Node.js（圖文詳解）


//查看當前npm鏡像 npm config get registry //nrm鏡像工具，安裝為全局鏡像 nrm ls //切換鏡像 nrm use taobao
登錄后復制

一文帶你深入了解Node.js（圖文詳解）

3.6 開發自己的包

一個規范的包，它的組成結構，必須符合以下 3 點要求：

包必須以單獨的目錄而存在
包的頂級目錄下要必須包含 package.json 這個包管理配置文件
package.json 中必須包含 name，version，main 這三個屬性，分別代表包的名字、版本號、包的入口

一文帶你深入了解Node.js（圖文詳解）

發布包到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 路由

一文帶你深入了解Node.js（圖文詳解）

定義：客戶端與服務器映射關系

一文帶你深入了解Node.js（圖文詳解）

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 中間件

一文帶你深入了解Node.js（圖文詳解）

中間件：與路由處理函數不同，必須包含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 內置

一文帶你深入了解Node.js（圖文詳解）


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-parse
require導入
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代碼獲取資源，在服務器端配置

一文帶你深入了解Node.js（圖文詳解）

5.1.2 響應頭

一文帶你深入了解Node.js（圖文詳解）


//只允許特定的域名訪問、*代表全部     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 身份認證

概念：通過不同的手段（驗證碼、密碼、人臉、指紋...）,認證客戶的身份

一文帶你深入了解Node.js（圖文詳解）

7.3 Session認證機制

7.3.1 Cookie

一文帶你深入了解Node.js（圖文詳解）

Cookie：存儲在瀏覽器不超過4KB字符串，鍵值對形式存儲

自動發送
域名獨立
過期時限
4KB限制
容易偽造，不建議存放隱私數據

一文帶你深入了解Node.js（圖文詳解）

7.3.2 Session

核心：會員卡+pos機認證

一文帶你深入了解Node.js（圖文詳解）

npm install express-session

2025年7月
一	二	三	四	五	六	日
« 6月
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

一、Node.js簡介

1.1什么是Node.js

1.2 Node.js可以做什么

1.3 Node.js的安裝

1.4 Node.js的使用

二、模塊化處理

2.1 什么是模塊化

2.2 內置模塊

2.2.1 fs文件系統模塊

（1）基本用法

（2）防止動態拼接

(3)路徑問題

2.2.2 path內置模塊

2.2.3 http內置模塊

(1) 初始化

(2) web服務器

2.3 自定義模塊

2.4 外部模塊

監聽nodemon

2.5 模塊化處理

2.6 加載機制

三、包的基本應用

3.1 使用流程

3.2 版本問題

3.3 參數問題

3.4 npm命令

3.5 下載鏡像

3.6 開發自己的包

四、Express

4.1 簡介

4.2 基本使用

4.3 托管靜態資源

4.4 路由

4.4.1 簡單掛載

4.4.2 模塊化路由

4.5 中間件

4.5.1 基本使用

4.5.2 中間件分類

（1）應用

（2）路由

（3）錯誤

（4）Express 內置

（5）第三方

4.6 自定義中間件

4.7 接口

4.7.1 GET接口

4.7.2 POST接口

4.7.3 PUT接口

4.7.4 DELETE接口

4.7.5 區別

五、跨域

5.1 CORS

5.1.1 原理

5.1.2 響應頭

5.1.3 分類

（1）簡單請求

（2）預檢請求

5.2 JSONP

六、Mysql數據庫

6.1 SQL命令

6.1.1 查詢

6.1.2 插入

6.1.3 更新

6.1.4 刪除

6.2 Node.js使用

6.2.1 初始化

6.2.2 查詢

6.2.3 插入

6.2.4 更新

6.2.5 刪除

(1) 一般刪除

(2) 標記刪除

七、前后端的身份認證

7.1 Web開發模式

7.1.1 基于服務端渲染的傳統 Web 開發模式

7.1.2 基于前后端分離的新型 Web 開發模式

7.2 身份認證

7.3 Session認證機制

7.3.1 Cookie

7.3.2 Session

一、Node.js簡介

二、模塊化處理

三、包的基本應用

五、跨域

六、Mysql數據庫