Question

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

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

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

Answer 1

这是一个广泛的问题，可以编写整本书来详细回答。

基本上您需要做的是使用AJAX而不是页面重新加载。您仍然需要连接到服务器以对用户进行身份验证，但不是每次都重新加载整个页面，而是需要对服务器进行AJAX调用，具体取决于登录是否成功以及是否更改内容的某些部分在页面上（例如将登录按钮更改为“以用户xxx登录”消息等。）。

Answer 2

如果你还没有看过，John Papa有一个非常受欢迎的关于在Pluralsight上设计单页应用程序的课程： http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart

它确实需要Pluralsight订阅，但您可以获得10天免费试用，以确认内容对您有价值。（我不隶属于Pluralsight，顺便说一句。）

Answer 3

您可能想要查找此免费Single Page App book。当我用Google搜索“单页应用”时，我发现了它。

Answer 4

您可以从通过网络找到的现有解决方案中获取灵感：

Answer 5

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

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

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

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

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

自定义功能包括：

自定义参数
自定义回调
参数的自定义客户端处理函数（用于序列化特定模型类型）
自定义预请求处理器
自定义后请求处理器

Answer 6

如果你更像一个MVC人，我个人一直在使用基于主干的chaplinjs.org和单页应用程序荣耀的hbs。我有一些修改使用websockets而不是长轮询，但它非常可扩展，如果你熟悉mvc，很容易进入（你会遇到更多问题，骨干比Chaplin）

Answer 7

您需要如下所示的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。在模型文件中，您将连接到数据库并检查提供的凭据。在视图中，您将侦听器绑定到控件。在控制器中，您将对用户按下的“提交”按钮做出反应。

单页面应用程序的体系结构（JavaScript）

7 个答案: