計劃平均堆棧應用程序的實用指南

本文節選自 Manning 出版社的《精通 MEAN：使用 Mongo、Express、Angular 和 Node，第二版》。第二版已全面修訂和更新，涵蓋 Angular 2、Node 6 和最新的主流 JavaScript 版本 ES2015 (ES6)。本版將引導您學習如何使用更新後的 MEAN 堆棧開發 Web 應用程序。

關鍵要點

• 規劃 MEAN 堆棧應用程序時，首先要構思所需的屏幕，而無需深入了解每個頁面上的內容。此階段的草圖有助於可視化整個應用程序，並將屏幕組織成集合和流程。
• 將屏幕劃分為邏輯集合。例如，所有處理位置的屏幕可以組合在一起，而“關於我們”之類的獨立頁面可以組合在一個雜項集合中。
• 考慮應用程序的架構，從 API 開始。構建與數據交互的 API 是架構的基點。根據應用程序的具體要求，決定是直接從服務器提供 HTML，還是選擇單頁應用程序 (SPA)。
• 架構可以封裝在一個 Express 項目中，從而更易於管理和部署。但是，妥善組織代碼以保持應用程序的不同部分彼此分離至關重要，以便在將來需要時更輕鬆地將其拆分為單獨的項目。

實際應用規劃：Loc8r

為了便於說明，讓我們假設我們正在 MEAN 堆棧上構建一個名為 Loc8r 的工作應用程序。 Loc8r 將列出附近帶有 WiFi 的場所，人們可以在那里工作。它還將顯示每個場所的設施、開放時間、評級和位置地圖。

高級 MEAN 堆棧應用程序規劃

第一步是考慮應用程序中需要哪些屏幕。我們將關注單獨的頁面視圖和用戶旅程。我們可以在高級別進行此操作，而不必關注每個頁面上的細節。最好在此階段在紙上或白板上畫出草圖，因為它有助於可視化整個應用程序。它還有助於將屏幕組織成集合和流程，作為構建時的良好參考點。由於頁面或應用程序邏輯後面沒有附加數據，因此可以輕鬆添加和刪除部分、更改顯示的內容和位置，甚至更改所需的頁面數量。我們很可能第一次做不到位；關鍵是開始迭代和改進，直到我們對單獨的頁面和整體用戶流程感到滿意為止。

屏幕規劃

閱讀現代 JavaScript 緊跟不斷發展的 JavaScript 世界！ 閱讀本書 閱讀本書

讓我們考慮一下 Loc8r。我們的目標如下：

Loc8r 將列出附近帶有 WiFi 的場所，人們可以在那里工作。它顯示每個場所的設施、開放時間、評級和位置地圖。訪客可以提交評級和評論。

由此，我們可以了解到我們需要的一些屏幕：

1. 列出附近場所的屏幕
2. 顯示單個場所詳細信息的屏幕
3. 用於添加關於場所評論的屏幕

我們可能還想告訴訪客 Loc8r 的用途和存在原因，我們應該將另一個屏幕添加到列表中：

1. 用於“關於我們”信息的屏幕

將屏幕劃分為集合

接下來，我們要獲取屏幕列表並將它們整理到邏輯上屬於一起的地方。例如，列表中的前三個都與位置有關。 “關於”頁面不屬於任何地方，它可以放在雜項“其他”集合中。繪製草圖會得到類似圖 1 的結果。

圖 1：將應用程序的單獨屏幕整理到邏輯集合中。

這樣的快速草圖是規劃的第一階段，我們需要在開始考慮架構之前完成此階段。此階段使我們有機會查看基本頁面，並考慮流程。例如，圖 1 顯示了“位置”集合中的基本用戶旅程，從“列表”頁面到“詳細信息”頁面，然後到添加評論的表單。

架構設計

Loc8r 看起來很簡單，只有幾個屏幕。但是我們仍然需要考慮如何構建它的架構，因為我們將把數據從數據庫傳輸到瀏覽器，讓用戶與數據交互並允許數據發送回數據庫。

從 API 開始

由於應用程序將使用數據庫並傳遞數據，因此我們將從我們肯定需要的部分開始構建架構。圖 2 顯示了起點，一個使用 Express 和 Node.js 構建的 REST API，用於啟用與 MongoDB 數據庫的交互。

圖 2 從標準 MEAN REST API 開始，使用 MongoDB、Express 和 Node.js。

構建與我們的數據交互的 API 是架構的基點。更有趣也更困難的問題是：我們如何構建應用程序的架構？

應用程序架構選項

此時，我們需要查看應用程序的具體要求以及如何將 MEAN 堆棧的各個部分組合在一起以構建最佳解決方案。我們是否需要 MongoDB、Express、Angular 或 Node.js 的某些特殊功能來改變決策？我們是否希望直接從服務器提供 HTML，或者 SPA 是更好的選擇？

對於 Loc8r，沒有特殊或具體的要求，它是否應該易於被搜索引擎抓取取決於業務增長計劃。如果目標是從搜索引擎帶來自然流量，那麼是的，它需要可抓取。如果目標是將應用程序推廣為應用程序並以此方式推動使用，那麼搜索引擎可見性就顯得不那麼重要了。

我們可以立即設想三種可能的應用程序架構，如圖 3 所示：

1. Node.js 和 Express 應用程序
2. 帶有 Angular 交互功能的 Node.js 和 Express 應用程序
3. Angular SPA

考慮到這三個選項，哪個最適合 Loc8r？

圖 3 構建 Loc8r 應用程序的三個選項，從服務器端的 Express 和 Node.js 應用程序到完整的客戶端 Angular SPA。

選擇應用程序架構

沒有具體的業務需求促使我們偏愛一種架構而不是另一種架構。構建所有三種架構使我們能夠探索每種方法的工作方式，並使我們能夠依次查看每種技術，逐層構建應用程序層。

我們將按照圖 3 中顯示的順序構建架構，從 Node.js 和 Express 應用程序開始，然後繼續添加一些 Angular，然後再重構為 Angular SPA。雖然這並非您通常構建網站的方式，但它為您提供了學習 MEAN 堆棧所有方面的大好機會。

將所有內容封裝在一個 Express 項目中

我們一直在查看的架構圖暗示我們將為 API 和應用程序邏輯擁有單獨的 Express 應用程序。這是完全可能的，對於大型項目來說也是一個不錯的選擇。如果我們預計會有大量的流量，我們甚至可能希望我們的主應用程序和我們的 API 位於不同的服務器上。這樣做的額外好處是，我們可以為每個服務器和應用程序設置更具體的設置，這些設置最適合各自的需求。

另一種方法是保持簡單和簡潔，並將所有內容都放在單個 Express 項目中。通過這種方法，我們只需要擔心託管和部署一個應用程序，以及管理一組源代碼。這就是我們將對 Loc8r 做的事情，它為我們提供了一個包含一些子應用程序的 Express 項目。圖 4 說明了這種方法。

圖 4 將 API 和應用程序邏輯封裝在同一個 Express 項目中的應用程序架構。

以這種方式組合應用程序時，務必妥善組織代碼，以便可以將應用程序的不同部分分開。除了使我們的代碼更易於維護之外，它還使我們更容易在以後決定採取正確的路線時將其拆分為單獨的項目。這是我們將在本書中不斷重複討論的一個關鍵主題。

最終產品

如您所見，我們將使用 MEAN 堆棧的所有層來創建 Loc8r。我們還將包含 Twitter Bootstrap 以幫助我們創建一個響應式佈局。圖 5 顯示了一些可以構建的內容的屏幕截圖。

圖 5 Loc8r 是一個示例應用程序。它在不同的設備上顯示不同，顯示場所列表和每個場所的詳細信息，並允許訪客登錄並留下評論。

結論

這就是本文的全部內容。如果您想開始將這些步驟付諸實踐，請訪問 Manning 的網站，您可以在那裡下載《精通 MEAN：使用 Mongo、Express、Angular 和 Node，第二版》的免費第一章，或購買本書。否則，如果您對我在本文中介紹的內容有任何疑問，請在下面的評論中發布。

關於規劃 MEAN 堆棧應用程序的常見問題 (FAQ)

什麼是 MEAN 堆棧，為什麼它在應用程序開發中很重要？

MEAN 堆棧是用於開發 Web 應用程序的基於 JavaScript 的技術的集合。 MEAN 是 MongoDB、ExpressJS、AngularJS 和 Node.js 的首字母縮寫詞。 MongoDB 是一個 NoSQL 數據庫，ExpressJS 是一個 Web 應用程序框架，AngularJS 是一個 JavaScript 框架，Node.js 是一個服務器平台。 MEAN 堆棧在應用程序開發中的重要性在於其效率和靈活性。它允許開發人員使用 JavaScript 為服務器端和客戶端編寫代碼，從而實現無縫集成和高效的數據處理。

MEAN 堆棧應用程序的架構如何工作？

MEAN 堆棧應用程序的架構設計靈活高效。 MongoDB（一個 NoSQL 數據庫）存儲應用程序的數據。在 Node.js 服務器上運行的 ExpressJS 處理服務器端功能。 AngularJS 管理客戶端（面向用戶）的功能。整個應用程序都是用 JavaScript 編寫的，允許數據從用戶的交互到服務器和數據庫無縫流動。

使用 MEAN 堆棧進行應用程序開發的好處是什麼？

MEAN 堆棧為應用程序開發提供了許多好處。由於 Node.js，它允許代碼重用和高速。 MongoDB 提供存儲複雜數據的靈活性，而 AngularJS 提供了一種干淨的方式來添加交互式功能。 ExpressJS 簡化了創建和管理服務器路由的過程。此外，由於所有內容都是用 JavaScript 編寫的，因此它簡化並加快了開發過程。

MongoDB 如何提升 MEAN 堆棧應用程序的效率？

MongoDB 作為一個 NoSQL 數據庫，提供高性能、高可用性和易於擴展性。它基於集合和文檔的概念，而不是使用表和行的傳統關係數據庫。這使得 MongoDB 特別擅長處理大量數據和復雜的層次數據結構，這有助於提高 MEAN 堆棧應用程序的效率。

AngularJS 在 MEAN 堆棧應用程序中扮演什麼角色？

AngularJS 是一個強大的 JavaScript 框架，用於在 MEAN 堆棧中構建應用程序的客戶端。它允許開發人員擴展 HTML 詞彙表，從而創建更具表現力、更易讀且開發速度更快的環境。 AngularJS 還為 HTML 提供數據綁定功能，從而實現模型和視圖組件之間數據的自動同步。

ExpressJS 如何簡化 MEAN 堆棧應用程序中的服務器端操作？

ExpressJS 是一個最小且靈活的 Node.js Web 應用程序框架，它為 Web 和移動應用程序提供了一套強大的功能。它通過提供一個簡單的界面來構建單頁、多頁和混合 Web 應用程序來簡化服務器端操作。它還有助於管理路由、請求和視圖以及執行中間件操作。

Node.js 如何增強 MEAN 堆棧應用程序的性能？

Node.js 是一個基於 Chrome 的 JavaScript 運行時構建的平台，用於輕鬆構建快速且可擴展的網絡應用程序。它使用事件驅動的非阻塞 I/O 模型，使其輕量且高效，非常適合跨分佈式設備運行的數據密集型實時應用程序。這通過允許它同時處理多個客戶端請求而不會滯後來增強 MEAN 堆棧應用程序的性能。

開發 MEAN 堆棧應用程序的先決條件是什麼？

要開發 MEAN 堆棧應用程序，您需要對 JavaScript 和 HTML 有基本的了解。還需要了解 NoSQL 數據庫（特別是 MongoDB），以及了解客戶端和服務器端腳本。熟悉 AngularJS、ExpressJS 和 Node.js 至關重要。此外，了解 JSON 和 AJAX 技術將大有裨益。

MEAN 堆棧與其他全棧選項相比如何？

MEAN 堆棧完全基於 JavaScript，提供無縫的開發過程，因為可以在客戶端和服務器端使用相同的語言。這是其他需要精通多種語言的全棧選項的主要優勢。此外，Node.js 的非阻塞架構使 MEAN 堆棧應用程序快速且可擴展，使其成為實時應用程序的首選。

我可以在 MEAN 堆棧中使用其他數據庫嗎？

雖然 MongoDB 是 MEAN 堆棧中的默認數據庫，因為它與 JavaScript 兼容，但可以使用其他數據庫。但是，這可能需要額外的配置和代碼調整，並且 MEAN 堆棧已知的無縫數據流可能會受到影響。因此，除非有特定需要使用不同的數據庫，否則建議使用 MongoDB。

以上是計劃平均堆棧應用程序的實用指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！