快速入門nodejs-前端必會

介紹

寫后臺管理程序，與之類似php .net java

目標(biāo)

數(shù)據(jù)服務(wù)，文件服務(wù)，web服務(wù)

優(yōu)勢

性能高，方便、入門難度低、大公司都在用（BAT）

劣勢

  • 服務(wù)器提供的相對較少
  • 相對其他語言，能用的上的學(xué)習(xí)資料少
  • 對程序員的要求高了

環(huán)境安裝

官網(wǎng)：http://nodejs.cn/

測試環(huán)境： win+r->命令行(運(yùn)行->cmd)->node -v

版本

Vx(主).x(子).x（修正）

主版本: 變化了，1/3的API發(fā)生巨變 , 使用方式變化了

子版本： API沒有刪減，使用方式?jīng)]變化,內(nèi)部實(shí)現(xiàn)發(fā)生了變化

修正版：什么都沒變，處理一下bug

V6.8.0 穩(wěn)定

V6.9.1 非穩(wěn)定版

beta 測試

rc 、alpha測試穩(wěn)定

node命令行

node 回車

運(yùn)行

window
a. 找到目標(biāo)目錄-》地址欄輸入cmd-》node 文件名.js | node 文件名

b. 當(dāng)前目錄->右鍵->git bash-> node 文件名
蘋果
終端->cd 目錄-> node 文件名.js | node 文件名
vscode
新建終端->cd 目錄->node 文件名.js | node 文件名 
調(diào)試->運(yùn)行
webstrom
terminal| run

開發(fā)注意

nodejs 使用的是ECMA語法，不可使用DOM，BOM

web服務(wù)器

構(gòu)成

  • 機(jī)器： 電腦
  • 數(shù)據(jù)庫：mysql | sqlserver | mongoDB | oracle
    • 數(shù)據(jù)庫存的是: 數(shù)字|字符
    • 磁盤（硬盤) 文件本身(圖，視頻,PDF) 文件服務(wù)器
  • 管理程序：nodejs（管理前后端工程文件）

前后端交互流程

大后端

? 用戶 - > 地址欄(http[s]請求) -> web服務(wù)器（收到) - > nodejs處理請求(返回靜態(tài)、動態(tài))->請求數(shù)據(jù)庫服務(wù)(返回結(jié)果)->nodejs(接收)->node渲染頁面->瀏覽器（接收頁面，完成最終渲染)

大前端

? 用戶 - > http[s]請求 -> web服務(wù)器（收到) - > nodejs處理請求(返回靜態(tài)、動態(tài))->請求數(shù)據(jù)庫服務(wù)(返回結(jié)果)->nodejs(接收)->返回給前端(渲染)->瀏覽器（接收頁面，完成最終渲染)

實(shí)現(xiàn)

引入http模塊

let http = require('http')

創(chuàng)建web服務(wù) 返回http對象

let app = http.createServer((req,res)=>{
    req 請求體  瀏覽器->服務(wù)器
    req.url  地址   提取地址欄數(shù)據(jù)
    req.on('data',()=>{}) 提取非地址欄數(shù)據(jù) 所有的http[s]都會觸發(fā)end事件 這個可能一次抓不完，寫一個變量累加，抓完后，要寫end在end里面進(jìn)行后續(xù)操作
    req.on('end',()=>{}) 
    
    res 響應(yīng)  服務(wù)器->瀏覽器
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});響應(yīng)頭設(shè)置
    res.write(字符/數(shù)據(jù)<string><buffer>) 返回?cái)?shù)據(jù)
    res.end() 結(jié)束響應(yīng) 必須
})

監(jiān)聽服務(wù)器

app.listen(端口，[地址]，[回調(diào)])

監(jiān)聽成功，回調(diào)一次

端口: 1-65535 1024以下系統(tǒng)占用

虛擬地址localhost 真實(shí)域名xx.duapp.com

更新后,需要每次服務(wù)器自動重啟

推薦命令行工具：supervisor nodemon

安裝方式: npm install supervisor -g

fs模塊

磁盤操作，文件操作

讀取

fs.readFile('文件路徑',[編碼方式],(err,data)=>{})

[^err ]: err 錯誤 ,null沒有錯誤 //讀取失敗

編碼方式可以設(shè)置成utf-8 如果不設(shè)置會自動成為buffer流

變量 = fs.readFileSync('文件路徑')

處理錯誤

try{要排錯的代碼}catch(e){}

try{

//要測試代碼錯誤代碼

let data = fs.readFileSync('./html/index123.html');

console.log('data',data)

}catch(e){//錯誤事件對象 error / ev / e

//處理錯誤，包裝后續(xù)代碼正常

console.log('e',e)

}

更名

fs.renameSync('改前','改后',回調(diào)可以捕獲錯誤);
fs.rename('改前','改后',(err)=>{})

刪除

fs.unlinkSync('文件路徑')

靜態(tài)資源托管

什么是靜態(tài)資源

xx.css xx.html xx.js xx.圖片 xx.json xx.字體 ...

前端資源請求

<a href=".."></a>
<img src="..."/>

location.href="..."

body{
    background:url(....)
}

后端資源讀取

fs.readFile(文件名,[編碼方式],回調(diào)(err,data));

接口實(shí)現(xiàn)

前端

表單：get/post/put/delete/...

js： ajax/jsonp

后端

處理方式：http[s]

? address: req.url 抓取 get請求的數(shù)據(jù) 切字符 | url模塊

? !address: req.on('data',(chunk)=>{CHUNK==每次收到的數(shù)據(jù)buffer})

? req.on('end',()=>{ 接收完畢 切字符 querystring })

postman 一個不用寫前端，就可以發(fā)出各種請求的軟件

url模塊

作用

處理 url型的字符串

用法

url.parse(str,true)  返回 對象  true將query處理為對象

str -> obj 返回 對象 true
protocol: 'http:', 協(xié)議
slashes: true, 雙斜杠
auth: null, 作者
host: 'localhost:8002', 主機(jī)
port: '8002', 端口
hostname: 'localhost', baidu
hash: '#title', 哈希（錨)
search: '?username=sdfsdf&content=234234', 查詢字符串
query: 'username=sdfsdf&content=234234', 數(shù)據(jù)
pathname: '/aaa', 文件路徑
path: '/aaa?username=sdfsdf&content=234234', 文件路徑
href: 'http://localhost:8002/aaa?username=sdfsdf&content=234234#title'

url.format(obj) 返回字符

obj -> str 返回str

querystring 模塊

作用

處理查詢字符串 如：?key=value&key2=value2

用法

querystring.parse(str) 返回對象

querystring.stringify(obj) 返回字符串

模塊化 commonJS

介紹

是主要為了JS在后端的表現(xiàn)制定，commonJS 是個規(guī)范 nodejs / webpack 是一個實(shí)現(xiàn)

ECMA 是個規(guī)范 js / as 實(shí)現(xiàn)了他

其他模塊化規(guī)范：seajs.js / require.js CMD/AMD/UMD es5

作用

是變量具有文件作用域，不污染全局變量

系統(tǒng)模塊

http fs querystring url

輸入

require('模塊名')
require('模塊名').xx  按需引用

不指定路徑：先找系統(tǒng)模塊-> 再從項(xiàng)目環(huán)境找node_modules|bower_components (依賴模塊)->not found

指定路徑 : 找指定路徑 -> not found

支持任何類型

輸出

exports.自定義屬性 = 值 | any

批量輸出 都是屬性

可輸出多次

module.exports = 值 | any

只能輸出一次

注意

commonJS 是 nodejs 默認(rèn)模塊管理方式,不支持es6的模塊化管理方式，但支持所有es6+語法

使用： commonjs 引入 let http = require（“http”）

? 導(dǎo)出 exports.a = a 單個導(dǎo)出，但是可以輸出多次

? module.exports = a 讓這個a可以作為對象數(shù)組什么的，輸出全部，但是只能輸出一次

? es6模塊管理方式：引入 import d from './mod/d'

? 導(dǎo)出 export default d

? 舉例 export 可以導(dǎo)出的是一個對象中包含的多個 屬性，方法。
? export default 只能導(dǎo)出 一個 可以不具名的 對象。

? import {fn} from ‘./xxx/xxx’ ( export 導(dǎo)出方式的 引用方式 )
? import fn from ‘./xxx/xxx1’ ( export default 導(dǎo)出方式的 引用方式

NPM

作用

幫助你安裝模塊（包），自動安裝依賴，管理包（增，刪，更新，項(xiàng)目所有包)

類似： bower yarn

安裝到全局環(huán)境

  • 安裝到電腦系統(tǒng)環(huán)境下
  • 使用時在任何位置都可以使用
  • 被全局安裝的通常是：命令行工具，腳手架
npm i 包名 -g                             安裝
npm uninstall 包名 -g             卸載

安裝到項(xiàng)目環(huán)境

只能在當(dāng)前目錄使用，需要使用npm代運(yùn)行

初始化項(xiàng)目環(huán)境

npm init

初始化npm管理文件package.json

package-lock.json 文件用來固化依賴

{
  "name": "npm",    //項(xiàng)目名稱
  "version": "0.0.1",   //版本
  "description": "test and play",   //描述
  "main": "index.js", //入口文件
  "dependencies": {  //項(xiàng)目依賴  上線也要用
    "jquery": "^3.2.1"
  },
  "devDependencies": { //開發(fā)依賴 上線就不用
    "animate.css": "^3.5.2"
  },
  "scripts": {  //命令行
    "test": "命令行",
  },
  "repository": {   //倉庫信息
    "type": "git",
    "url": "git+https://github.com/alexwa9.github.io/2017-8-28.git"
  },
  "keywords": [  //關(guān)鍵詞
    "test",'xx','oo'
  ],
  "author": "wan9",
  "license": "ISC", //認(rèn)證
  "bugs": {
    "url": "https://github.com/alexwa9.github.io/2017-8-28/issues"http://問題提交
  },
  "homepage": "https://github.com/alexwa9.github.io/2017-8-28#readme"http://首頁
}

項(xiàng)目依賴

只能在當(dāng)前項(xiàng)目下使用，上線了，也需要這個依賴 --save

//安裝
npm i 包名 --save
npm install 包名 -S
npm install 包名@x.x.x -S

//卸載
npm uninstall 包名 --save
npm uninstall 包名 -S

開發(fā)依賴

只能在當(dāng)前項(xiàng)目下使用 ，上線了，依賴不需要了 --save-dev

npm install 包名 --save-dev
npm install 包名 -D

查看包

npm list  列出所有已裝包
npm outdated 版本對比(安裝過得包)
npm info 包名 查看當(dāng)前包概要信息 
npm view 包名 versions 查看包歷史版本列表

安裝所有依賴

npm install

安裝package.json里面指定的所有包

版本約束

^x.x.x   約束主版本，后續(xù)找最新
~x.x.x   保持前兩位不變，后續(xù)找最新
*        裝最新
x.x.x    定死了一個版本

選擇源

npm install nrm -g     安裝選擇源的工具包
nrm ls 查看所有源
nrm test 測試所有源
nrm use 切換源名

安裝卡頓時

ctrl + c -> npm uninstall 包名  -> npm cache 清除緩存 -> 換4g網(wǎng)絡(luò) -> npm install 包名

npm run XXX 會運(yùn)行package下scripts下的命令

發(fā)布包

  • 官網(wǎng) 注冊
  • 登錄
    • npm login 登錄
    • 輸入 user/password/email
  • 創(chuàng)建包
    • npm init -y
    • 創(chuàng)建入口index.js
    • 編寫，輸出
  • 發(fā)布
    • npm publish
  • 迭代
    • 先修改package里面版本號
    • npm publish
  • 刪除
    • npm unpublish

包的發(fā)布、迭代、刪除，需要在包目錄下進(jìn)行

刪除包，有時需要發(fā)送郵件

擴(kuò)展

peerDependencies 發(fā)布依賴
optionalDependencies 可選依賴
bundledDependencies 捆綁依賴
contributors 為你的包裝做出貢獻(xiàn)的人。貢獻(xiàn)者是一群人。
files 項(xiàng)目中包含的文件。您可以指定單個文件，整個目錄或使用通配符來包含符合特定條件的文件

YARN

安裝

注意：為省事，不要用npm i yarn -g，去安裝yarn，而是去下載壓縮包，保證注冊表和環(huán)境變量的硬寫入，后期通過yarn安裝全局包時方便

使用

初始化一個新項(xiàng)目

yarn init

添加依賴包

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

將依賴項(xiàng)添加到不同依賴項(xiàng)類別中

分別添加到 dependencies,devDependencies、peerDependencies 和 optionalDependencies 類別中：

yarn add [package] --save   | -S 
yarn add [package] --dev    | -D 
yarn add [package] --peer
yarn add [package] --optional

升級依賴包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

移除依賴包

yarn remove [package]

安裝項(xiàng)目的全部依賴

yarn

或者

yarn install

安裝到全局

yarn global add [package]               //global的位置測試不能變
yarn global remove [package]

BOWER

安裝bower

npm install -g bower

安裝包到全局環(huán)境

bower i 包名 -g       安裝
bower uninstall 包名 -g    卸載

安裝包到項(xiàng)目環(huán)境

初始化項(xiàng)目環(huán)境

bower init

bower.json 第三方包管理配置文件

項(xiàng)目依賴

只能在當(dāng)前項(xiàng)目下使用，上線了，也需要這個依賴 --save

//安裝
同npm
bower install 包名#x.x.x -S 指定版本使用#

//卸載
同npm

開發(fā)依賴

只能在當(dāng)前項(xiàng)目下使用 ，上線了，依賴不需要了 --save-dev

同npm

EXPRESS

nodejs庫，不用基礎(chǔ)做起，工作簡單化，點(diǎn)擊進(jìn)入官網(wǎng)，類似的還有 koa

特點(diǎn)

二次封裝，非侵入式，增強(qiáng)形

搭建web服務(wù)

let express=require('express')
let server=express()
let server.listen(端口,地址,回調(diào))

靜態(tài)資源托管

server.use(express.static('./www'));

多資源托管

app.use(express.static(path.join(__dirname, 'public','template')));
app.use('/admin',express.static(path.join(__dirname, 'public','admin')));    //加別名。訪問admin時會訪問admin下的靜態(tài)資源
app.use(express.static(path.join(__dirname, 'public')));     //使靜態(tài)資源托管返回?cái)U(kuò)大到public下

接口響應(yīng)

支持各種請求姿勢：get、post、put、delete...

app.請求姿勢API(接口名稱,處理函數(shù))
app.get(url,(req,res,next)=>{})
app.post(url,(req,res,next)=>{})
...

req 請求體

request 對象表示 HTTP 請求，包含了請求查詢字符串，參數(shù)，內(nèi)容，HTTP 頭部等屬性

req.query //獲取地址欄的數(shù)據(jù)
req.body //獲取非地址欄的數(shù)據(jù)  依賴中間件 body-parser  
        中間件使用:body-parser
        1. npm install body-parser 
        2. let bodyParser = require('body-parser') 
        3. app.use(bodyParser ())

req.params //獲取動態(tài)接口名 返回一個對象{id：3}
        eg：app.get('/api/goods/:id',(req,res)=>{
                // console.log('詳情',req.params)
        })
req.method //獲取前端提交方式

req.body依賴中間件

中間件使用:body-parser

  1. npm install body-parser
  2. let bodyParser = require('body-parser')
  3. app.use(bodyParser ())

res 響應(yīng)體

response 對象表示 HTTP 響應(yīng)，即在接收到請求時向客戶端發(fā)送的 HTTP 響應(yīng)數(shù)據(jù)

res.send(any) //對等 res.write + res.end
res.end(string|buffer)
res.json(json) //返回json
res.status(404).send({error:1,msg:"Sorry can't find that!"}) //返回狀態(tài)碼返回一個404

res.jsonp(響應(yīng)數(shù)據(jù)) //調(diào)用請求時的回調(diào)函數(shù)并傳遞響應(yīng)數(shù)據(jù)
res.sendFile(path.resolve('public/error.html'))//渲染純 HTML 文件

jsonp響應(yīng)

server.set('jsonp callback name','cb')//默認(rèn)callback
server.get('/jsonp接口',(req,res,next)=>res.jsonp(數(shù)據(jù)))

處理一部分接口

共有業(yè)務(wù)邏輯,在一起給處理了

server.all('/admin/*',(req,res,next)=>{}))

all匹配全路徑 處理所有HTTP

需要next 延續(xù)后續(xù)

use

安裝中間件、路由、接受一個函數(shù)，

server.use([地址],中間件|路由|函數(shù)體)

中間件

middleware， 處理自定義業(yè)務(wù)，只處理請求到結(jié)束響應(yīng)的中間部分

舉例

npm i body-parser -S //安裝包
let bodyParser=require('body-parser')//引入中間件
server.use(bodyParser())//安裝中間件

body-parser 使用方式，實(shí)時查詢 npm，可獲得最新

后端跳轉(zhuǎn)

res.redirect(url)      指向一個接口
用新接口代替老接口，在老接口res.redirect(url) 轉(zhuǎn)到新接口

use可以結(jié)果根請求 server.use("/"或者不寫或者寫“/*",(req,res,next)=>{

? 需要next（），才能往下傳

})

擴(kuò)展

req

  • req.app：當(dāng)callback為外部文件時，用req.app訪問express的實(shí)例
  • req.baseUrl：獲取路由當(dāng)前安裝的URL路徑
  • req.cookies：Cookies
  • req.fresh / req.stale：判斷請求是否還「新鮮」
  • req.hostname / req.ip：獲取主機(jī)名和IP地址
  • req.originalUrl：獲取原始請求URL
  • req.path：獲取請求路徑
  • req.protocol：獲取協(xié)議類型
  • req.route：獲取當(dāng)前匹配的路由
  • req.subdomains：獲取子域名
  • req.accepts()：檢查可接受的請求的文檔類型
  • req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages：返回指定字符集的第一個可接受字符編碼
  • req.get()：獲取指定的HTTP請求頭
  • req.is()：判斷請求頭Content-Type的MIME類型

res

  • res.app：同req.app一樣
  • res.append()：追加指定HTTP頭
  • res.set()在res.append()后將重置之前設(shè)置的頭
  • res.cookie(name，value [，option])：設(shè)置Cookie
  • opition: domain / expires / httpOnly / maxAge / path / secure / signed
  • res.clearCookie()：清除Cookie
  • res.download()：傳送指定路徑的文件
  • res.get()：返回指定的HTTP頭
  • res.location()：只設(shè)置響應(yīng)的Location HTTP頭，不設(shè)置狀態(tài)碼或者close response
  • res.render(view,[locals],callback)：渲染一個view，同時向callback傳遞渲染后的字符串，如果在渲染過程中有錯誤發(fā)生next(err)將會被自動調(diào)用。callback將會被傳入一個可能發(fā)生的錯誤以及渲染后的頁面，這樣就不會自動輸出了。
  • res.sendFile(path [，options] [，fn])：傳送指定路徑的文件 -會自動根據(jù)文件extension設(shè)定Content-Type
  • res.set()：設(shè)置HTTP頭，傳入object可以一次設(shè)置多個頭
  • res.status()：設(shè)置HTTP狀態(tài)碼
  • res.type()：設(shè)置Content-Type的MIME類型

作業(yè)

把jquery項(xiàng)目利用express搭建的node服務(wù)器來管理，保證資源托管到位，部分接口實(shí)現(xiàn)

身份驗(yàn)證

HTTP 是一種沒有狀態(tài)的協(xié)議，也就是它并不知道是誰訪問?？蛻舳擞脩裘艽a通過了身份驗(yàn)證，不過下回這個客戶端再發(fā)送請求時候，還得再驗(yàn)證

session

思想

1、客戶端用戶名跟密碼請求登錄
2、服務(wù)端收到請求，去庫驗(yàn)證用戶名與密碼
3、驗(yàn)證成功后，服務(wù)端種一個cookie或發(fā)一個字符到客戶端，同時服務(wù)器保留一份session
4、客戶端收到 響應(yīng) 以后可以把收到的字符存到cookie
5、客戶端每次向服務(wù)端請求資源的cookie會自動攜帶
6、服務(wù)端收到請求，然后去驗(yàn)證cookie和session，如果驗(yàn)證成功，就向客戶端返回請求的庫數(shù)據(jù)

Session存儲位置: 服務(wù)器內(nèi)存，磁盤，或者數(shù)據(jù)庫里

Session存儲內(nèi)容: id,存儲時間，用戶名等說明一下登錄的用戶是誰

客戶端攜帶 ： cookie自動帶，localStorage手動帶

如何保存信息給瀏覽器

前端種：

cookie/localstorage

后端種:

服務(wù)器給瀏覽器種cookie: cookie-parser

服務(wù)器給瀏覽器種cookie的同時在服務(wù)器上生成seesion: cookie-session

cookie-session

安裝引入

let cookieSession = require('cookie-session')

配置中間件

app.use(cookieSession({
  name:'保存到服務(wù)器的session的名字',
  keys:[必傳參數(shù)，代表加密層級],    //示例keys:['aa','bb','cc','dd'],
  maxAge:1000 //保留cookie的時間
}))

種cookie,備份session

req.session.key=value    //示例req.session['nz_1909']='userid';

讀cookie對比session

req.session.key  取cookie對比服務(wù)器的session，會返回userid，可以從返回的這個值是否存在來進(jìn)行自動登錄

刪除cokkie、session

delete req.session.key 
req.session.key = undefined

token

思想

在服務(wù)端不需要存儲用戶的登錄記錄，全部發(fā)給客戶端有客戶端自己存(cookie,local)

1、客戶端使用用戶名跟密碼請求登錄
2、服務(wù)端收到請求，去驗(yàn)證用戶名與密碼
3、驗(yàn)證成功后，服務(wù)端會簽發(fā)一個 Token（加了密的字符串），再把這個 Token 發(fā)送給客戶端
4、客戶端收到 Token 以后可以把它存儲起來，比如放在 Cookie 里或者 Local Storage 里
5、客戶端每次向服務(wù)端請求資源的時候需要帶著服務(wù)端簽發(fā)的 Token
6、服務(wù)端收到請求，然后去驗(yàn)證客戶端請求里面帶著的 Token，如果驗(yàn)證成功，就向客戶端返回請求的數(shù)據(jù)

實(shí)現(xiàn)

jsonwebtoken的安裝引入

let jwt = require('jsonwebtoken')

生成簽名

let token = jwt.sign(payload, secretOrPrivateKey, [options, callback])

校驗(yàn)token

jwt.verify(token, secretOrPublicKey, [options, callback])

token刪除

有客戶端，負(fù)責(zé)刪除

session vs token

session token
服務(wù)端保存用戶信息 √ ×
避免CSRF攻擊 × √
安裝性 一般 高
多服務(wù)器粘性問題 存在 不存在

多服務(wù)器粘性問題

當(dāng)在應(yīng)用中進(jìn)行 session的讀，寫或者刪除操作時，會有一個文件操作發(fā)生在操作系統(tǒng)的temp 文件夾下，至少在第一次時。假設(shè)有多臺服務(wù)器并且 session 在第一臺服務(wù)上創(chuàng)建。當(dāng)你再次發(fā)送請求并且這個請求落在另一臺服務(wù)器上，session 信息并不存在并且會獲得一個“未認(rèn)證”的響應(yīng)。我知道，你可以通過一個粘性 session 解決這個問題。然而，在基于 token 的認(rèn)證中，這個問題很自然就被解決了。沒有粘性 session 的問題，因?yàn)樵诿總€發(fā)送到服務(wù)器的請求中這個請求的 token 都會被攔截

文件上傳

思想

前端表單->后端接收到文件本身->保存到服務(wù)器上->給數(shù)據(jù)庫記錄文件一些信息->庫返回給nodejs相關(guān)信息->nodejs返回給前端

前端: <input type=file enctype="multipart/form-data" name="fieldname"

實(shí)現(xiàn)

multer->文件名會隨機(jī)->fs模塊改名->path系統(tǒng)模塊解析磁盤路徑

后端：multer 接受 form-data編碼數(shù)據(jù)

path系統(tǒng)模塊

操作系統(tǒng)磁盤路徑

編碼

windows： c:\\user\\admin\\a.jpg

mac: ~/desktop/1901

UI呈現(xiàn)

windows: c:\user\admin
mac: ~/desktop/1901

API

磁盤路徑解析 parse

path.parse('c:\\wamp\\xx.png') // string -> object

//返回
{
   root: 'c:\\', 盤符
   dir: 'c:\\wamp', 目錄
   base: 'xx.png',  文件名
   ext: '.png', 擴(kuò)展名
   name: 'xx'   文件，不含擴(kuò)展名
}

片段合并join

path.join('磁盤路徑1','磁盤路徑2'，'磁盤路徑n')

__dirname 魔術(shù)變量 返回當(dāng)前文件所在的磁盤路徑

片段合并 resolve

path.resolve('磁盤路徑1','磁盤路徑n')

合并磁盤片段,右到左找根，左到右拼接，沒有找到根，以當(dāng)前文件路徑為根,

對比join來說，不需要__dirname 這個魔術(shù)變量

multer中間件

multer 接受 form-data編碼數(shù)據(jù),所有要求前端攜帶時注意一下，如：

<input type=file enctype="multipart/form-data" name="fieldname",

使用

//1 引入
let multer  = require('multer');
//2 實(shí)例化  
let objMulter = multer({ dest: './upload' }); //dest: 指定 保存位置（存到服務(wù)器)
//安裝中間件， 
app.use(objMulter.any());  //允許上傳什么類型文件,any 代表任何類型

中間件擴(kuò)展了req請求體 req.files

app.get('/reg',(req,res)=>{
  req.files
})

? fieldname: 表單name名
? originalname: 上傳的文件名
? encoding： 編碼方式
? mimetype: 文件類型
? buffer: 文件本身
? size：尺寸
? destination: 保存路徑
? filename： 保存后的文件名 不含后綴
? path： 保存磁盤路徑+保存后的文件名 不含后綴

后端渲染

通常根據(jù)后端返回的json數(shù)據(jù)，然后來生成html被稱為前端渲染，而后端渲染是后端把json與html結(jié)合渲染好后返回到瀏覽器，沒前端什么事了

模板引擎

無論前后誰來渲染頁面，都會用到模板引擎，前端渲染頁面實(shí)際上是操作dom，后端渲染頁面是把數(shù)據(jù)和html字符拼接后丟給瀏覽器

引擎 前端 后端
angularJs √ ×
vue/mustach √ √
react √ √
angularTs/mustach √ √
jade/pug × √
ejs × √
jquery + art-template √ ×
handlerbars √ ×

jade

原理：fs抓取前端靜態(tài)頁面 + jade + 數(shù)據(jù) -> 返回send(data) -> 瀏覽器

特點(diǎn)：侵入式，強(qiáng)依賴

使用

let jade = require('jade')
let html = jade.renderFile('jade模板文件'，{數(shù)據(jù)}，{pretty:true});  //返回字符

jade模板文件語法

父子要縮進(jìn)
屬性： 標(biāo)簽(key=value,key2=value)
內(nèi)容: 標(biāo)簽 內(nèi)容

其他擴(kuò)展

ejs

原理：fs抓取前端靜態(tài)頁面 + ejs + 數(shù)據(jù) -> 返回send(data) -> 瀏覽器

特點(diǎn)：非侵入式，溫和，弱依賴

使用

let ejs = require('ejs')
ejs.renderFile('ejs模板文件',{要合并到html數(shù)據(jù)},回調(diào)(err,data))

err：錯誤，null代表沒有錯誤

data: 渲染后的字符|流

ejs模板 ： 后綴名為ejs的html文件

ejs模板文件語法

  • ejs 結(jié)構(gòu)就是html
  • 輸出: <%= 數(shù)據(jù)名|屬性名|變量名 + 表達(dá)式 %>
  • 語句： <% 語句 %> 需要被<% %> 包裹
  • 非轉(zhuǎn)義輸出: <%- 數(shù)據(jù)名|變量名 + 表達(dá)式 %> 就是標(biāo)簽不會被轉(zhuǎn)成符號gt等
  • 載入公共：<%- include('./hd.ejs',{數(shù)據(jù)}) %> //注意有個-

其他擴(kuò)展

eg：條件渲染

?

 <% if(bl){ %>
    <nav>菜單1</nav>
<% }else{ %>
    <nav>菜單2</nav>
<% } %>

列表渲染  

     <ul>
        <% for(var i=0;i<list.length;i++){ %>
            <li>
                <a href="<%= list[i].href %>">
                    <%= list[i].des %>
                </a>
            </li>
        <% } %>
    </ul>

多引擎管理

把多個模板引擎用在一個后端應(yīng)用中，統(tǒng)一他們的用法，綁定到res、req身上

安裝+配置

npm i consolidate ejs jade -S

注意: ejs jade 等多個引擎需要安裝，但無需引入

app.js

//中間件配置
app.set('view.engine','html');  //模板最終  輸出類型設(shè)置
app.set('views','./views');     //引擎模板目錄設(shè)置

app.engine('html',consolidate.ejs); //輸出與引擎匹配
app.engine('css',consolidate.jade); //輸出與引擎匹配

//渲染
app.get('xxx',(req,res)=>{
  res.render('模板文件名要加后綴',{要渲染的數(shù)據(jù)}) //整合頁面和數(shù)據(jù)，完成渲染，發(fā)往瀏覽器,并結(jié)束響應(yīng)
})

路由

告訴你去哪，對于前端，主要是導(dǎo)向告訴瀏覽器應(yīng)該去哪，對于后端，可以理解為一個子服務(wù)，一個路由就是一個小的服務(wù)(server/app)，處理一個接口

配置和使用

/routes/xx.js

// 1. 創(chuàng)建路由
let router = express.Router(); 

//2 路由處理響應(yīng)
router.響應(yīng)API(地址, 處理函數(shù))

//3. 導(dǎo)出路由
module.exports = router;

/app.js主服務(wù)

//安裝路由
app.use('地址',router);

當(dāng)需要嵌套使用時 /routes/xx.js

//字路由里安裝路由 嵌套
router.use('地址',子router) 

//截獲當(dāng)前路由下的部分公共業(yè)務(wù)
router.all('*',當(dāng)前router路由下以及所有子路由的驗(yàn)證工作) //需要next 延續(xù)
all出現(xiàn) 的位置很重要，all的上方的路由截獲不到，只能截獲all一下的路由

主路由的地址對應(yīng)子路由的根

如：app.js :/api/user ~~ user.js: /

如: app.js: /api/user/add ~~ user.js: /add

作業(yè)

實(shí)現(xiàn)jquery項(xiàng)目當(dāng)中，自動登錄，注冊時頭像的上傳，接口邏輯利用路由實(shí)現(xiàn)

數(shù)據(jù)庫

mysql

關(guān)系數(shù)據(jù)庫，二維表，不存在子表

sql語句

建庫

CREATE DATABASE  `2017-12-6` DEFAULT CHARACTER SET armscii8 COLLATE armscii8_general_ci;

建表

CREATE TABLE  `2020-12-6`.`user` (
                    `name` VARCHAR( 32 ) NOT NULL ,
                    `age` INT( 3 ) NOT NULL ,
                    `address` VARCHAR( 128 ) NOT NULL
                    ) ENGINE = INNODB

增

INSERT INTO 表 (字段列表) VALUES(值列表)
INSERT INTO user (name,age,address) VALUES('蘇菲',38,'外灘18號')

刪

DELETE FROM 表 WHERE 字段名=值
DELETE FROM user WHERE name='alex'

改

UPDATE 表 SET 字段名=值 WHERE 字段名=值
UPDATE user set name='sufei' WHERE name='蘇菲'

查

SELECT ? FROM 表
SELECT * FROM user  查所有

node + mysql客戶端

安裝+引入

npm install mysql -S
var mysql = require('mysql');

創(chuàng)建庫鏈接

var connection = mysql.createConnection({
  host     : 'localhost',//主機(jī)名
  user     : 'me',
  password : 'secret',
  database : 'my_db'//庫名
});
 
connection.connect();//連接數(shù)據(jù)庫

表操作

connection.query('SQL語句', function (error//錯誤, results//結(jié)果, fields//成功后的描述) {
  if (error) throw error;
  console.log('The solution is: ', results==  查詢array||  增刪改object);
});

關(guān)閉庫

connection.end();

mongodb

非關(guān)系型數(shù)據(jù)庫，又叫nosql，緩存型，使用場景多是解決大規(guī)模數(shù)據(jù)集合多重?cái)?shù)據(jù)種類

  1. 下載 安裝幫助

  2. 配置數(shù)據(jù)文件存儲位置：

找到安裝目錄C:\Program Files\MongoDB\Server\4.0\bin -> cmd回車-> mongod --dbpath c:\data\db

data和db目錄要手動創(chuàng)建

  1. 服務(wù)端啟動: 可選

找到安裝目錄C:\Program Files\MongoDB\Server\4.0\bin -> cmd回車-> mongod 回車

一般開啟會默認(rèn)啟動

  1. 客戶端啟動:

找到安裝目錄C:\Program Files\MongoDB\Server\4.0\bin -> cmd回車-> mongo 回車

  1. 環(huán)境變量 可選

為了在任意盤符下去都可以啟動 mongod服務(wù)端|mongo客戶端，把安裝目錄添加到環(huán)境變量

mysql vs mongodb

mysql mongoDb
database(庫) database(庫)
table(表) collection(集合)
row(一條數(shù)據(jù)) document(文檔)
column(字段) field(區(qū)域)
二維表，每次存到磁盤 json，存在緩存，關(guān)閉時存到磁盤 存儲方式

mongodb命令行操作 聲明式 | obj.api()

庫操作

查: show dbs
    db 查看當(dāng)前庫
建:  use 庫名     沒有建，有就切換

集合(表)操作

建：db.createCollection('表名',{配置})
  //配置：{size:文件大小,capped:true,max:條數(shù)|文檔數(shù)} capped定量
  //db.表(集合).isCapped() 返回 true/false 是否是定量
查：show collections / db.getCollectionNames()
刪：db.表|集合.drop()

文檔(row)操作

增

db.集合.save({}) //添加一條
db.集合.insert({})  //添加一條
db.集合.insertOne({}) //添加一條

db.集合.save([{},{}]) //多條
db.集合.insert([{},{}]) //多條
//insert  不會替換相同ID，會操作失敗
//save會對相同id的數(shù)據(jù)進(jìn)行替換

刪

db.集合.deleteOne({要刪數(shù)據(jù)條件描述}) //一條
db.集合.remove({},true)  //一條

db.集合.remove({要刪數(shù)據(jù)條件描述}) //多條
db.集合.remove({}) //清空表

改

db.集合.update({查詢條件},{替換條件},[插入false],[全替換false])

查詢條件

{age:22} age == 22
{age:{gt:22}} age > 22 {age:{lt:22}} age < 22
{age:{gte:22}} age>=22 {age:{lte:22}} age<=22
{age:{lte:122,gte:22}} age<=122 && age>=22
{$or:[{age:22},{age:122}]} 22 or 122
{key:value,key2:value2} value && value2
{name:/正則/}

替換條件

{set:{數(shù)據(jù)},inc:{age:-1}}

$inc 年齡遞減1

查

所有：db.集合.find(條件)
條數(shù): db.集合.find().count()

db.集合.find({條件},{指定要顯示列區(qū)域})

指定要顯示列區(qū)域

username:1 顯示這個區(qū)域，其他不顯示

username:0 不顯示這個區(qū)域，其他顯示

_id 是默認(rèn)顯示

排

db.集合.find().sort({key:1,key2:-1}) //升
db.集合.find().sort({key:-1}) //降

限定

db.集合.find().limit(number)  //限定
db.集合.find().skip(number)   //跳過
db.集合.findOne()//找第一個
db.集合.find().limit(1)  //查詢第一條

node + mongodb客戶端

安裝+引入

npm install mongodb -S
var mysql = require('mongodb');

實(shí)例化并連接

let mongoCt = mongodb.MongoClient;
mongoCt.connect('協(xié)議://地址:端口',{ useUnifiedTopology: true }，回調(diào)(err,client)) 
//err 錯誤 client鏈接后的客戶端
//沒改的話，默認(rèn):mongodb://127.0.0.1:27017

鏈接庫和集合

let db = client.db('庫名')
let user = db.collection('集合名');

集合操作

//user.API()  集合操作  返回 對象

//增
    insertOne(對象數(shù)據(jù),(err,res)=>{})  //res = 對象  成功后返回的數(shù)據(jù) 
    insertMany(arr數(shù)據(jù),(err,res)=>{}) //res = 對象  成功后返回的數(shù)據(jù) 
    //res.result.n 結(jié)果  ok 狀態(tài)
    //res.ops內(nèi)容  數(shù)組
    //result.insertedId 插入后的id

//刪:
  deleteOne({條件},(err,result)=>{})

//改:
  updateOne({條件},{更新后},(err,res)=>{})
  updateMany({條件},{更新后},(err,res)=>{})
  updateMany({條件},{更新后},{配置},(err,res)=>{})
    //配置: upsert:true 未找到的時候是否插入    projection:true 是否進(jìn)行全局替換
    //更新后：替換條件{$set:{數(shù)據(jù)},$inc:{age:-1}} 比如說
    eg：     user.updateMany({
                age:{$gt:16}
            },{
                 $set:{address:'人民公園',fans:111}
            },{
            upsert:false,//沒找到，是否把a(bǔ)ddress插入成新數(shù)據(jù)
             projection:true//讓什么顯示，true全部顯示，projection:{key:1}讓key顯示，0為不顯示
             },(err,result)=>{})

//查:
  user.find({條件},{skip:1,limit:1,projection:{key:1}},(err,result)=>{result=對象})
  user.find({條件},{projection:{key:0}}).toArray((err,result)=>{reulst==arr})
  user.countDocuments((err,num)=>{num返回?cái)?shù)量})
    skip 跳過第一個      projection:{key:1} 使key這個鍵顯示，當(dāng)設(shè)置為0的時候讓他不顯示

//排
  user.find(..).sort({key:-1}).toArray..
  user.find({},{projection:{},sort:{key:-1}}).toArray..

關(guān)閉庫

client.close()

node + mongoose

一款mongodb客戶端 官網(wǎng) 中文

可視化客戶端

Express生成器

應(yīng)用程序生成器、腳手架 、命令行工具、自動搭建項(xiàng)目環(huán)境的，無需手動

安裝

npm install express-generator -g

驗(yàn)證

express -h

生成環(huán)境

express -e 目錄 | . 
    // . 當(dāng)前目錄創(chuàng)建 
    //-e 需要ejs模板引擎
    //express -f  強(qiáng)制在非空目錄下創(chuàng)建
cd 目錄
npm install         //安裝依賴包
npm start    
node ./bin/www

擴(kuò)展

項(xiàng)目

定義數(shù)據(jù)字典

也就是數(shù)據(jù)庫設(shè)計(jì)，有了數(shù)據(jù)結(jié)構(gòu)，后端才知道如何存儲，前端才知道如何渲染，有條不成文的規(guī)定，數(shù)據(jù)結(jié)構(gòu)有前端說了算，請求姿勢（api分格）后端說了算，最終老大說了算

數(shù)據(jù)結(jié)構(gòu)

q關(guān)鍵字篩選

banner： [
    { 
      "_id" : xx, 
      "title" : "1", 
      "sub_title" : "1", 
      "banner" : "xxxx", 
      "time":234234,
      "detail" : { 
        "auth" : "", 
        "content" : "<p>xxx<p>", 
        "icon" : "/upload/banner/9d4083b4f1d28a6c0fb4c463526790eb.jpg" 
      },
    }
  ]
product: 
  { 
    "_id" : xx, 
    "title" : "1_", 
    "des" : "2", 
    "time":234234,
    "detail" : { 
      "auth" : "4", 
      "content" :"<p>3</p>", 
      "auth_icon" : "/upload/user/xxx.jpg" 
    } 
  }
user:   
  { 
    "_id" : xx, 
    "username" : "alex", 
    "password" : "alex123", 
    "follow" : "100", 
    "fans" : "200", 
    "nikename" : "九叔_", 
    "icon" : "/upload/968a3b7218ee744931276a64c9b7ea01.png", 
    "time" : 1551620448550 
  }
super:
  { 
    "_id" : xx, 
    "username" : "admin", 
    "password" : "admin123", 
    "icon" : "/img/avatar-5.jpg" 
  }

請求方式 RESTful API

增 POST /user  body中包含數(shù)據(jù)
刪 DELETE /user/1 | user?id=1 根據(jù)ID刪除用戶信息
改 PUT|PATCH /user body中包含數(shù)據(jù) PUT覆蓋修改 PATCH局部修改
查 GET /user/1 | user?id=1 GET  根據(jù)用戶id查詢用戶數(shù)據(jù) 沒有id查詢所有 /1 返對象 id=1 返回?cái)?shù)組>對象

分頁  _page 第幾頁， _limit一頁多少條
  GET /user?_page=7  不傳遞默認(rèn)0條
  GET /user?_page=7&_limit=20 不傳遞默認(rèn)10條
排序 _sort設(shè)定排序的字段 _order設(shè)定排序的方式（默認(rèn)升序）
  GET /user?_sort=views&_order=asc
  GET /user/1/comments?_sort=votes&_order=asc
  GET /user?_sort=title,views&_order=desc,asc   多個字段排序
任意切片數(shù)據(jù) _start 開始不包含  _end 結(jié)束包含
  GET /users?_start=20&_end=30
  GET /user/1/comments?_start=20&_end=30
  GET /user/1/comments?_start=20&_limit=10
全文檢索    GET /user?q=九哥

搭建開發(fā)環(huán)境

引入各種包、各種中間件、做好目錄規(guī)劃

bin  |-
     www 啟動文件
utils|- 全局公共
  |- douban|mgd|mysql
config 全局配置
  |- global (_page,_limit,q,upload...)
  |- server (local,http,https)
public 資源托管
  |-admin 管理端
  |-template 用戶端
  |-upload
    |- banner|product|user
    |- product
      |- home|follow|column
routes 子服務(wù)，路由
  admin 管理端
    |- feedback
      |- success|error
    |- product
      |- add|del|check
    |- banner
      |- add|del|check
    |- user
      |- add|del|check
    |- home| product|banner|user
    |- islogin | login | reg | logout
  api 用戶端
    |- product (home/follow/column)
    |- banner
    |- user 
    |- login
    |- reg
    |- logout
  proxy 代理
    |- douban
    |- ....
views 管理端模板 ejs 
  |- feedback
      |- success|error|app_error
  |- ... 結(jié)構(gòu)同 admin 管理端
  |- common
    |- header|footer|slider|crumb|toolbar|paging

用戶端API

用戶密碼入庫時加密

let bcrypt = require('bcrypt')

加密： var hash = bcrypt.hashSync(用戶傳過來的明文密碼, 加鹽數(shù)); 

校驗(yàn):  bcrypt.compareSync(用戶傳過來的明文密碼, hash); // true|false

短信驗(yàn)證

  1. 開通短信服務(wù)

    1. 登錄阿里云賬號->進(jìn)入

  2. 設(shè)置簽名管理

    1. 添加 簽名、模板 進(jìn)入
    2. 沖1塊錢，簽名是收費(fèi)的

  3. 申成短信服務(wù)器接口的node代碼

    1. 進(jìn)入

    2.               PhoneNumbers： 電話
                  SignName： 簽名
                  TemplateCode： 模板id
                  accessKeyId： 阿里云賬號->accessKey管理
                  accessKeySecret： 阿里云賬號->accessKey管理

管理端API

登錄注銷

登錄接口：/admin/login/submit

實(shí)現(xiàn)
var express = require('express');
var router = express.Router();
var mgdb = require('../../common/mgdb')

router.get('/', function(req, res, next) {
  res.render('login',{});
});
router.post('/submit', function(req, res, next) {
  let {username,password} = req.body;

  mgdb(
    {collection:'admin'},
    ({collection,client})=>{
      collection.find(
        {username,password},
        {
          projection:{_id:0}
        }
      ).toArray((err,result)=>{
        if(!err && result.length>0){
          //種cookie , 留session
          req.session['username']=result[0].username;
          req.session['icon']=result[0].icon;

          res.redirect('/admin/home');
        }else{
          // res.redirect(跳轉(zhuǎn)地址==string)
          res.redirect('/admin/error?msg=登錄失敗,用戶或者密碼有誤')
        }
      })
    }
  )


});
module.exports = router;

//======================================

注銷接口：/admin/reg

實(shí)現(xiàn)
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  // req.session=null;
  // req.session.username=undefined
  delete req.session.username;//刪除session 混淆 cookie
  delete req.session.icon;

  res.redirect('/admin/login');
});

module.exports = router;

===============================
  
自動登錄
app.all('/admin/*',require('./routes/admin/islogin'))

islogin

module.exports=(req,res,next)=>{
  if(!req.session['username']){
    res.redirect('/admin/login')
  }else{
    //處理公共參數(shù)
    let start = req.query.start ? req.query.start - 1 : require('../../config/global').page_start - 1;
    let count = req.query.count ? req.query.count - 0 : require('../../config/global').page_num - 0;
    let q = req.query.q ? req.query.q : require('../../config/global').q;
    let rule = req.query.rule ? req.query.rule : require('../../config/global').rule;
    let _id = req.query._id;
    let dataName = req.query.dataName;
    let page_header = dataName;
    let active = dataName;

    res.params = {start,count,q,rule,dataName,page_header,active,_id}
    res.user_session={username:req.session.username,icon:req.session.icon}
    next();//交給app.use后續(xù)響應(yīng)處理
  }
};

添加

接口: /admin/product/add?dataName=xx

實(shí)現(xiàn)

var express = require('express');
var router = express.Router();
var pathLib = require('path')
var uploadUrl = require('../../../config/global').upload.product
var fs = require('fs');
var mgdb = require('../../../common/mgdb')

router.get('/', function(req, res, next) {

  //1.必傳參數(shù)
  let dataName = req.query.dataName;
  if(!dataName){
    res.redirect('/admin/error?msg=dataName為必傳參數(shù)')
    return;
  }

  //公共數(shù)據(jù) start=1|q=''|rule=''|page_header|dataName|user_session
  let common_data={
    ...res.user_session,
    ...res.params,
    page_header:dataName+'添加',
  }

  res.render('product/add',common_data);
});

router.post('/submit', function(req, res, next) {

  //1.必傳參數(shù)
  let dataName = req.body.dataName;
  if(!dataName){
    console.log(1)
    res.send('/admin/error?msg=dataName為必傳參數(shù)')
    return;
  }

  //2.整理公共數(shù)據(jù)|庫數(shù)據(jù)
  let {title,content,des,auth} = req.body;
  let time = Date.now();//添加時間
  
  //multer拆出上傳圖片,需要解決沒有上傳頭像
  let auth_icon = req.files.length ? uploadUrl + req.files[0].filename + pathLib.parse(req.files[0].originalname).ext : '';
  
  if(auth_icon){
    fs.renameSync(
      req.files[0].path,
      req.files[0].path+pathLib.parse(req.files[0].originalname).ext
    )
  }else{
    auth_icon = '/upload/noimage.png';
  }


  //3.寫庫 + 跳轉(zhuǎn)

  mgdb({
    collection:dataName
  },({collection,client})=>{
    collection.insertOne({
      title,des,time,detail:{auth,content,auth_icon}
    },(err,result)=>{
      if(!err && result.result.n){
        let io=require('../../../bin/www');
        io.emit('update_product', {data:result.ops[0]})

        res.send('/admin/product?dataName='+dataName+'&start=1')
      }else{
        res.send('/admin/error?msg=集合操作錯誤')
      }
      client.close();
    })
  })

});

module.exports = router;

富文本框使用

注意jq庫沖突： 要使用富文本框提供的jquery-3.2.1.slim.min
問題： slim.min沒有$.ajax
解決： 使用jquery,禁用slim.min

圖片上傳FormData混合提交 流文件與普通表單混合

form_data = new FormData() | new FormData(表單本身)
form_data.append(key,value) 通過req.body獲取
value 可以是file：
<input type="file" name="file2" id="file2" />
formData.append("file2", $('#file2')[0].files[0]);
通過multer的req.files獲取

$.ajax({
  contentType: false,//不設(shè)置編碼類型,在進(jìn)行文件流與普通字符串混合上傳的時候，需要設(shè)置為false
    processData: false,//不進(jìn)行數(shù)據(jù)處理
})

后端需要處理未傳圖（req.files空)

js抓取ejs變量
form_data.append('dataName',"<%=dataName%>");
ajax提交后，nodejs需返回跳轉(zhuǎn)地址，由前端跳轉(zhuǎn)
子節(jié)點(diǎn)排序
.sort({'detail.time':-1,xx:oo})

刪除

接口: /admin/product/del?dataName=xx&_id=xx&start=2&count=2&q=b&rule=_id

實(shí)現(xiàn)

var express = require('express');
var router = express.Router();
var mgdb = require('../../../common/mgdb');

router.get('/', function(req, res, next) {
  //1.必傳參數(shù)
  let {dataName,_id,start,count,q,rule} = res.params;
  if(!dataName || !_id){
    res.redirect('/admin/error?msg=dataName和_id為必傳參數(shù)')
    return;
  }
  
  //3. 寫庫
  mgdb({
    collection:dataName
  },({collection,client,ObjectID})=>{
    collection.deleteOne({
      _id:ObjectID(_id)
    },(err,result)=>{
      //4. 渲染頁面|跳轉(zhuǎn)頁面
      if(!err && result.result.n){
        res.redirect('/admin/product?dataName='+dataName+'&start='+(start+1)+'&count='+count+'&q='+q+'&rule='+rule)
      }else{
        res.redirect('/admin/error?msg='+dataName+'操作錯誤')
      }
      client.close();
    })
  })
  
});

module.exports = router;

ID操作注意
var ObjectId = require('mongodb').ObjectId;
id = ObjectId(req.query.id); 此時的id才是ajax傳過來的id,才能與數(shù)據(jù)庫對照

修改

接口： /admin/product/check?dataName=xx&_id=xx&start=2&count=2&q=b&rule=_id

實(shí)現(xiàn)

var express = require('express');
var router = express.Router();
var mgdb = require('../../../common/mgdb')
let pathLib = require('path');
let fs = require('fs');
let uploadUrl = require('../../../config/global').upload.product;

router.get('/', function (req, res, next) {
  //1.必傳參數(shù)
  let {dataName,_id,start} = res.params;
  if (!dataName || !_id) {
    res.redirect('/admin/error?msg=dataName和_id為必傳參數(shù)')
    return;
  }

  //公共數(shù)據(jù) 
  let common_data = {
    ...res.user_session,
    ...res.params,
    page_header: dataName + '修改',
    start:start+1
  }

  //找到這條數(shù)據(jù)
  mgdb({
    collection: dataName
  }, ({ collection, client, ObjectID }) => {
    collection.find({
      _id: ObjectID(_id)
    }).toArray((err, result) => {
      
      if (!err && result.length>0) {
        let data = {
          ...common_data,
          page_data: result[0]
        }
        console.log(data)
        res.render('product/check', data);
      } else {
        res.redirect('/admin/error?msg=' + dataName + '操作錯誤')
      }
      client.close();
    })
  })


});

router.post('/submit', function (req, res, next) {
  //1.必傳參數(shù)
  let dataName = req.body.dataName;
  let _id = req.body._id;
  if (!dataName || !_id) {
    res.redirect('/admin/error?msg=dataName和_id為必傳參數(shù)')
    return;
  }

  //可選參數(shù)
  let start = req.body.start ? req.body.start - 0 : require('../../../config/global').page_start
  let count = req.body.count ? req.body.count - 0 : require('../../../config/global').page_num
  let q = req.body.q ? req.body.q : require('../../../config/global').q;
  let rule = req.body.rule ? req.body.rule : require('../../../config/global').rule;

  //2.整理公共數(shù)據(jù)|庫數(shù)據(jù)
  let {title,content,des,auth,old_auth_icon} = req.body;
  //old_auth_icon 添加是保存的圖
  
  //multer拆出上傳圖片,需要解決沒有上傳頭像
  let auth_icon = req.files.length ? uploadUrl + req.files[0].filename + pathLib.parse(req.files[0].originalname).ext : '';
  
  if(auth_icon){
    fs.renameSync(
      req.files[0].path,
      req.files[0].path+pathLib.parse(req.files[0].originalname).ext
    )
  }else{
    auth_icon = old_auth_icon;
  }


  //3.寫庫 + 跳轉(zhuǎn)

  mgdb({
    collection:dataName
  },({collection,client,ObjectID})=>{
    collection.updateOne({
      _id:ObjectID(_id)
    },{
      $set:{title,des,detail:{auth,content,auth_icon}}
    },(err,result)=>{
      if(!err && result.result.n){
        res.send('/admin/product?dataName='+dataName+'&start='+start+'&count='+count+'&q='+q+'&rule='+rule)
      }else{
        res.send('/admin/error?msg=集合操作錯誤')
      }
      client.close();
    })
  })
});

module.exports = router;

后端需要處理未傳圖（req.files空)
前端修改時抓取庫圖地址（渲染用），提交時傳遞接收到的庫圖和本地圖，服務(wù)器優(yōu)先抓取本地圖
修改時刪除之前的圖片fs.unlink
ajax提交后，nodejs需返回跳轉(zhuǎn)地址，由前端跳轉(zhuǎn)

檢索|排序

接口: /admin/product?dataName=home&start=2&count=2&q=b&rule=detail.time

實(shí)現(xiàn)
var express = require('express');
var router = express.Router();
var mgdb = require('../../common/mgdb')

router.get('/', function (req, res, next) {

  let {dataName,q,rule,start,count} = res.params;
  if (!dataName) {
    res.redirect('/admin/error?msg=dataName為必傳參數(shù)')
    return;
  }


  let common_data = {
    ...res.user_session, 
    ...res.params, 
    page_header: dataName + '列表',
    start: start + 1,
    api_name:'product'
  }

  mgdb({
    collection: dataName
  }, ({ collection, client }) => {
    collection.find(
      q ? { title: eval('/' + q + '/g') } : {},
      {
        projection: {
          _id: 1, title: 1
        },
        // sort: rule? {[rule]:-1} : {'detail.auth':-1}
        sort: rule ? { [rule]: -1 } : { 'time': -1 } //排序條件默認(rèn)按時間排序
      }
    ).toArray((err, result) => {
      let checkResult = result.slice(start * count, start * count + count)//提取要分頁的數(shù)據(jù)
      let data = {
        ...common_data,
        page_data: checkResult,
        page_count: Math.ceil(result.length / count)//計(jì)算總頁數(shù)
      }
      res.render('product', data);
      client.close();
    })
  })

});

router.use('/add', require('./product/add'));
router.use('/del', require('./product/del'));
router.use('/check', require('./product/check'));

module.exports = router;

查詢 eval('/'+ q +'/g')
排序 sort:rule ? {[rule]:-1} : {'detail.time':-1}
排序關(guān)鍵字: (標(biāo)題title|時間:detail.title)
分頁: 取所有，挑出對應(yīng)頁數(shù)，返回給瀏覽器

接口文檔編寫

為了以后前端使用方便，把a(bǔ)pi的使用方式，或者說請求方式做成文檔，文檔可以是，word，pdf

擴(kuò)展

代理

前端通過ajax訪問第三方接口時，會出現(xiàn)瀏覽器的跨域行為，可以通過后端代理繞過，前端只需要訪問我方后端接口，我方后端去請求第三方接口，瀏覽器和我方后端同域，這樣繞開瀏覽器的跨域限定

豆瓣的請求姿勢

hostname:'douban.uieee.com',//主機(jī)名
port: 443,//端口
path:'/v2/movie/top250?start=3&count=1',
method:'get'

聚合的請求參數(shù)

hostname:'v.juhe.cn',
// port:80,
path:'/toutiao/index?type=&key=55f8053eba54dab5a301a00f45523164',
method:'GET'

我方后端請求

let http[s]=require('http[s]')

options={
  hostname:'api.douban.com',
  port:443,
  path:'/v2/movie/top250?count='+req.query.count,
  method:'GET'
};

//發(fā)送http[s]請求
let reqHttp = http[s].request(配置項(xiàng),回調(diào)(響應(yīng)對象resHttp)){ //返回請求對象reqHttp
  resHttp 響應(yīng)對象
  resHttp.statusCode 狀態(tài)碼  200 OK
  resHttp.headers 獲取響應(yīng)頭信息
  resHttp.setEncoding('utf-8') 設(shè)置編碼方式
  resHttp.on('data/end',fn)  ->send給前端
});

reqHttp //請求對象
reqHttp.on('error',(err)=>{console.log(err)});  //監(jiān)聽請求失敗信息
reqHttp.end();//請求結(jié)束

正向代理 VS 反向代理

有一臺服務(wù)器出現(xiàn)在客戶端和真實(shí)服務(wù)器之間，這臺服務(wù)器叫代理服務(wù)器，他可能兩端都有可能出現(xiàn)

正向代理（客戶端代理) 反向代理(服務(wù)端代理)
目標(biāo) 幫客戶端訪問其無法訪問的服務(wù)器 幫服務(wù)器做負(fù)載均衡，安全防護(hù)等
位置 客戶端架設(shè) 服務(wù)器架設(shè)
知曉 真實(shí)服務(wù)器不知道客戶端是誰 客戶端不知道真實(shí)服務(wù)器是誰
場景 vue、react的開發(fā)環(huán)境中架設(shè)，瀏覽器端安裝代理軟件 機(jī)器集群中部署一個反向代理服務(wù)器ngnix

socket.io

介紹

Web領(lǐng)域的實(shí)時推送技術(shù)，也被稱作Realtime技術(shù)。這種技術(shù)要達(dá)到的目的是讓用戶不需要刷新瀏覽器就可以獲得實(shí)時更新。它有著廣泛的應(yīng)用場景，比如在線聊天室、在線客服系統(tǒng)、評論系統(tǒng)、WebIM等。

原理

雙向通信,前端H5api （WebSocket） + 后端net模塊

服務(wù)端配置

修改www

const SOCKETIO = require('socket.io');//創(chuàng)建socket實(shí)例
const io = SOCKETIO.listen(server);//監(jiān)聽http實(shí)例，未來3000端口下的http請求，會觸發(fā)socket
module.export = io;//寫在最后

注意： www 不熱重啟，不檢查

客戶端配置

html注入客戶端庫

<script src="/socket.io/socket.io.js"></script>
<script>
    連接服務(wù)器：socket = io('http://localhost:3000');
</script>

服務(wù)端推送

//完成一次添加工作后↓
let io = require('../../../bin/www'); //require要在需要時再引入
io.emit('mess_type',{data:'服務(wù)端的推送數(shù)據(jù)')//推送

客戶端接收

<script src="/socket.io/socket.io.js"></script>
<script>
  //連接服務(wù)器
    var socket = io('http://localhost:3000');
  socket.on('new_movie',(data)=>{
    console.log('首頁_客戶端收到',data)
  })
</script>

客戶端推送到客戶端

客戶端(未指定消息|指定的消息)->服務(wù)器(廣播|私信給指定)->客戶端

聊天室思想

客戶端(未指定消息|指定的消息)->服務(wù)器(廣播|私信給指定)->客戶端

服務(wù)端API

檢測客戶端連接：io.on('connection', (socket) =>{}) 回調(diào)函數(shù)接收客戶端socket
接受:socket.on('消息名稱',(data)=>{}) data=接受到的消息
廣播: io.emit('消息名稱', {數(shù)據(jù)});

檢測客戶端下線:    socket.on('disconnect',(data)=>{})

接受私信:
socket.on('消息名稱',(toUserName,data,callback)=>{})
                    toUserName==目標(biāo)用戶 callback==給發(fā)送端的回調(diào)
發(fā)私信:    接受消息的socket.emit('消息名稱',{數(shù)據(jù)})
                    發(fā)私信 ->      socket   == onlineUsers[toUserName]
注意,data數(shù)據(jù) 里面不可以包含socket對象,發(fā)往客戶端,量太大

客戶端API

發(fā)送未指定消息:    socket.emit('消息名稱',{到服務(wù)器的數(shù)據(jù)})
發(fā)送私息:   socket.emit('消息名稱',toUserName,{到服務(wù)器的數(shù)據(jù)},(由服務(wù)器返回的數(shù)據(jù))=>{})
接受消息:   socket.on('消息名稱',(data)=>{})

跨域

有時，前端和后端的工程文件不在同一個域，也會出現(xiàn)跨域，一下是解決方案

后端解決

部分接口允許

要允許的接口內(nèi)部
res.setHeader('Access-Control-Allow-Origin', req.headers.origin)

所有接口允許

let core = require('core');

app.use(cors({
  //允許所有前端域名
  "origin": ["http://localhost:8001","http://localhost:5000","http://localhost:8080"],  
  "credentials":true,//允許攜帶憑證
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", //被允許的提交方式
  "allowedHeaders":['Content-Type','Authorization']//被允許的post方式的請求頭
}));

前端解決

jsonp

瀏覽器裝插件

環(huán)境做代理（webpack）

異步流程控制

有時前端的請求在后端處理時，后端要多次請求庫時，用的上

安裝：npm i async -S

串行無關(guān)聯(lián)

多個異步依次請求，請求之間不依賴

async.series([fn1(callback),fn2(callback)],處理函數(shù)(err,result))
            //callback(err,數(shù)據(jù))->callback(null,'one')
            //花費(fèi)時間是：fn1+fn2

async.series({xx:fn(callback),xx:fn(callback)},處理函數(shù)(err,result))
            //花費(fèi)時間是：fn1+fn2

并行無關(guān)聯(lián)

多個異步同時請求，請求之間不依賴

async.parallel(數(shù)組|對象,回調(diào)(err,result))  √

async.parallel([fn1(callback),fn2(callback)],處理函數(shù)(err,result))
                callback(err,數(shù)據(jù))->callback(null,'one')
async.parallel({xx:fn(callback),xx:fn(callback)},處理函數(shù)(err,result))
            //花費(fèi)時間是：用時最多的那個fn

串行有關(guān)聯(lián)

多個異步依次請求，請求之間依賴

async.waterfall(數(shù)組|對象,回調(diào)(err,result)) √
async.waterfall(
  [fn1(callback){callback(null,data)},fn2(data,callback)],
  處理函數(shù)(err,result)
)
        //result 接受最后一個函數(shù)傳遞過來的一個參數(shù)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容