11

シングルページアプリケーションを設計するための全体的なアーキテクチャを理解したかった（主にJavaScriptを使用）

ログインページ（ユーザー名/パスワード）があり、認証が成功すると、ホームページが表示されたとします。これで、ログイン画面とホームページ画面の両方が実際には1つのページの一部になるはずです。

どうすればそのようなページをデザインできますか？

4

8 に答える 8

5

これは非常に幅広い質問であるため、本全体を書いて詳細に答えることができます。

基本的にあなたがする必要があるのは、ページのリロードの代わりにAJAXを使用することです。ユーザーを認証するにはサーバーに接続する必要がありますが、毎回ページ全体をリロードするのではなく、サーバーに対してAJAX呼び出しを行い、ログインが成功したかどうかに応じて、コンテンツの一部を変更する必要があります。ページ上（ログインボタンを「ユーザーxxxとしてログイン」メッセージに変更するなど）。

于 2013-03-06T11:36:37.307 に答える
3

まだご覧になっていない場合は、John Papaが、Pluralsightでのシングルページアプリケーションの設計に関する非常に人気のあるコースを用意しています 。http ：//www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart

Pluralsightのサブスクリプションが必要ですが、コンテンツが自分にとって価値があることを確認するために10日間の無料トライアルを取得できます。（私はPluralsightとは提携していません。）

于 2013-03-25T18:32:29.800 に答える
1

Web上で見つけることができる既存のソリューションからインスピレーションを得ることができます：

于 2013-03-06T12:44:34.067 に答える
1

この無料のシングルページアプリの本を調べてみてください。「シングルページアプリ」をグーグルで検索したときに見つけました。

于 2013-03-23T01:55:16.387 に答える
0

役立つかもしれないプロジェクトをSourceForgeに追加しました。私はこのライブラリを約1年間開発してきましたが、プライムタイムの準備ができていると思います。このプロジェクトでは、JavaScript内からasp.netMVCを参照できます。

https://sourceforge.net/projects/peachajax/

このライブラリは、AJAX操作に使用する動的JavaScriptコードを生成します。ライブラリにはjQueryが必要です。たとえば、Controller for AJAX操作内でアクションメソッドを使用する場合、次のように動的に生成されたJavaScriptファイルを介してこれにすばやくアクセスできます。

peach.ControllerName.ActionMethodName(parameter1, parameter2, parameter3); // javascript

マップされたパラメーターは、ActionMethodsパラメーターに直接関連付けられています。

カスタマイズ機能は次のとおりです。

  • カスタムパラメータ
  • カスタムコールバック
  • パラメータのカスタムクライアント側処理関数（特殊なモデルタイプをシリアル化するため）
  • カスタムプレリクエストプロセッサ
  • カスタムポストリクエストプロセッサ
于 2013-03-06T15:37:57.953 に答える
0

あなたがMVCの人なら、私は個人的にバックボーンに基づくchaplinjs.orgと、シングルページアプリの栄光のためのhbsを使用しています。ロングポールの代わりにWebSocketを使用するためのいくつかの変更がありますが、それはかなり拡張可能であり、MVCに精通している場合は、簡単に入ることができます（Chaplinよりもバックボーンでより多くの問題が発生します）

于 2013-03-25T18:40:29.720 に答える
0

以下のようなindex.htmlページが必要です

<html>
  <body>
    <div id="header"><!-- something cool here --></div> 
      <div id="login" class="view"> ... </div> 
      <div id="home" class="view" style="display:none;"> ... </div>
      <div id="page3" class="view" style="display:none;"> ... </div>
      <div id="page4" class="view" style="display:none;"> ... </div>

     <div id="footer"><!-- something cool here --></div>
  </body>
</html>

アプリケーションがロードされると、ログインビューを除くすべてのビュー（ビュークラスを持つdiv）が非表示（display：none）になります。ログインビューにはログインフォームが必要です。ユーザーが送信すると、ajaxリクエストが開始されます。ajaxが成功すると、アプリケーションはログインページを非表示にし、代わりにホームページを表示します。

次の方法でコードを構造化できます。モジュールごとに、モデル、ビュー、およびコントローラーファイルがあります。

たとえば、ログインモジュールの場合、loginModel.js、loginView.js、loginCtrl.jsがあります。モデルファイルで、DBに接続し、提供された資格情報を確認します。ビューでは、リスナーをコントロールにバインドします。コントローラでは、ユーザーが送信ボタンを押したときに反応します。

于 2019-09-30T17:34:59.700 に答える
0

私は次のようにjqueryを使用して基本的なSPAを設定しました：

<script src="jquery.js"></script>
<script>        
            // SPA with JQuery? Hold my beer!
            
            // Handlers
            function LoadAbout(){
                $("#content").load("about.txt");
                $("#page").html("About");               
            }
            
            function LoadHome(){
                $("#content").load("home.txt");
                $("#page").html("Home");
            }   
            
            // Run on document ready
            $(document).ready(function() {
            
                // load the home page
                LoadHome();
                
                // Assign nav handlers
                $("#about").click(LoadAbout);
                $("#home").click(LoadHome);
            });         
            
</script>

モジュール内の要素にハンドラーをアタッチする必要がある場合は、次のようにnavハンドラー内にアタッチできます。

function LoadAbout(){
      $("#content").load("about.txt", function(){
          $("#contactusbutton").click(ContactUsClick);
      });
      $("#page").html("About");             
}

I<3コールバック

于 2021-10-07T19:40:14.077 に答える