Spring MVC AngularJS将前端与后端分开

Spring MVC AngularJS separate front-end with back-end

本文关键字：后端 前端 MVC AngularJS Spring      更新时间：2023-09-26

我有一个相当大的Spring MVC + AngularJS应用程序。Spring MVC主要作为REST API工作，但不完全(安全，一些路由，Wro4j资源打包)当我开始开发它的时候，我对Web项目没有太多的经验。

应用部署在Amazon Elasticbeanstalk上。

前端人员加入我，我们必须以某种方式分离开发过程。

问题是:

  1. 我要做的基本步骤是什么，把它们分成两个应用程序?

  2. 部署流程是什么?前端/后端必须作为单独的应用程序部署吗?

  3. 对于一般的最佳做法有什么建议吗?

我认为单独部署angularJS应用程序的唯一原因是如果你的应用程序非常大，后端构建需要很多时间(10+分钟)，或者你不想每次都重建整个应用程序。把angularJS应用放在spring MVC下，即使它只是一个主页，也会给你带来很多好处:你可以使用spring生态系统、集中安全、登录和访问控制、SSO、大量集成、spring社交等等。不知道为什么你真的需要把它们分成两个应用程序。但是不管怎样。

  1. 如果你想要分离angularJS应用，你需要将任何关于路由的逻辑从控制器或jsp文件移到angularJS应用中。然后你可以在angular的常量块中定义REST_BASE_URL常量，并使用everywhere($http， $resource)来生成请求url。如果你基本上在angular部分工作，你可以在远程服务器上设置后端，使用nginx或任何小服务器在本地运行angular应用程序，并在Google Chrome上工作(确保你使用这个参数运行Chrome: ——args——disable-web-security——user-data-dir ~/)。不幸的是，你不能在Firefox中禁用CSRF检查。

  2. 你可以分别构建和部署两个应用程序，这很好。

  3. 您还需要创建自己的AuthenticationEntryPoint并返回SC_UNAUTHORIZED(401)而不是春季休息的登录页面。如果是角端，你可以添加全局拦截器来捕获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);
            }
        }
    }])

你可以在node或lite服务器或apache上部署前端项目，从运行Spring MVC的tomcat获取/post数据，你可能有跨域问题，你可以使用

<mvc:cors> <mvc:mapping path="/**" /> </mvc:cors>

解决跨域问题

"MVC"是Spring MVC代表模型视图控制器。"视图"可以是html或jsp(您可以在servlet中指定视图细节)。您不需要单独部署它们。你是如何构建你的项目的?Maven是个好主意。它会把你所有的前端和后端代码打包到一个war/jar文件中，然后你只需要把它部署到服务器上。

你的AngularJS代码将被合并到你的spring"视图"中，JS部分将位于你的app.js中。所以没有必要把它们分开。你的前端人员可以编写前端代码，你只需要在构建和部署之前将其集成到项目中。

但是，如果你一定要把它们分开，我能想到的只有一个选择。将所有UI代码(HTML, CSS, JS)与war文件(project-war.war)一起放在Tomcat的"webapp"文件夹下的一个文件夹中(我们称之为'project')。部署时，您只需要确保url被正确映射。例如，如果app.js(驻留在project/js/app.js中)想要为/controller/action调用Java服务，URL必须是../../../project-war/controller/action。

相关文章：