作為前端應該瞭解的後端常識
什麼是服務端
- 服務端,又稱後端、server 端
- 前端是使用者可見、可操作的部分,如樹枝樹葉
- 服務端為前端提供 “支撐”和 “營養”,如樹根
什麼是前端
- 狹義:網頁
- 廣義:各種客戶端,如 App、PC 客戶端等
服務端的職責
- 提供前端要展示的資料
- 接收前端要提交的資料
- 儲存資料(軟體公司非常看重資料,會收集各種資料)
服務端的表現形式
- 前端 ajax 要呼叫某個介面,比如使用 get 請求獲取資料,post 請求提交資料
- 這個介面,就是服務端提供的
前後端互動通訊-HTTP協議
- 超文字傳輸協議
Hyper Text Transfer Protocol
- 規定了客戶端和服務端如何通訊
- 是網際網路世界資料通訊的標準和基石
HTTP - 通用
- url:後端介面的地址,即前端 Ajax 請求時的地址
- method:請求方法,如 GET POST PUT DELETE 等
- 狀態碼:介面返回的狀態,如 200 302 404 500 等
HTTP - Request
- Request:請求,前端傳送給服務端
-
- Request Body:請求是傳送給後端的資料
- Request Content-type:傳送資料的格式,如 JSON 格式
- ...
HTTP - Response
- Response:返回/響應,服務端返回給前端
-
- Response Body:後端返回給前端的資料
- Response Content-type:返回資料的格式,如 JSON 格式
演示一個 Get 請求
演示一個 POST 請求
一個網頁可能對應多個服務端
一個網頁需要載入的資源可能有
- html
- css
- js
- 圖片
- 音視訊
- 業務資料
不同資源可能來自不同的域名
- html 可能來自一個單獨的域名
- js css 可能來自一個獨立的域名
- 資料可能來自一個獨立的域名
- 不同域名可對應不同服務端
服務端主要也可分為做靜態服務(處理html css js 圖片等)和資料服務(提供資料介面)
服務端如何處理並返回資料
- 定義前端請求的 url 規則 - 路由(前端 Ajax 請求需要 url)
- Request 獲取資料,用 Response 返回資料
-
- 也可簡稱為 req 和 res
- 通過 Request 可獲取:method url body
- 通過 Response:可設定:狀態碼,Content-type,body
- 讀取和儲存資料 - 資料庫
-
- 資料庫,專職做資料的儲存和查詢
- 資料庫是一個獨立的系統,不是 nodejs 專屬的
- 基本操作:查詢、新增、刪除、修改、排序等都需要查詢條件
路由(Router)是什麼
- 服務端的入口規則
- 需要和前端約定
- 就像古代的城門,城門有特定的入口進入,每個入口有特定的功能
- 後端定義 GET /api/list 路由 => 前端 axios.get( /api/list' )
- 後端定義 POST /api/create 路由 => 前端 axios.post( '/api/creaate' , {..)
- 路由定義了傳送的規則,url 則是具體傳送的形式
路由包含什麼
- 定義 method, 如 GET/POST 等
- 定義 url 規則,如 /api/list 和 /api/create
- 定義輸入(Request body)和輸出(Response body)格式
配置 Nodejs 環境
進入 Node 官網安裝:
安裝完成後使用以下命令檢視是否安裝完成:
node -v
npm -v
繼續安裝 nrm 管理包源:
npm i nrm -g
nrm ls
nrm use taobao
使用 nvm 管理 nodejs 多版本
- Mac OS,使用
brew install nvm
- windows , github 中搜索
nvm-windows
,有下載地址
使用 nvm
nvm list
檢視當前所有的 node 版本nvm install v16.10.0
安裝指定的版本nvm use —delete-prefix 16.10.0
切換到指定的版本
Nodejs 和 Javascript 的區別
Javascript
- 使用 ECMAScript 語法規範,外加 Web API(DOM 操作,BOM 操作,Ajax), 缺一不可
- 兩者結合,即可完成瀏覽器端的任何操作
- ECMAScript 定義了語法(變數定義、迴圈、判斷、函式、原型和原型鏈、作用域和閉包、非同步等),寫 javascript 和 nodejs 都必須遭守
Nodejs
- 使用 ECMAScript 語法規範,外加 nodejs API,缺一不可
- 處理 http,處理檔案等,具體參考:http://nodejs.cn/api-v16/
- 兩者結合,即可完成 server 端的任何操作
CommonJs
- 在 Nodejs 環境中,預設就支援模組系統,該模組系統遵循 CommonJS 規範
- 在 Nodejs 中一個 js 檔案就是一個模組
```js // index.js function add(a, b) { return a + b; }
function minus(a, b) { return a - b; }
// 匯出單個 module.exports = add; // 在別的檔案引入 // const add = require("index.js");
// 匯出多個 module.exports = { add, minus }; // 在別的檔案引入 // const { add, minus } = require("index.js");
// 直接引入npm包 // const _ = require("lodash"); ```
除錯
- 使用 vscode 自帶的斷點除錯
- package.json 加入
--inspect=9229
引數後啟動程式,輸入網址:chrome://inspect
,選擇其中對應程式 debugger 即可
後端開發和前端開發的區別
服務穩定性
- server 端可能會遭受各種惡意攻擊和誤操作
- 單個客戶端可以意外掛掉,但是服務端不能
考慮 CPU 和記憶體(優化、擴充套件)
- 客戶端獨佔一個瀏覽器,記憶體和 CPU 都不是問題
- server 端要承載很多請求,CPU 和記憶體都是稀缺資源
日誌記錄
- 前端也會參與寫日誌,但只是日誌的發起方,不關心後續
- server 端要記錄日誌、儲存日誌、分析日誌,前端不關心
安全
- server 端要隨時準備接收各種惡意攻擊,前端則少很多
- 如:越權操作,資料庫攻擊等
叢集和服務拆分
- 產品發展速度快,流量可能會迅速增加
- 如何通過擴充套件機器和服務拆分來承載大流量?
「其他文章」