如何分清前后端逻辑答案

【问题标题】：How to clearly separate front-end and back-end logic如何分清前后端逻辑
【发布时间】：2023-03-22 18:44:01
【问题描述】：

我遵循了一些有关日志记录表单的在线教程，但在我看来它们太简单了。我的意思是他们总是将用户名和密码发送到同一个 PHP 页面，该页面同时进行身份验证和显示结果。

我只是想知道是否可以将前端和后端的逻辑分开。前端只负责发送和接收请求，后端负责数据库连接和认证。后端应该将结果发送回前端，前端相应地显示它们。

我不得不承认我是网络开发的新手，我真的不知道这是否是正确的方向，因此寻求您的专业帮助。

下面是我的设计，

前端有一个按钮，调用javascript函数发送和接收请求。

<button type="button" onclick="javascript:queryLogin()">

Javascript 函数准备发布请求和接收响应。

    function queryLogin() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var xmlhttp = new XMLHttpRequest();
        var parameters = "username="+username+"&"+"password="+password;

        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                statusLogin(xmlhttp.responseText);
            }
        }

        xmlhttp.open(/*method=*/"POST", /*url=*/"login_back.php", /*async=*/true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(parameters);
    }

    function statusLogin(response) {
        var arr = JSON.parse(response);

        switch(arr.result) {
            case 0:   document.getElementById("message").innerHTML="";
                      break;
            default:  document.getElementById("message").innerHTML="";
                      /* TODO: How to destroy session? */
                      break;
        }
    }

所以基本上我陷入了这种情况：如果身份验证失败，前端应该销毁会话，但现在逻辑在 javascript 中，很难销毁 php 会话。

请告知该怎么做。提前致谢。

【问题讨论】：

认为分离前端和后端可以做的最重要的事情就是使用框架。几乎所有框架都抽象了请求和响应，从而更容易分离前端和后端关注点。
两个小建议，使用 JS 框架完成基本任务。 JQuery 是一个非常简单的库，尤其适用于 AJAX 请求。在后端保留任何敏感逻辑，这意味着您的会话管理。 login_back.php 应该进行登录并相应地管理会话。然后它应该只返回操作的状态。
虽然传统上我同意使用框架，但我认为在第一次学习绳索时避免使用框架实际上很重要。对许多人来说，从未学习过如何实际使用他们选择的语言，而只是学习如何使用某些框架。但是，当需要构建真正的东西时，是的，一定要为此使用框架。

标签： javascript php session

【解决方案1】：

您所说的本质上是所谓的 SPA 或单页应用程序。在这种类型的站点中，应用程序逻辑几乎完全从服务器转移到客户端，这提供了允许您拥有极其精简的服务器设置的好处。传统上，您会看到像这样的网站在服务器端使用 Node.js，因为在那里要做的工作很少，但您可以真正使用任何数据源，无论是 Web API 还是全栈 Web 应用程序。

但是，SPA 非常复杂。在客户端协调所有工作并不适合胆小的人，因为 Web 的任何组件都不是真正为此而设计的。在这里，客户端框架，如 Angular/Backbone/等。几乎是必需品，因为自己滚动不仅浪费您的时间和资源，而且可能永远不会像社区发展的那样好。虽然在学习 Web 开发时玩 SPA 可能会很有趣，但它们是一种非常糟糕的方式来让你的脚湿透。在您掌握一些经验之前，我建议您采用传统的服务器端路线，而不要担心此类事情。

以服务器端为中心的 Web 应用程序可以与客户端一样具有性能，甚至更多，并且会向您介绍使用服务器的概念，这些概念可能会被直接跳入客户端所掩盖MVC/MVVM 框架。

【讨论】：