11

我想了解设计单页应用程序的整体架构（主要通过 JavaScript）

假设我有一个登录页面（用户名/密码），并且在成功验证后，我会看到主页。现在登录和主页屏幕实际上应该是单个页面的一部分。

我该如何设计这样的页面？

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

您可能想查找这本免费的单页应用程序书。我在 Google 搜索“单页应用程序”时发现了它。

于 2013-03-23T01:55:16.387 回答
1

您可以从网上找到的现有解决方案中获得灵感：

于 2013-03-06T12:44:34.067 回答
0

我刚刚向 SourceForge 添加了一个可能有帮助的项目。我已经开发这个库大约一年了，我认为它已经准备好迎接黄金时段了。该项目允许您从 JavaScript 中引用 asp.net MVC。

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

该库生成用于 AJAX 操作的动态 JavaScript 代码。该库需要 jQuery。例如，如果您在 Controller 中使用 Action Method 进行 AJAX 操作，您可以通过动态生成的 JavaScript 文件快速访问它，如下所示：

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

映射参数直接与 ActionMethods 参数相关联。

定制功能包括：

  • 自定义参数
  • 自定义回调
  • 参数的自定义客户端处理函数（用于序列化专用模型类型）
  • 自定义预请求处理器
  • 自定义请求后处理器
于 2013-03-06T15:37:57.953 回答
0

If you're more an MVC guy, I personally have been using chaplinjs.org, which is based on backbone, and hbs for single-page app glory. I have a few modifications to use websockets instead of long-polls, but it's pretty quite extendible, and if you're familiar with mvc, easy enough to get into (you'll run into more problems with backbone than with Chaplin)

于 2013-03-25T18:40:29.720 回答
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>

如果您需要将处理程序附加到模块内的元素，您可以像这样在导航处理程序中附加：

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

我 <3 回调

于 2021-10-07T19:40:14.077 回答
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）都被隐藏（显示：无）。登录视图上应该有登录表单，当它由用户提交时，它会启动 ajax 请求。当 ajax 成功应用程序隐藏登录页面并改为显示主页。

您可以按照下一种方式构建您的代码。对于每个模块，您将拥有模型、视图和控制器文件。

例如，对于登录模块，您可能有 loginModel.js、loginView.js、loginCtrl.js。在模型文件中，您将连接到数据库并检查提供的凭据。在视图中，您会将侦听器绑定到控件。在控制器中，您将对用户按下的提交按钮做出反应。

于 2019-09-30T17:34:59.700 回答