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

語言: 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 端要隨時準備接收各種惡意攻擊，前端則少很多
  • 如：越權操作，數據庫攻擊等

集羣和服務拆分

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