Web应用程序体系结构– Spring MVC

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的角度将控制器从后端移出并移至浏览器中：

SpringMVCAngular2

客户端具有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应用程序的方法与其他常用方法的比较。