spring
Spring MVC和AngularJs共同为构建表单密集型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的角度将控制器从后端移出并移至浏览器中：
<div>
<img src="https://s2.51cto.com/images/blog/202411/26004204_6744a8dc47af039242.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="SpringMVCAngular2" width="400" height="610">
</div>
客户端具有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控制器组成，它们将从后端和视图检索的数据粘合在一起。 控制器初始化视图模型，并定义视图应如何对模型更改做出React，反之亦然：
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;
}让我们看看还需要哪些其他库来启动和运行前端。
哪些Java / 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
spring
