作為前端應該瞭解的後端常識

語言: CN / TW / HK

什麼是服務端

  • 服務端,又稱後端、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"); ```

除錯

  1. 使用 vscode 自帶的斷點除錯
  2. package.json 加入 --inspect=9229 引數後啟動程式,輸入網址:chrome://inspect,選擇其中對應程式 debugger 即可

後端開發和前端開發的區別

服務穩定性

  • server 端可能會遭受各種惡意攻擊和誤操作
  • 單個客戶端可以意外掛掉,但是服務端不能

考慮 CPU 和記憶體(優化、擴充套件)

  • 客戶端獨佔一個瀏覽器,記憶體和 CPU 都不是問題
  • server 端要承載很多請求,CPU 和記憶體都是稀缺資源

日誌記錄

  • 前端也會參與寫日誌,但只是日誌的發起方,不關心後續
  • server 端要記錄日誌、儲存日誌、分析日誌,前端不關心

安全

  • server 端要隨時準備接收各種惡意攻擊,前端則少很多
  • 如:越權操作,資料庫攻擊等

叢集和服務拆分

  • 產品發展速度快,流量可能會迅速增加
  • 如何通過擴充套件機器和服務拆分來承載大流量?