如何構建和構建節點。JSMVC應用程序-js教程-PHP中文網

How to Build and Structure a Node.js MVC Application

構建複雜的應用程序時，架構設計與代碼質量同等重要。即使代碼編寫精良，但缺乏良好的組織結構，隨著複雜性的增加，維護和擴展將變得異常困難。因此，最佳實踐是在項目啟動前就規劃好架構，以項目目標為指導，做出明智的選擇。

與Ruby on Rails等框架不同，Node.js 並沒有一個事實上的標準框架來強制執行特定的架構和代碼組織方式。這使得構建完整的Node.js Web應用程序時，架構選擇變得相對自由，但也增加了挑戰。

本教程將使用MVC架構構建一個基本的筆記應用程序，演示如何利用Node.js的Hapi.js框架、SQLite數據庫（通過Sequelize.js進行操作）以及Pug模板引擎來實現高效開發。

核心要點：

使用MVC (模型-視圖-控制器) 架構有效組織Node.js應用程序，提升可維護性和可擴展性。
使用npm初始化項目，創建package.json文件來管理依賴項。
使用Hapi.js框架構建服務器，使用SQLite數據庫和Sequelize.js管理數據。
定義Node.js路由，明確應用程序的功能，確保每個路由都與正確的HTTP方法和處理程序關聯。
使用Sequelize.js定義模型，確保數據完整性並提供抽象層。
實現控制器處理業務邏輯，連接模型和視圖，獲取數據並決定輸出格式。
使用Pug模板引擎創建視圖，使HTTP響應更易讀和結構化。
使用Hapi.js的Inert插件提供靜態文件服務，高效管理CSS和JavaScript文件。

什麼是MVC？

模型-視圖-控制器 (MVC) 可能是最流行的應用程序架構之一。 MVC模式最初在PARC為Smalltalk語言設計，用於解決圖形用戶界面應用程序的組織問題。雖然最初用於桌面應用程序，但其理念已成功應用於Web開發。

簡單來說，MVC架構包含：

模型 (Model): 處理數據庫或任何數據相關功能的部分。
視圖 (View): 用戶看到的一切——發送給客戶端的頁面。
控制器 (Controller): 網站的邏輯，以及模型和視圖之間的橋樑。控制器調用模型獲取數據，然後將數據傳遞給視圖，最終發送給用戶。

本應用程序將允許創建、查看、編輯和刪除純文本筆記。雖然功能簡單，但堅實的架構將使日後添加新功能變得容易。

本教程假設您已在機器上安裝了最新版本的Node.js。如果沒有，請參考相關教程進行安裝。

最終應用程序代碼已上傳至GitHub倉庫，您可以查看完整的項目結構。

奠定基礎

構建任何Node.js應用程序的第一步是創建package.json文件，其中包含所有依賴項和腳本。可以使用npm的init命令自動生成此文件：

mkdir notes-board
cd notes-board
npm init -y

登入後複製

完成後，您將擁有一個可用的package.json文件。

注意：如果您不熟悉這些命令，請查看我們的npm入門指南。

接下來，安裝Hapi.js框架：

npm install @hapi/hapi@18.4.0

登入後複製

此命令將下載Hapi.js並將其添加到package.json文件中的依賴項中。

注意：我們指定了Hapi.js的v18.4.0版本，因為它與Node 8、10和12版本兼容。如果您使用的是Node 12，可以選擇安裝最新版本（Hapi v19.1.0）。

現在，創建入口文件——啟動所有內容的Web服務器。在應用程序目錄中創建一個server.js文件，並添加以下代碼：

"use strict";

const Hapi = require("@hapi/hapi");
const Settings = require("./settings");

const init = async () => {
  const server = new Hapi.Server({ port: Settings.port });

  server.route({
    method: "GET",
    path: "/",
    handler: (request, h) => {
      return "Hello, world!";
    }
  });

  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

process.on("unhandledRejection", err => {
  console.log(err);
  process.exit(1);
});

init();

登入後複製

這是應用程序的基礎。首先，我們使用嚴格模式；然後，我們引入依賴項並實例化一個新的服務器對象，將連接端口設置為3000（端口可以是1023到65535之間的任何數字）；我們的第一個路由將作為測試，所以“Hello, world!” 消息就足夠了；最後，我們使用server.start()方法啟動服務器。

存儲設置

最佳實踐是將配置變量存儲在專用文件中。此文件導出一個包含數據的JSON對象，其中每個鍵都分配自環境變量，但不要忘記備用值。

在這個文件中，我們還可以根據環境（例如開發或生產）擁有不同的設置。例如，我們可以為開發目的使用SQLite的內存實例，但在生產環境中使用真實的SQLite數據庫文件。

根據當前環境選擇設置非常簡單。由於我們還在文件中有一個env變量，它將包含development或production，我們可以執行以下操作來獲取數據庫設置：

const dbSettings = Settings[Settings.env].db;

登入後複製

因此，當env變量為development時，dbSettings將包含內存數據庫的設置；當env變量為production時，將包含數據庫文件的路徑。

此外，我們可以添加對.env文件的支持，在其中可以為開發目的存儲本地環境變量。這可以通過像dotenv這樣的Node.js包來實現，它將讀取項目根目錄下的.env文件，並將找到的值自動添加到環境中。

注意：如果您決定也使用.env文件，請確保使用npm install dotenv安裝該包，並將其添加到.gitignore中，以免發布任何敏感信息。

我們的settings.js文件如下所示：

// This will load our .env file and add the values to process.env,
// IMPORTANT: Omit this line if you don't want to use this functionality
require("dotenv").config({ silent: true });

module.exports = {
  port: process.env.PORT || 3000,
  env: process.env.NODE_ENV || "development",

  // Environment-dependent settings
  development: {
    db: {
      dialect: "sqlite",
      storage: ":memory:"
    }
  },
  production: {
    db: {
      dialect: "sqlite",
      storage: "db/database.sqlite"
    }
  }
};

登入後複製

現在，我們可以通過執行以下命令並在Web瀏覽器中導航到http://localhost:3000來啟動應用程序：

mkdir notes-board
cd notes-board
npm init -y

登入後複製

注意：此項目在Node v12.15.0上進行了測試。如果您遇到任何錯誤，請確保您已安裝更新的版本。

(後續步驟，由於篇幅限制，以下內容將簡略概括，具體實現細節請參考原文)

定義路由: 在lib/routes.js文件中定義應用程序的路由，包括GET、POST、PUT和DELETE方法處理筆記的創建、讀取、更新和刪除。

構建模型: 使用Sequelize.js和SQLite創建Note模型，定義筆記的數據結構（日期、標題、內容等）。在lib/models/note.js中定義模型。

構建控制器: 創建控制器來處理路由請求。 lib/controllers/home.js處理首頁，lib/controllers/note.js處理筆記相關的CRUD操作。

構建視圖: 使用Pug模板引擎創建視圖。 lib/views/home.pug顯示筆記列表，lib/views/note.pug顯示單個筆記詳情。 lib/views/components/note.pug定義筆記組件。

服務靜態文件: 使用Hapi.js的Inert插件服務靜態文件（JavaScript和CSS）。在server.js中註冊Inert插件，並在routes.js中添加靜態文件路由。

客戶端JavaScript: 編寫客戶端JavaScript代碼來處理模態窗口的顯示/隱藏，以及使用Ajax提交表單。

總結

本教程構建了一個基本的基於Hapi.js和MVC架構的筆記應用程序。雖然還有許多細節需要完善（例如輸入驗證、錯誤處理等），但這提供了一個學習和構建Node.js應用程序的基礎。您可以在此基礎上添加用戶認證、更複雜的UI等功能。

以上是如何構建和構建節點。JSMVC應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！