Spring MVC和AngularJs共同为构建表单密集型Web应用程序提供了一个真正高效且吸引人的前端开发堆栈。在这篇博客文章中，我们将看到如何使用这些技术构建表单密集型Web应用程序，并将这种方法与其他方法进行比较可用选项。 可以在此github 存储库中找到功能完整且受保护的示例Spring MVC / AngularJs Web应用程序。我们将研究以下主题：

• Spring MVC + Angular单页应用程序的体系结构
• 如何使用Angular构建Web UI
• 哪个Javascript / CSS库与Angular相辅相成？
• 如何使用Spring MVC构建REST API后端
• 使用Spring Security保护REST API
• 与使用完全基于Java的方法的其他方法相比，这又如何呢？

Spring MVC + Angular单页Web应用程序的体系结构

表单密集型企业级应用程序非常适合构建为单页Web应用程序。 与其他更传统的服务器端体系结构相比，主要思想是将服务器构建为一组无状态可重用的REST服务，并从MVC的角度将控制器从后端移出并移至浏览器中：

客户端具有MVC功能，并包含在视图层，控制器层和前端服务层中分隔的所有表示逻辑。 初始应用程序启动后，只有JSON数据通过客户端和服务器之间的连接。

后端是如何构建的？

企业前端应用程序的后端可以以非常自然和类似于Web的方式构建为REST API。 可以使用相同的技术为第三方应用程序提供Web服务-在许多情况下，不需要单独的SOAP Web服务堆栈。

从DDD的角度来看，域模型保留在服务和持久层级别的后端。 通过有线只有DTO可以通过，而域模型则不可以。

如何使用Angular构建Web应用程序的前端

前端应围绕特定于视图的模型（不是域模型）构建，并且应仅处理表示逻辑，而不能处理业务逻辑。 这些是前端的三层：

视图层

视图层由HTML模板，CSS和代表不同UI组件的任何Angular指令组成。 这是登录表单的简单视图示例：

<form ng-submit="onLogin()" name="form" novalidate="" ng-controller="LoginCtrl">  <fieldset><legend>Log In</legend><div class="form-field"><input ng-model="vm.username" name="username" required="" ng-minlength="6" type="text"><div class="form-field"><input ng-model="vm.password" name="password" required="" ng-minlength="6" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" type="password"></div></div></fieldset><button type="submit">Log In</button><a href="/resources/public/new-user.html">New user?</a></form>

控制器层

控制器层由Angular控制器组成，它们将从后端和视图检索的数据粘合在一起。 控制器初始化视图模型，并定义视图应如何对模型更改做出反应，反之亦然：

angular.module('loginApp', ['common',  'editableTableWidgets'])  .controller('LoginCtrl', function ($scope, LoginService) {$scope.onLogin = function () {console.log('Attempting login with username ' + $scope.vm.username + ' and password ' + $scope.vm.password);if ($scope.form.$invalid) {return;}LoginService.login($scope.vm.userName, $scope.vm.password);};});

控制器的主要职责之一是执行前端验证。 在前端进行的任何验证仅出于方便用户的目的-例如，它们对于立即通知用户必填字段很有用。

由于安全原因，任何前端验证都需要在后端在服务层级别重复进行，因为可以轻松绕过前端验证。

前端服务层

一组允许与后端交互并可以注入到Angular控制器中的Angular服务：

angular.module('frontendServices', [])  .service('UserService', ['$http','$q', function($http, $q) {return {getUserInfo: function() {var deferred = $q.defer();$http.get('/user').then(function (response) {if (response.status == 200) {deferred.resolve(response.data);}else {deferred.reject('Error retrieving user info');}});return deferred.promise;}

让我们看看还需要哪些其他库来启动前端并运行它。

哪些Javascript / CSS库是补充Angular所必需的？

Angular已经提供了构建应用程序前端所需的大部分功能。 Angular的一些很好的补充是：

• 雅虎仅有4k的一个易于主题化的纯CSS库，名为PureCss 。 它的皮肤生成器可以轻松地基于基色生成主题。 它的BYOJ（自带Java脚本）解决方案有助于使事情保持“成角度的方式”。
• 功能性的程序库来处理数据。 这些年来，似乎最常用，维护和记录最完善的工具就是lodash 。

使用这两个库和Angular， 几乎可以构建任何基于表单的应用程序 ，实际上不需要任何其他操作。 根据您的项目，其他一些库可能是一个选项：

• 像requirejs这样的模块系统很不错，但是由于Angular模块系统不处理文件检索，因此在requirejs和angular模块的依赖项声明之间引入了一些重复。
• CSRF Angular模块，用于防止跨站点请求伪造攻击。
• 国际化模块

如何使用Spring MVC构建REST API后端

后端是使用通常的后端层构建的：

• 路由器层：定义哪些服务入口点对应于给定的HTTP URL，以及如何从HTTP请求中读取参数
• 服务层：包含任何业务逻辑（例如验证），定义业务交易的范围
• 持久层：将数据库映射到内存中的域对象或从中映射

目前，最好仅使用Java配置来配置Spring MVC。 几乎不需要web.xml ，请参阅此处的仅使用Java config的完全配置的应用程序示例。

服务和持久层是使用通常的DDD方法构建的，因此让我们将注意力集中在路由器层上。

路由器层

用于构建JSP / Thymeleaf应用程序的相同Spring MVC批注也可以用于构建REST API。

最大的区别在于，控制器方法不返回定义应渲染哪个视图模板的String。 相反，
@ResponseBody批注指示应该直接呈现controller方法的返回值并成为响应主体：

@ResponseBody
@ResponseStatus(HttpStatus.OK)
@RequestMapping(method = RequestMethod.GET)
public UserInfoDTO getUserInfo(Principal principal) {User user = userService.findUserByUsername(principal.getName());Long todaysCalories = userService.findTodaysCaloriesForUser(principal.getName());return user != null ? new UserInfoDTO(user.getUsername(), user.getMaxCaloriesPerDay(), todaysCalories) : null;
}

如果要使用@ResponseBody注释该类的所有方法，则最好使用@RestController注释整个类。

通过添加Jackson JSON库，方法返回值将直接转换为JSON，而无需任何进一步配置。 也可以转换为XML或其他格式，具体取决于客户端指定的Accept HTTP标头的值。

请参见此处的几个配置了错误处理的控制器的示例。

如何使用Spring Security保护REST API

可以使用Spring Security Java配置来保护REST API。 一个好的方法是使用带有回退到HTTP Basic身份验证的表单登录，并包括一些CSRF保护，以及强制所有后端方法只能通过HTTPS访问的可能性。

这意味着后端将为用户提供一个登录表单，并在成功登录到浏览器客户端时分配一个会话cookie，但是通过支持回退到HTTP Basic（通过凭据通过Authorization HTTP标头传递凭据）的非浏览器客户端，它仍然可以很好地工作。 。

遵循OWASP的建议，可以使REST服务达到最小的无状态（唯一的服务器状态是用于身份验证的会话cookie），以避免必须为每个请求通过电线发送凭据。

这是有关如何配置REST API安全性的示例 ：

http.authorizeRequests().antMatchers("/resources/public/**").permitAll().anyRequest().authenticated().and().formLogin().defaultSuccessUrl("/resources/calories-tracker.html").loginProcessingUrl("/authenticate").loginPage("/resources/public/login.html").and().httpBasic().and().logout().logoutUrl("/logout");if ("true".equals(System.getProperty("httpsOnly"))) {LOGGER.info("launching the application in HTTPS-only mode");http.requiresChannel().anyRequest().requiresSecure();}

此配置仅涵盖安全性的身份验证方面，选择授权策略取决于API的安全性要求。 如果您需要对授权进行非常细粒度的控制，请检查Spring Security ACL是否适合您的用例。

现在，让我们看一下这种构建Web应用程序的方法与其他常用方法的比较。

将Spring / MVC Angular堆栈与其他常见方法进行比较

这种将Javascript用作前端，将Java用作后端的方法可以简化开发工作流程。

当后端运行时，不需要任何特殊工具或插件即可实现完整的前端热部署功能：只需使用您的IDE将资源发布到服务器即可（例如， Ctrl+F10 IntelliJ中的Ctrl+F10 ）并刷新浏览器页面。

仍然可以使用JRebel重新加载后端类，但是对于前端而言 ，不需要任何特殊的操作。 实际上，可以通过使用json-server模拟后端来构建整个前端。 如果需要，这将允许不同的开发人员并行构建前端和后端。

全栈开发的生产力收益？

根据我的经验，能够直接编辑Html和CSS，而无需中间的任何间接层（请参阅此处， 与GWT和JSF进行的高级Angular比较 ）有助于减少工作量并使事情简单。 编辑保存刷新开发周期非常快速且可靠，极大地提高了生产率。

当相同的开发人员同时构建Javascript前端和Java后端时，将获得最大的生产率提高，因为大多数功能通常都需要同时更改两者。

这样做的潜在缺点是，开发人员还需要了解Html，CSS和Javascript，但这在最近几年中变得越来越常见。

根据我的经验，与等效的完整Java解决方案相比，使用全栈可以在很短的时间内实现复杂的前端用例（用几天而不是几周的时间），因此提高生产率使学习曲线绝对值得。

结论

Spring MVC和Angular的结合确实为构建表单密集型Web应用程序的新方法打开了大门。 这种方法所带来的生产率提高使其成为值得研究的替代方案。

请求之间不存在任何服务器状态（除了身份验证cookie），通过设计消除了整个类别的错误。

有关更多详细信息，请查看github上的该示例应用程序 ，并让我们知道您对以下注释的想法/问题。

翻译自: https://www.javacodegeeks.com/2015/01/web-app-architecture-the-spring-mvc-angularjs-stack.html