Spring MVC AngularJS将前端与后端分开

klh5stk1  于 2023-06-21  发布在  Spring
关注(0)|答案(3)|浏览(128)

我有一个很大泉MVC + AngularJS应用程序。Spring MVC主要作为REST API工作,但在我开始开发时并不完全(安全性,一些路由,Wro 4j资源打包),在Web项目中没有太多经验。
应用程序部署在Amazon Elasticbeanstalk上。
前端的家伙加入我,我们必须以某种方式分离开发过程。

问题是:

1.什么是基本的步骤,我必须做的分开他们到2个应用程序?
1.部署过程是什么?前端/后端是否必须部署为单独的应用程序?
1.有什么关于最佳实践的建议吗?

nkhmeac6

nkhmeac61#

我认为,如果你的应用程序非常大,后端构建需要花费大量时间(10分钟以上),或者你不想每次都重建整个应用程序,那么将angularJS应用程序分开并单独部署的唯一原因就是。将angularJS应用程序置于spring MVC下,即使它只是主页,也会给你带来很多好处:你可以使用Spring生态系统,集中式安全,登录和访问控制,SSO,很多集成,Spring社交等。不知道为什么你真的需要把它们分成两个应用程序。但无论如何。
1.如果你想分离angularJS应用程序,你需要将任何关于路由的逻辑从控制器或jsp文件移动到angularjs应用程序。实现基于令牌的身份验证/登录。然后在angular的constant块中定义REST_BASE_URLconstant,使用everywhere($http,$resource)生成请求url。如果你基本上是在angular部分工作,你可以在远程服务器上设置后端,只在本地使用nginx或任何小型服务器运行angular应用程序,并在Google Chrome上工作(确保你使用以下内容运行Chrome:--args --disable-web-security --user-data-dir ~/)。不幸的是,您无法在Firefox中禁用CSRF检查。
1.您可以单独构建和部署2个应用程序,这很好。
1.您还需要创建自己的AuthenticationEntryPoint,返回SC_UNAUTHORIZED(401),而不是spring rest中的登录页面。如果是angular的一面,你可以添加全局拦截器来捕获401并显示登录页面或对话框,如下所示:

.factory('authHttpResponseInterceptor',['$q','$location',function($q,$location){
        return {
            response: function(response){
                if (response.status === 401) {
                    console.log("Response 401");
                }
                return response || $q.when(response);
            },
            responseError: function(rejection) {
                if (rejection.status === 401) {
                    window.location.reload();
                }
                return $q.reject(rejection);
            }
        }
    }])
qxsslcnc

qxsslcnc2#

你可以在node或lite服务器或apache上部署前端项目,从运行Spring MVC的tomcat获取/发布数据,你可能有跨域问题,你可以使用
<mvc:cors> <mvc:mapping path="/**" /> </mvc:cors>
解决跨域问题。

ajsxfq5m

ajsxfq5m3#

Spring MVC是Model View Controller的缩写。“视图”可以是html或jsp(您可以在servlet中指定视图细节)。您不需要单独部署它们。你是如何构建你的项目的?Maven是个好主意。它将把所有的前端和后端代码 Package 到一个war/jar文件中,然后你必须把它部署到服务器上。
你的AngularJS代码将被合并到你的Spring“视图”中,它的JS部分将位于你的app.js中。因此,没有必要将它们分开。前端人员可以编写前端代码,而您只需在构建和部署之前将其集成到项目中即可。
但是,如果你一定要把他们分开,我只能想到一个办法。将所有的UI代码(HTML、CSS、JS)和war文件(我们称之为project-war.war)放在Tomcat的“webapp”文件夹中的一个文件夹(我们称之为'project')中。在部署时,您只需确保URL已正确Map。例如,如果app.js(位于project/js/app.js中)想要调用/controller/action的Java服务,则URL必须是../../../project-war/controller/action

相关问题