NodeJSによる前後端分離

概要
ウェブサイトの全体的な枠組みを作る時、構造上の前後端分離が非常に強調されます.この分離は、データ層、複雑なトラヒックロジックとフロントエンドのプレゼンテーションとインタラクティブな階層分離を意味する.
WHY(なぜこのようにしますか?)

クリアな構造.前後端の融合は中間層のプロトコルで行われ、バックエンドがフロントエンドに対してのみAPIインターフェースを露出することを実現する.ソフト設計面では、流れているデータは、相手に拉致されたのではなく、前後に独立して自分のことに専念できる.

同時開発.相手に拉致されないということは、開発に際して事前の約束によって、フロントエンドとバックエンドが同期して行えるということです.引継ぎ層はユニットテストによって引継ぎを保証します.プロジェクトの進捗を短縮できます.
今回のデザインをする前に、タオバオ大牛たちのミッドウェー案を参考にしました.コードのセットを全部食べた後に理想が現実に戻りました.ありがとうございます.
REQUIREMENT(需要)urlの設計をする時、このような概念を提出しました.
ブラウズがサービス端末でページをレンダリングすることを主とする場合、urlのpath部分はサービス側で解析、最後の出力ページをレンダリングし、ブラウザ側に到達すると、jsはhash部分のデータとビューのレンダリングを担当する.
ページの形式がwebapを中心とする場合、urlのpathとhashの部分はjsによってレンダリングされる.
このような過程で、2つの問題を解決するために力を尽くす.

webappのseo問題

url遡及問題

TODO(何をしましたか?)
タオバオMidwayの思想と一致して、ブラウザ側とサービス側では、共有はテンプレートであり、これも低バージョンブラウザの性能問題を参照して、フロントエンドの選択には、CanJSが使用されている.テンプレートエンジンはejsでexpressjsに互換性があり、同時にCanJSの低バージョンブラウザ上の新エネルギーは非突出であるため、選択型はCanJSを使用している.CanJSにおけるViewのライフサイクル拡張
上の図に示すように、デフォルトのライフサイクルはstartとendの二つの段階だけであり、renderとsupplementの二つの段階に加えて表示されている.

renderは、メインレンダリングフェーズとして定義されており、この部分は、ブラウザ側でレンダリングしても良いし、サービス側でレンダリングが完了したら、ルートノードにdata-status="ready"の属性を追加してレンダリングが完了したことを示しても良い.ブラウザがこの属性を検出した場合、レンダリングが繰り返されない.

supplementは補足レンダリングフェーズとして定義され、この部分はブラウザ側でレンダリングされ、そのデータパラメータはhashを介して

に入力される.
EXAMPLE(ケース)sf-haitao-webapp-seoこのプロジェクトのコードは具体的なケースです.実践初期のため、コードの変動が非常に早いです.
コードを起動したら、それぞれ2つのリンクにアクセスします.

はサービス側によってレンダリングされる:http://127.0.0.1:3000/paint/2023013

ブラウザでレンダリングを担当する:http://127.0.0.1:3000/render/2023013

注:ここの203013は豆板の中で唯一自由に訪問できるものです.他のidは使わないでください.ご了承ください.
二つのリンクを訪問した後、しっぽの後に下記のhashを入れて、どのような結果があるか確認してください.

#!case/29

HOWTRO(どうやってやるか)

は、NodeJS環境とBowerブースター

をインストールする必要があります.

Cloneコードは本に来て、デフォルトディレクトリはsf-haitao-webapp-seo

です.

はディレクトリに入り、依存ライブラリ

npm install

bower install

をインストールします.

ルートディレクトリで

node bin\www

を実行します.
プロジェクトの住所:https://github.com/leewind/sf-haitao-webapp-seo
DISCUS(議論)
このような問題を考えます.サービスとブラウザのコードが一致しているということに拘らないなら、他の代替Nodejsでサービス側のレンダリングの仕事をする可能性がありますか?例えば、Sprint MVC、Net MVC、Python Tornado?CanJSにおいて、デフォルトでは、2つのテンプレートが推奨されている.ejsおよびmustache.私は他の言語がejsテンプレートに対するサポートを見つけませんでしたが、mustacheは他の言語での応用がとても上手で、具体的にはmustache公式サイトを参照してください.
逆に考えてみると、他の言語テンプレートがNodejs環境で使えるものがありますか?そしてVelocity.jsを見つけました.もしフロントエンドCanJSがVelocity.jsのテンプレートと互換できれば、レンダリングをする時に、第二の方法があります.Java Velocityでrenderの論理のレンダリングをします.mustacheのマルチ言語プラットフォームに対する拡張とVelocityのCanJSの拡張については、私の次のステップの実践目標である.
REFERENCE(参考)

フロントエンド軽量級MVCフレームの新高CanJS(1)

もNodeJSに基づく全桟式開発(NodeJSによる前後端分離)

について話しています.

前後端分離モードにおけるセキュリティ解決策