MEAN スタックを探索する: はじめに-＆＃＆プレス-php.cn

MEAN スタックを探索する: はじめに

WBOY

リリース： 2023-09-03 18:45:01

オリジナル

1118 人が閲覧しました

Web アプリケーションの構築には、データベース操作、サーバー側操作、クライアント側操作を処理するためにさまざまなテクノロジとツールを使用する必要があります。サーバーからのデータを処理して表示します。始める前に新しいプロジェクト、すべてのツール、およびプロジェクト構造をセットアップする必要があります。これは、時間のかかる作業。フレームワークまたは スタック を使用してこのタスクを実行すると、処理を高速化できます。開発を行い、開発者の作業を容易にします。

平均とは

「MEAN は、最新の Web アプリケーション用のフルスタック JavaScript プラットフォームです。」

これは、MEAN スタックの作成者が Web サイトで定義している方法です。 MEAN があらゆる種類 (サーバー側とクライアント側) の JavaScript 開発者を対象としていることは明らかであり、スタックです。プラットフォームとは、複数のコンポーネントで構成されていることを意味します。

コンポーネントは次のとおりです:

モンゴDB
AngularJS
NodeJS

＃＃＃インストール＃＃＃

MEAN スタックは 2 つの方法でインストールできます:

mean.io Web サイトを使用する

さまざまな Yeoman ジェネレーターを使用します。

zip

ファイルを開くには、大きな緑色のボタンをクリックします。

ここで利用できるもう 1 つのオプションは、Git リポジトリのクローンを作成することです。一つだけ開けてターミナルに移動し、次のコマンドを実行します: リーリーYeoman を使用して MEAN をインストールする

さまざまな人々によって作成された、いくつかの Yeoman ジェネレーターがあります。開発者。ジェネレーターを使用した MEAN のインストールは 2 つのステップで行われます。ジェネレーターをインストールします:

リーリー

次に、yo を使用してアプリケーションを作成します:

リーリー

上の例では、

meanstack

ジェネレーターがインストールされており、Yeoman もインストールされていることを前提としています。 MEAN ジェネレーターのリストについては、これを確認してください。リンクして「平均」でフィルターします。のために Yeoman のインストールについては、Yeoman の Web サイトを参照してください。

Addy Osmani が非常に興味深いブログ投稿を書きました MEAN スタックと Yeoman ジェネレーターについて。ジェネレーターを使用してスタックをインストールする方法を学ぶには、その記事を読むことを強くお勧めします。この記事では、Git クローン方法を使用します。

インストール後

インストール後、

を MEAN スタックがインストールされているフォルダーに置くだけですそして、

grunt

コマンドを発行します (grunt-cli がインストールされている必要があります)。これこのコマンドはポート 3000 でリッスンするサーバーを起動するので、アクセスします。 http://localhost:3000 次のコンテンツがブラウザに表示されます:

インストール後に得られるもの

探索 MEAN 堆栈：简介 MEAN スタックは、実際には完全に機能するブログエンジンアプリケーションです。それは持っています Facebook、GitHub、Twitter、Google などのさまざまな方法を使用して認証します。簡単なメールアドレスとパスワードでも可能です。

きっと今頃、コードが見たくてたまらないでしょう...それでは、見てみましょう。平均スタックフォルダー構造は次のようになります:

サーバー部分

探索 MEAN 堆栈：简介サーバーは 2 つのフォルダーと 1 つのファイルに分かれています:

app

フォルダー -

を構成するコントローラー、モデル、ビューが含まれています応用＃＃＃ configフォルダー - アプリケーションのさまざまな部分を制御するファイルが含まれています行儀良くしてください
server.js - アプリケーションのエントリポイントです
一つずつ見ていきましょう:

ファイル

これはアプリケーション全体を開始するファイルです。使用したくない場合は、

grunt node server,js

を使用してサーバーを起動できます。

server.js 責任のあるファイル:

設定をロードしています。アプリケーション自体の構成に使用されるファイル、認証とデータベース接続がロードされます。ブートストラップモデル。これは、モデルフォルダーを反復処理することによって行われます。このフォルダー (またはそのサブディレクトリ) 内のすべてのファイルをロードします。

config
フォルダー

このフォルダーにはアプリケーション構成ファイルが含まれています。中には

env`開発、実稼働、テスト用の構成を含むフォルダーアプリケーションが実行されるモード。`

さらに、アプリケーション自体の構成を含むファイルもあります。ログイン用のエクスプレスセクションとパスポートの設定。

アプリ

フォルダー

app`フォルダーには、サーバー側のコード全体が保存されます。このフォルダ MVC を構成するコントローラー、モデル、ビューを含むサブフォルダーサーバーアプリケーションと提供されたルートのフォルダー。`

デフォルトでは、記事、ユーザー用のコントローラーファイルとインデックスファイルがあります。ルートパス。さらに、記事とユーザーのモデルとルートが作成されましたアーティクル、ユーザー、ルートのパスはインストール中に作成されます。

デフォルトで作成されるビューの場合、次の構造が作成されます:

includes フォルダーにはページのフッターとヘッダー部分が含まれますアプリケーションに属するすべてのページに挿入されます。 レイアウト フォルダーページレイアウトの基本的な HTML が含まれています。このレイアウトは、views フォルダーから index.html ファイルまで拡張されます。

users フォルダーには、ログイン、登録、およびログイン用のマークアップコードが含まれています検証中。

views フォルダーのルートディレクトリの index.html ファイルの隣に、次のファイルがあります。 404 エラーと 500 エラーのフラグが含まれます。

クライアント部分

クライアント部分のコードは、public フォルダーにあります。このフォルダーには、 css アプリケーションスタイルのサブフォルダーと画像を含む img フォルダーアプリケーションで使用されます。

js フォルダーには特別な注意を払う必要があります。クライアントアプリケーションの Angular コード、初期化コードなどが含まれます。ディレクティブとフィルターコード (現在は空のファイル) とコントローラーとアプリケーションの記事セクションとタイトルセクションを提供します。 ビュー フォルダーには、記事の作成、編集、表示、およびチェック。

最後に、lib フォルダーには Angular ライブラリコードが含まれています。