blocks|key|808384|text|这是一个如此广泛的问题，以至于整本书都可以详细地回答这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|808385|基本上，您需要做的是使用AJAX而不是页面重载。您仍然需要连接到服务器来对用户进行身份验证，但不是每次都重新加载整个页面，而是需要对服务器进行一次AJAX调用，并根据登录是否成功更改页面上的某些部分内容(如将login按钮更改为"Logged+in+as+user+xxx“消息等)。|808386|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>This is such a broad question that entire books could be written to answer it in detail.</p>

<p>Basically what you need to do is to use AJAX instead of page reloads. You still need to connect to the server to authenticate users but instead of reloading the entire page every time you do it, you need to make an AJAX call to your server and depending on whether the login was successful or not change some parts of the content on the page (like changing the Login button to a "Logged in as user xxx" message etc.).</p>


blocks|key|808475|text|如果你还没看过，John+Papa有一门很受欢迎的关于在Pluralsight上设计单页面应用程序的课程：http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|808476|它确实需要订阅Pluralsight，但您可以获得10天的免费试用，以确认其内容对您是否有价值。(顺便说一句，我与Pluralsight没有关联。)|808477|entityMap|0|LINK|mutability|MUTABLE|url|http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart^0|1H|2E|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>If you haven't seen it already, John Papa has a very popular course on designing Single Page Applications on Pluralsight:
<a href="http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart" rel="nofollow">http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart</a></p>

<p>It does require a Pluralsight subscription, but you can get a 10 day free trial to confirm the  content is valuable to you. (I am not affiliated with Pluralsight, btw.)</p>


blocks|key|2086927|text|你可能想要查找这个免费的Single+Page+App+book。我在谷歌上搜索"Single+Page+Apps“时发现的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2086928|entityMap|0|LINK|mutability|MUTABLE|url|http://singlepageappbook.com/single-page.html^0|C|K|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You may want to look up this free <a href="http://singlepageappbook.com/single-page.html" rel="nofollow">Single Page App book</a>. I found it when I Googled "Single Page Apps". </p>


blocks|key|5921499|text|您可以从您可以在web上找到的现有解决方案中获得灵感：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5921500|5921501|ExtJS+(MVC+application+architecture)|unordered-list-item|offset|length|5921502|Knockout+(built+upon+the+MVVM+pattern)|5921503|Backbone|5921504|5921505|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture|1|http://knockoutjs.com/|2|http://backbonejs.org/^0|0|0|0|10|0|0|0|12|1|0|0|8|2|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|H|3|I|5|E|7|14|8|@]|9|@$F|15|G|16|1|17]]|A|$]]|$1|J|3|K|5|E|7|18|8|@]|9|@$F|19|G|1A|1|1B]]|A|$]]|$1|L|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]|W|$5|P|Q|R|A|$S|X]]]]

<p>You may take inspiration from existing solutions that you can find over the web :</p>

<ul>
<li><a href="http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture" rel="nofollow">ExtJS (MVC application architecture)</a></li>
<li><a href="http://knockoutjs.com/" rel="nofollow">Knockout (built upon the MVVM pattern)</a></li>
<li><a href="http://backbonejs.org/" rel="nofollow">Backbone</a></li>
</ul>


blocks|key|2086888|text|我刚刚在SourceForge中添加了一个项目，这可能会有所帮助。我已经开发这个库大约一年了，我认为它已经准备好了。此项目允许您从JavaScript中引用asp.net+MVC。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2086889|https://sourceforge.net/projects/peachajax/|offset|length|2086890|AJAX这个库生成用于|2086891|操作的动态JavaScript代码。该库需要jQuery。例如，如果您在Controller+For+AJAX操作中使用Action方法，则可以通过动态生成的JavaScript文件快速访问，如下所示：|blockquote|2086892|2086893|2086894|peach.ControllerName.ActionMethodName(parameter1,+parameter2,+parameter3);+//+javascript|code-block|syntax|javascript|2086895|映射的参数直接与ActionMethods参数相关联。|2086896|自定义功能包括：|2086897|用于参数的序列化parameters|2086898|Custom+callbacks|unordered-list-item|2086899|
|2086900|Custom客户端处理函数|2086901|2086902|自定义请求(用于序列化专用模型|2086903|
+pre-request+parameters|2086904|Custom+callbacks|2086905|2086906|Custom+processors|2086907|2086908|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|17|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1N|8|@]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|F|3|G|5|6|7|1R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1S|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1V|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1W|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1X|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|1Z|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|20|8|@]|9|@]|A|$]]|$1|12|3|13|5|Z|7|21|8|@]|9|@]|A|$]]|$1|14|3|11|5|6|7|22|8|@]|9|@]|A|$]]|$1|15|3|16|5|Z|7|23|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|24|8|@]|9|@]|A|$]]|$1|19|3|1A|5|Z|7|25|8|@]|9|@]|A|$]]|$1|1B|3|11|5|6|7|26|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|Z|7|27|8|@]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|29|8|@]|9|@]|A|$]]]|1G|$1H|$5|1I|1J|1K|A|$1L|C]]]]

<p>I Just added a project to SourceForge that may help.  I've been developing this library for about a year now, and I think it's ready for prime-time.  This project allows for you to reference asp.net MVC from within JavaScript.</p>

<p><a href="https://sourceforge.net/projects/peachajax/" rel="nofollow">https://sourceforge.net/projects/peachajax/</a></p>

<blockquote>
  <p>This library generates dynamic JavaScript code to use for AJAX operations. The library requires jQuery.
  For example, if you use an Action Method within a Controller for AJAX operation, you can quickly access this via the dynamically generated JavaScript file as follows:</p>
</blockquote>

<pre><code>peach.ControllerName.ActionMethodName(parameter1, parameter2, parameter3); // javascript
</code></pre>

<p>The mapped parameters are directly associated with the ActionMethods parameters.</p>

<p>Customization features include:</p>

<ul>
<li>Custom parameters</li>
<li>Custom callbacks</li>
<li>Custom client-side processing functions for parameters (for serializing specialized model types)</li>
<li>Custom pre-request processors</li>
<li>Custom post-request processors</li>
</ul>


blocks|key|5921666|text|如果你更喜欢MVC，我个人一直在使用基于backbone的chaplinjs.org，以及用于单页面应用的hbs。为了使用websockets而不是长轮询，我做了一些修改，但它相当可扩展，如果您熟悉mvc，也很容易进入(+backbone比Chaplin会遇到更多问题)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5921667|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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)</p>


blocks|key|5921711|text|您需要如下所示的index.html页面|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5921712|<html>
++<body>
++++<div+id="header"></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"></div>
++</body>
</html>++|code-block|syntax|javascript|5921713|当应用程序加载时，除登录视图之外的所有视图(带有视图类的div)都被隐藏(display:none)。登录视图应该有登录表单，当它由用户提交时，它会发起ajax请求。当ajax成功时，应用程序隐藏登录页面，而显示主页。|5921714|你可以用另一种方式构建你的代码。对于每个模块，您将拥有模型、视图和控制器文件。|5921715|例如，对于登录模块，您可以使用loginModel.js、loginView.js、loginCtrl.js。在模型文件中，您将连接到DB并检查提供的凭据。在视图中，您将把侦听器绑定到控件。在控制器中，你将对用户按下的提交按钮做出反应。|5921716|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You need index.html page like below</p>

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

     &lt;div id="footer"&gt;&lt;!-- something cool here --&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;  
</code></pre>

<p>When application loaded, all views (divs with view class) are hidden (display:none) except login view. Login view should have login form on it, when it submitted by user it initiates ajax request. When ajax successful application hides login page and displays home page instead. </p>

<p>You may structure your code next way. For every module you will have model, view and controller files. </p>

<p>For example, for login module you may have loginModel.js, loginView.js, loginCtrl.js. In model file you will connect to DB and check credentials provided. In view you will bind listeners to controls. In controller you will react to user pressed Submit button.</p>


blocks|key|808544|text|我使用jquery设置了一个基本的SPA，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|808545|​|808546|<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>|code-block|syntax|javascript|808547|808548|如果需要将处理程序附加到模块中的元素，可以像这样附加到导航处理程序中：|808549|808550|function+LoadAbout(){
++++++$("#content").load("about.txt",+function(){
++++++++++$("#contactusbutton").click(ContactUsClick);
++++++});
++++++$("#page").html("About");+++++++++++++
}|808551|808552|I+<3个回调|808553|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|11|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

<p>I set up a basic SPA using jquery like this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script&gt;        
            // 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);
            });         
            
&lt;/script&gt;</code></pre>
</div>
</div>
</p>
<p>if you need to attach handlers to elements inside your modules, you can attach inside your nav handler like so:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function LoadAbout(){
      $("#content").load("about.txt", function(){
          $("#contactusbutton").click(ContactUsClick);
      });
      $("#page").html("About");             
}</code></pre>
</div>
</div>
</p>
<p>I &lt;3 callbacks</p>


<p>I wanted to understand the overall architecture for designing single page application (mainly through JavaScript)</p>

<p>Let's say I have a login page (Usernam/Password) and on successful authentication, I am shown the homepage. Now both the login and homepage screens should actually be part of a single page.</p>

<p>How can I design such kind of page? </p>


Architecture for single page application (JavaScript)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我想了解设计单页面应用程序的总体架构(主要是通过JavaScript)假设我有一个登录页面(用户名/密码)，在成功进行身份验证后，我会看到主页。现在，登录屏幕和主页屏幕实际上都应该是单个页面的一部分。我怎么能设计这样的页面呢？

问单页应用程序(JavaScript)的体系结构
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单页应用程序(JavaScript)的体系结构EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单页应用程序(JavaScript)的体系结构
EN