自學(xué)app軟件開(kāi)發(fā)-MERN堆棧

2022-07-07

什么是堆棧？

從技術(shù)上講，堆棧是操作系統(tǒng)、工具、語(yǔ)言、數(shù)據(jù)庫(kù)系統(tǒng)、腳本語(yǔ)言、Web 服務(wù)器、框架和 API 等的集合，它們一起工作以創(chuàng)建完整的軟件解決方案。

根據(jù) Layman Guide，堆棧是軟件程序或技術(shù)的集合，它們協(xié)作以實(shí)現(xiàn)共同目標(biāo)，例如軟件開(kāi)發(fā)。它包括密切相關(guān)的軟件APP軟件，可以幫助工作流程，從而完成某些任務(wù)。

什么是 MERN 堆棧？

MERN 堆棧包括 MongoDB、Express、React 和 Node.js。MERN 堆棧是一個(gè)開(kāi)源的全棧 JavaScript 解決方案，用于快速輕松地開(kāi)發(fā)和部署全棧APP軟件。創(chuàng)建 MERN 是為了使APP軟件開(kāi)發(fā)盡可能簡(jiǎn)單。因此，MERN 的每個(gè)組件都服務(wù)于我們必須了解的特定目的。

MVC（模型視圖控制器）架構(gòu)

任何 Web 或移動(dòng)APP軟件都可以使用 3 層 MVC 架構(gòu)構(gòu)建，該架構(gòu)由三層組成——模型、視圖和控制器。

模型——這一層負(fù)責(zé)與數(shù)據(jù)庫(kù)相關(guān)的任務(wù)，例如檢索、存儲(chǔ)、更新和操作數(shù)據(jù)庫(kù)。

視圖 - 視圖層負(fù)責(zé)用戶交互。前端是指用戶在網(wǎng)頁(yè)上看到的按鈕、圖像、顏色和動(dòng)畫(huà)。在用戶界面中，它使來(lái)自模型層的數(shù)據(jù)可見(jiàn)。

控制器——該層管理視圖和模型之間的前后通信。它的工作是接受用戶請(qǐng)求，用模型層處理它們，并將結(jié)果發(fā)送回視圖層用于可視化部分。

MERN 堆棧的組件

1. MongoDB：獨(dú)立于平臺(tái)的

它是一個(gè)開(kāi)源、跨平臺(tái)的面向文檔的數(shù)據(jù)庫(kù)程序。它是一個(gè) NoSQL 數(shù)據(jù)庫(kù)，具有基于 JSON 文檔的模式（可選）。MongoDB 具有適應(yīng)性，其文檔模型在代碼中定義對(duì)象，從而可以輕松進(jìn)行數(shù)據(jù)操作。因?yàn)?MongoDB 的核心是分布式的，所以它具有水平擴(kuò)展和高可用性。

MongoDB 的特點(diǎn)是水平擴(kuò)展、高可靠性、端到端保護(hù)、管理工具和地理分散。

2. 后端框架（Express）

Express 是一個(gè) Node.js 后端 Web APP軟件框架，也稱為 Express.js。它具有許多使開(kāi)發(fā) Web APP軟件比使用 Node.js 更容易和更快的特性：

首先，Express 易于設(shè)置和定制。
其次，它有助于創(chuàng)建基于 HTTP 和 URL 的APP軟件路由。
第三，Express 包含幾個(gè)中間件組件來(lái)幫助完成額外的任務(wù)。
最后，Express 使在APP軟件中提供靜態(tài)資源和文件變得更加容易。

3. React：Library是一個(gè)前端開(kāi)發(fā)的第三方庫(kù)

為什么使用 ReactJs？因?yàn)樗?Facebook 發(fā)布的一個(gè)開(kāi)源免費(fèi)的前端 JavaScript 庫(kù)。它用于為交互式 Web APP軟件（用戶界面）制作用戶界面。它可以開(kāi)發(fā)移動(dòng)APP軟件和WebAPP軟件并管理視圖層。React 允許開(kāi)發(fā)人員創(chuàng)建封裝的段來(lái)維護(hù)其狀態(tài)并將它們集成以創(chuàng)建復(fù)雜的接口。使用 Node 時(shí)，React 也會(huì)在服務(wù)器上呈現(xiàn)。

4. Node.js 運(yùn)行環(huán)境

它是一個(gè)跨平臺(tái)的移動(dòng)應(yīng)用開(kāi)發(fā)平臺(tái)，后端的開(kāi)源 JavaScript 運(yùn)行環(huán)境。Node.js 是一個(gè) V8 引擎，用于在 Web 瀏覽器之外運(yùn)行 JS 代碼。Node.js 可用于為網(wǎng)頁(yè)創(chuàng)建獨(dú)特的內(nèi)容、收集表單數(shù)據(jù)、更改數(shù)據(jù)庫(kù)信息和管理服務(wù)器文件等。Node.js 不是為每個(gè)請(qǐng)求創(chuàng)建新線程，而是一次只運(yùn)行一個(gè)進(jìn)程。它還包括一組 I/O 原語(yǔ)，以防止 JS 代碼卡住。

MERN堆棧開(kāi)發(fā)的過(guò)程是什么？

如前所述，MERN 堆棧的每個(gè)元素都可以獨(dú)立使用；但是，開(kāi)發(fā)人員可以通過(guò)結(jié)合這些技術(shù)來(lái)創(chuàng)建高性能的 Web APP軟件。在本節(jié)中，我們將了解 MERN 堆棧的工作原理。

讓我們看一個(gè)插圖來(lái)幫助您理解整個(gè)機(jī)制。假設(shè)您已經(jīng)為服裝網(wǎng)站開(kāi)發(fā)了一個(gè)電子商務(wù)聊天機(jī)器人。客戶現(xiàn)在可以通過(guò) Web APP軟件購(gòu)買(mǎi) T 恤。由于網(wǎng)頁(yè)上的鏈接，用戶被引導(dǎo)到 T 恤頁(yè)面。但是，我們將如何從后端獲取數(shù)據(jù)？

用戶到達(dá)我們的 React 登錄頁(yè)面。
通過(guò)單擊該鏈接，用戶購(gòu)買(mǎi)了一件 T 恤。無(wú)需重新啟動(dòng)系統(tǒng)即可呈現(xiàn) T 恤頁(yè)面，因?yàn)樗菃雾?yè)APP軟件。
但是，我們現(xiàn)在沒(méi)有關(guān)于 T 恤的任何數(shù)據(jù)，因此狀態(tài)為空。我們將使用 API 調(diào)用從后端獲取數(shù)據(jù)。
由于數(shù)據(jù)檢索過(guò)程的自動(dòng)化性質(zhì)，這將需要更長(zhǎng)的時(shí)間。與此同時(shí)，用戶會(huì)看到一個(gè)加載的 GIF。
在后端，Express JS 搜索命中端點(diǎn)并調(diào)用適當(dāng)?shù)目刂破骱瘮?shù)來(lái)檢索信息。
在控制器中，我們可以使用 mongoose 來(lái)查詢數(shù)據(jù)庫(kù)、檢索數(shù)據(jù)并以 JSON 格式返回。
React 接收 JSON 數(shù)據(jù)并使用獲取的信息更新?tīng)顟B(tài)。
然后 React 將使用更新的狀態(tài)重新渲染組件，并用 T 恤信息替換加載的 GIF。
這就是 MongoDB、React、Express 和 Node 的通信方式。
以上就是自學(xué)app軟件開(kāi)發(fā)-MERN堆棧的介紹。