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

語言: CN / TW / HK
時間 2023-03-29 11:15:05

什麼是服務端

  • 服務端，又稱後端、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 端要隨時準備接收各種惡意攻擊，前端則少很多
  • 如：越權操作，資料庫攻擊等

叢集和服務拆分

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