サーチ…


前書き

nodejsプロジェクトの構造は、個人的な好み、プロジェクトのアーキテクチャー、モジュール注入戦略の影響を受けます。また、動的モジュールのインスタンス化メカニズムを使用するイベントベースのarc 'もあります。 MVC構造を持つためには、クライアントサイドのコードがおそらく最小化されブラウザに送られ、基本的な性質上公開されているので、サーバ側とクライアント側のソースコードを分離することが不可欠です。そして、サーバー側またはバックエンド側でCRUD操作を実行するためのAPIが提供されます

備考

上記のプロジェクトでは、アプリケーションベースビューとミニディングライブラリとしてbrowserifyおよびvue.jsモジュールを使用しています。したがって、プロジェクト構造は、あなたが使用するmvcフレームワークに基づいて細かく変更される可能性があります。たとえば、publicディレクトリにbuildディレクトリにはすべてのmvcコードが含まれている必要があります。あなたはあなたのためにこれを行うタスクを持つことができます。

MVCとAPIを備えた単純なnodejsアプリケーション

  • 最初の大きな違いは、ホスティングに使用される動的に生成されるディレクトリとソースディレクトリの間です。
  • ソースディレクトリには、設定の量に応じて設定ファイルまたはフォルダがあります。これには、環境設定とビジネスロジックの設定が含まれています。これをconfigディレクトリに配置することもできます。
 |-- Config
        |-- config.json
        |-- appConfig
            |-- pets.config
            |-- payment.config
  • 今、サーバー側/バックエンドとフロントエンドモジュールを区別する最も重要なディレクトリです。 2つのディレクトリserverwebappは、それぞれバックエンドとフロントエンドを表しています。 src

    何が理にかなっているかによって、サーバーやWebアプリケーションの個人的な選択に応じて異なる名前で行くことができます。それをあまりにも長くするか、内部のプロジェクト構造の終わりにあるように複雑にしたくないことを確認してください。

  • サーバーディレクトリの中にコントローラ、メインノードのファイルと開始点となるApp.js / index.jsを持つことができます。サーバーディレクトリ。 APIコントローラによって使用されるすべてのデータ転送オブジェクトを保持するdto dirを持つこともできます。

     |-- server
          |-- dto
              |-- pet.js
              |-- payment.js
          |-- controller
              |-- PetsController.js
              |-- PaymentController.js
          |-- App.js
    
  • webappディレクトリは、 publicmvcの 2つの主要な部分に分けられます。これは、使用したいビルド戦略によっても影響を受けます。私たちはbrowserfiy webappのMVCの部分を構築し、単純に入れてmvcディレクトリからコンテンツを最小限に抑えて使用しています。

    | - webapp | - 公共| - mvc

  • パブリックディレクトリには、すべての静的リソース、画像、css(saasファイルもあります)、そして最も重要なのはHTMLファイルが含まれています。

|-- public 
    |-- build  // will contianed minified scripts(mvc)
    |-- images
        |-- mouse.jpg
        |-- cat.jpg
    |-- styles
        |-- style.css
    |-- views
        |-- petStore.html
        |-- paymentGateway.html
        |-- header.html
        |-- footer.html
    |-- index.html
  • mvcディレクトリには、 モデルビューコントローラ 、およびUIの一部として必要なその他のユーティリティモジュールを含むフロントエンドロジックが含まれます。また、index.jsまたはshell.jsのいずれかがこのディレクトリの一部であるかもしれません。

     |-- mvc
         |-- controllers
             |-- Dashborad.js
             |-- Help.js
             |-- Login.js
         |-- utils
         |-- index.js
    

だから、結論にプロジェクト全体の構造がbelow.AndのようなMVCのスクリプトを縮小化し、 公開ディレクトリに公開するbrowserify一気のような単純なビルドタスクを見ていきます。この公開ディレクトリをexpress.use(satic( 'public')) APIを介して静的リソースとして提供することができます。

    |-- node_modules
    |-- src
        |-- server
            |-- controller
            |-- App.js   // node app
        |-- webapp
            |-- public
                |-- styles
                |-- images
                |-- index.html
            |-- mvc
                |-- controller
                |-- shell.js  // mvc shell
    |-- config
    |-- Readme.md
    |-- .gitignore
    |-- package.json


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow