SailsJSで簡単なブログを書く：初心者向けのグッドプラクティス（部1）

あらすじ

この記事は、NodeJS開発への旅の初心者を対象としており、 SailsJSフレームワークを使用してこのプラットフォームで開発する初心者を紹介します。 この記事では、このフレームワークを使用する初期スキルを説明することを目的とした簡単なブログの作成プロセスについて説明します。これは、NodeJSのプロジェクトの優れた基盤です。 素材のより良い同化のために、Javascriptプログラミング言語とNodeJSのサーバー実装の基本的な理解と、 Sailの基礎であるMVCスキームの少なくとも主要なアイデアを持っていることが望ましいです。 フレームワークをよりよく理解するには、Sailsの公式Webサイトでドキュメントを読むことができます。また、CailsでSailsを使用する方法を十分に詳細に説明しています。 記事を書くとき、私はできるだけシンプルで明快な素材を書き込もうとしましたが、この記事では経験のあるユーザーには新しいことは伝えません。

作業環境の準備

まず、SailsJSフレームワーク自体をインストールします。最初は、NodeJSパッケージが既にインストールされており、インターネットにアクセスできるものと想定されています。 私の場合、私のOSはFedora 20です。あなたの一部はMac OS X、Ubuntu、その他のOSです。この例ではベータ版を使用し、SailsJSをグローバルにインストールするコマンドを入力します

sudo npm install -g sails@beta
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、新しいプロジェクトを作成する必要があります-Sailsでは、これは簡単かつ明確に行われます。

 sails new sails-blog --linker cd sails-blog/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

説明します-パラメータ

 new
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいプロジェクトを作成するタイトル、そしてプロジェクトの名前、パラメーターを入力します

 --linker
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトでフロントエンドのファイルが自動的に接続されるようにします：js、css、imagesなど、CoffeeScriptファイルとLESSファイルも自動的にコンパイルされます。これも非常に便利ですが、これについては後で詳しく説明します。 その後、生成されたプロジェクトがあるディレクトリに移動します。

Bootstrapの接続-フロントエンドの構成を理解します

Sailsでは、フロントエンドのホストを担当する側は非常に便利に編成されており、サーバーはプロジェクトのルートにある/ assetフォルダーにあるすべてのファイルを翻訳します。 アセットフォルダーのファイル自体にはほぼこのアクセス権があります。指で説明します。特定のimage.png画像を配置したい場合は、 asset / images /ディレクトリに配置します。この場合、サーバーの実行時に、このファイルはHost / images /image.png これは基本的な情報であり、 ブートストラップをインストールし、LESSのソースとともにアーカイブをダウンロードします（このスタイル言語が大好きです）。



アーカイブからlessフォルダーをasset / styles /にアンパックします -これにより、 assets / styles / lessフォルダーの場所になり、lessフォルダーの名前をbootstrapに変更し（便宜上）、bootstrapの主要部分をアンパックした後、このコピーのグリフを接続する必要がありますアーカイブからアセットのルートへのフォントフォルダー（約/アセット/フォント）。 お気に入りのSublime Textテキストエディターで/assets/styles/importer.lessファイルを開きます。このファイルはデフォルトでメインテンプレートに接続され、Gruntによって常に監視されています-自動的にimporter.cssにコンパイルされます

それぞれ、このファイルに行を追加してブートストラップを台無しにします

 @import 'bootstrap/bootstrap';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同じimporter.lessでグリフを接続するには、グリフがフォントフォルダーにあるため、グリフを含むフォルダーへのパスを示す変数を宣言する必要があります-ファイルに次の行を追加します

 @icon-font-path: '/fonts/';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最終的にブートストラップをインストールするには、jquery.jsおよびboostrap.jsファイルをasset / js / dependencies / folderにドロップするだけです。

これで、フロントエンドの構成とSailsの静的に関する最初の知識を終了し、ブログ自体の開発に直接進みます。

Post APIを作成-モデル、コントローラーの最初の知り合い

まず、モデルとコントローラーで構成されるAPI複合体を作成します。これは明白な理由でpostを呼び出します; API複合体を作成するには、次のコマンドを入力します。

 sails generate api post
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

生成されたファイルは、 api /ディレクトリ内の同じ名前のフォルダーに配置されます。Sailsは、デフォルトで操作可能なCRUD APIを作成します。詳細については、Sailsを説明するビデオを参照してください。

ここで、前に作成したPostモデルを開き、コードの記述を開始します。モデルでは、属性名、そのタイプ、およびバリデーターを指定する必要があります。 次に、モデルの内容を説明します。

API /モデル/ Post.js

 module.exports = { attributes: { title: { type: 'string', maxLength: 120, required: true }, description: { type: 'string', required: true }, content: { type: 'string', required: true } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モデルのコンポーネントはJSONに非常に類似して構築されているため、 atributes構造内で理解できるように、非常にわかりやすく便利です。モデルの属性をリストします。この場合、タイトル、短い説明、コンテンツの3つの属性が必要です。 3つのタイプすべてに文字列があり、ヘッダーには2つのバリデーターがあります：maxLength：最大文字列長、必須：新しいレコードを作成するときにこの属性が必要かどうか（この場合は必須）、残りの2つの属性にパラメーターを設定します。すべての場合のバリデーター（HEXカラーバリデーターを含む）については、こちらの全リストをご覧ください 。



そのため、データベース内のレコードとその操作を担当する最初のモデルをコンパイルしました。 ここで、コントローラー-api / controllers / PostController.jsを使用してメインアクションに進むことができます。



コントローラーでの操作も便利なJSONプレゼンテーションで行われます。最初に、ブログにできることをリストします。それに応じて、タスクをコントローラー要素に分割します。 私たちのブログは、短い説明付きの投稿のリストを降順で表示できるようにする必要があります（最初の新しい投稿、最後の古い投稿）。 したがって、私にとっては、これらの機能を3つのコントローラー属性と、レコード操作の3つの主な機能インデックスに分割しました。最後の10件の投稿を表示します。 参照：特定のzapsiの完全なコンテンツを表示します。



ページネーション-リストを分割し、リストの特定のスライスでリストを表示します。 追加、更新、削除-書き込み機能でコードの作成を始めましょう。 module.exportsの内部-コードを記述します。

公益事業

作成

 create: function (req, res) { var params = { description : req.param('description'), content : req.param('content'), title : req.param('title'), } Post.create(params).exec(function (err, post) { res.redirect('/post/watch/' + post.id); if (err) return res.send(500); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードでは、理解できるように、データベースでの新しいレコードの作成について説明します.Sailsで述べたように、CRUD APIはデフォルトで組み込まれています。つまり、各URLサブコントローラーはGETまたはPOSTを使用してパラメーターを渡すことができ、Sailsはすでにそれらを処理できます。

Post.create-1）Postモデルを使用し、createメソッドが新しいレコードを作成することを意味します。レコードの属性とこの属性の値を指定するリストを渡す必要があります。この場合、引数は引数を渡すことで生成されます。 CRUDを使用する場合、パラメーターリストで送信するパラメーターを指定します。これを行う方法が分からない場合は、指で説明します。レコードを作成する場合は、タイトルのパラメーターを指定してPOSTリクエスト（たとえば、Postman経由）を送信します。説明、コンテンツ-URL / P このURLで受け入れられるost / createパラメーターは、req.param（ 'parameter'）を使用して呼び出すことができます。 2）execメソッドでは、エラーの作成中に発生した引数としてerrを取る匿名関数を使用し、作成したばかりのポストからのデータとしてポストします。エラーが発生した場合、ページ500を生成するようにさらに処理します。正常に作成された（投稿データを受信したとき）投稿の識別子をURLに渡して、完全な説明（このコントローラーを以下で検討します）でページにリダイレクトします。



次の補助サブコントローラーは、データ更新サブコントローラーを作成します。これは、情報の編集が必要な場合に非常に便利です。

更新する

 update: function (req, res) { var Id = req.param('id'); var elem = { description : req.param('description'), content : req.param('content'), title : req.param('title') }; Post.update(Id, elem).exec(function (err) { if (err) return res.send(500); res.redirect('/'); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、 更新メソッドは作成メソッドと非常に似ています-違いは、最初の引数がレコードのIDを指定することです-前回と同様に、渡されたパラメーターから取得します。 このコードの本質は、私が思うに、あなたはすでにキャッチしました。 最後に行うユーティリティは、レコードの削除です。

削除する

 delete: function (req, res) { var Id = req.param('id'); Post.destroy(Id).exec(function (err) { if (err) return res.send(500); res.redirect('/post'); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レコードを削除するには、 idを指定するだけです。

メインパーツ+ビューの操作

ここで、アプリケーションのメインの「フロント」部分を作成することを検討します。この部分は、伝統的にインデックスページから開始します。多くの場合、インデックスとしてページネーションスライスの1ページを割り当てることができますが、初心者は余分な部分を噛む方が良いと思います回。 インデックスもそうです。

 index: function (req, res) { Post.find() .sort('id DESC') .limit(5) .exec(function (err, posts) { if (err) return res.send(500); res.view({ posts: posts }); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、コードの説明を開始します。findメソッドはモデル内のレコードの検索を担当し、引数として何も呼び出しません。その後、すべてのレコードがマッチングに適しています。その後、レコードを降順でソートします。 、MySQL、Mongoなどのデータベースを使用する場合は、明らかな理由でidをcreatedAtに置き換える必要があります。リストの最後は、投稿のリストの主要なセクションの製品で、5エントリの制限があります。 モデルを使用したすべての手順が完了すると、投稿のリストを目的の順序と数量で返します。これにより、ビューでさらに使用できます。 以前の操作から覚えているように、 execメソッドで匿名関数を使用して、最終的なデータ処理を実行します。 それでは、キー部分に移りましょう-表示メソッド、 ビューメソッドは、ビューをコンパイルするときに利用できるもののリストを渡す責任があります。この場合、オブジェクトリストであり、アクセスのために、名前ポストと値を持つ属性リスト要素を作成します-無名関数によって返されるposts属性。

ホリスティックビュー

 watch: function (req, res) { var Id = req.param('id'); Post.findOne(Id).exec(function (err, post) { if (!post) return res.send(404); if (err) return res.send(500); res.view({ post: post }); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、 findOneメソッドへの引数として、識別子引数を渡します。これはリクエストでもあり、代わりにビューメソッドからアクセスできる別の投稿のデータを返します。



次に、ページネーションとブループリントのパスコントローラーを見て、プレゼンテーションに直接進みます。

 page: function (req, res) { var page = req.param('page'); Post.find() .sort('id DESC') .paginate({ page : page, limit: 5 }) .exec(function (err, posts) { if (err) return res.send(500); res.view({ posts: posts }); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、 ページごとのレコードの制限と表示するスライスのページを指定する必要がある引数としてJSONを使用するpaginateメソッドをここに追加した点が異なりますが、インデックスコントローラーとほぼ同じです。 スライスページをより動的にする-ページを設定するリクエストでページ変数を作成する-便宜上、この引数をgetリクエストとして渡す-不要なリクエスト要素なしで、直接、 パス設定で これを行うには、 config / routes.jsファイルを開いて編集を開始します。 module.exports.routesに次を追加します。

  'get /post/:page': { controller: 'post', //  action: 'page' //  },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで何が行われていますか？ 原則として、すべてが非常に簡単で、最初にリクエストのタイプ、URL、および送信された属性-を割り当てます- ページ -コントローラーで使用し（ req.param（ 'page'） ）、コントローラーに送信するオプションを簡略化しました（より良いと思います- / post / page？page = 2 ）。 ページネーションと同時に、ユーティリティ関数の単純化された制御スキームを設定します。

  'post /post/create': { controller: 'post', action: 'create' }, 'get /post/delete/:id': { controller: 'post', action: 'delete' }, 'post /post/update': { controller: 'post', action: 'update' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、Postコントローラーを使用して基本的な操作を行い、最終的な力を発揮するために、プレゼンテーションを記述するだけで済みます。これがアプリケーションの顔になります。 コードのコンパイルで問題が発生した場合は、コメント付きのPostコントローラーのフルバージョンをご覧ください。

視聴回数

Sailsビューはコントローラーによって自動的に構築され、Postコントローラーを作成しました-つまり、このコントローラーのビューを持つフォルダーはviews / post / *に配置され、ビューにはviewsメソッドを持つサブコントローラー名があります 。SailはJade、Handlebars、HAML他にもありますが、デフォルトではEJSが組み込まれているため、ビューはその上に構築されます。 viewsに投稿フォルダーを作成し、次の内容のindex.ejsおよびpage.ejsファイルを追加します。

views / post / index.ejsおよびviews / post / page.ejs

 <div class="container text-center"> <h2 class="text-center">MY BLOG APP</h2> <div class="row"> <div class="col-md-1"></div> <div class="col-md-10"> <% _.each(posts, function (post) { %> <div class="panel panel-default"> <div class="panel-body"> <h3 class="text-center"><%= post.title %></h3><hr> <article> <%= post.description %> </article> </div> <div class="panel-footer"> <a href="/post/watch/<%= post.id %>" class="btn btn-info">LEARN MORE</a> </div> </div> <% }) %> </div> <div class="col-md-1"> </div> <ul class="pagination"> <li><a href="/post">1</a></li> <li><a href="/post/2">2</a></li> <li><a href="/post/3">3</a></li> </ul> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

_.each（）は最初のパラメーターが値の配列であるため、次のコールバックは配列の単一要素からデータを提供します（角度からのng-repeatのようなもの）。次に、値を繰り返すデータを構築します。 EJSに精通している人は、変数の値をテキストであるため<％=％>で囲むか、<%%>で関数を終了することを理解しています（説明が非常に簡単な場合）。 ですから、少なくとも直感的なレベルでEJSに関する情報のメインフローを理解していると思います。そうでない場合は、 ドキュメントが役立ちます。 最後のビューは特定の投稿の単一の表示です-views / post / watch.ejs

ビュー/投稿/ watch.ejs

 <div class="container"> <div class="panel panel-default"> <div class="panel-body text-center"> <h3><%= post.title %></h3><hr> <article> <%= post.content %> </article> </div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、ブログの機能の主要部分が作成されました-投稿の作成、編集、削除、ページネーション、個々のエントリの表示が可能になりましたが、現時点では管理パネルにエントリを視覚的に作成できるフォームはありません-初心者向けには、 Postmanを使用してテストできます以前にコマンドでテストサーバーを起動した

 sails lift
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初の部分の素材が興味深く、有用であり、2番目の部分がセッションの作成、承認、および簡単な管理パネルの記述について説明することを望みます。待てない場合、またはコードの記述方法を誤解した場合、完全なコメント付きのgithubで完全なプロジェクトコードを見ることができますそこで行われるすべてのことを説明します。



2記事の一部



書面で使用される有用なリンクと資料：

• 基本的なウォーターラインのドキュメント
• ウォーターラインクエリの詳細なドキュメント
• ウォーターラインクエリメソッド
• SailsJSホワイトペーパー