使用Spring boot，Thymeleaf，AngularJS从零开始构建一个新的Web应用程序-第3部分

在之前的博客中，我们使用Thymeleaf，Bower和Bootstrap构建了登录页面，并将其部署到了Heroku。
在此博客中，我们将介绍用于前端的AngularJS和在后端的Spring Boot Web服务的一些功能。

我们将从“登录/注销”部分开始。让我们开始使用Bower在我们的应用程序中安装AngularJS。

AngularJS简介

$ bower install angular --save

这将在bower_components文件夹内添加角度依赖性。为了将角度注入到我们HTML页面中，我们需要做两件事
1）在我们的html文件中添加angular.min.js的路径

<script src="./bower_components/angular/angular.min.js" type="text/javascript"></script>

2.将主体标记为ng-app =“ myModule”，这意味着我们需要定义一个JavaScript模块，Angular将其识别为名为“ myModule”的应用程序。 Angular模块就像是应用程序不同部分的容器-控制器，服务，过滤器，指令等。

<body ng-app="myModule">

现在，我们需要在JS文件中定义该模块“ myModule”，我们可以将该文件称为具有成分的app.js：

angular.module('myModule', []).controller('home', function($http) {var self = this;$http.get('/resource/').then(function(response) {self.message = response.data;})
});

在这里，我们看到我们在“ myModule”中定义了一个名为“ home”的控制器，该控制器将用于通过数据绑定将值传递到HTML，此处的模型为“消息”。

数据将通过HTTP GET通过对我们的Spring后端进行REST调用来检索。
因此，让我们看看如何创建Spring Rest Controller：

弹簧架控制器

我们已经添加了依赖项"spring-boot-starter-web"因此我们现在不再需要任何spring boot依赖项来构建Rest Controller。

我们将创建一个LoginController

@RestController
public class LoginController {@RequestMapping("/resource")public Map<String,Object> home() {Map<String,Object> model = new HashMap<String,Object>();model.put("id", UUID.randomUUID().toString());model.put("content", "Hello World");return model;}

现在，如果将这段代码放在单独的div中的index.html中，则可以看到该div现在正在从后端动态加载数据。

要查看HTML中的数据，我们需要这样做：

<div ng-controller="home as home"><p>The ID is {{home.message.id}}</p><p>The content is {{home.message.content}}</p>
</div>

到目前为止，我们仅能在静态页面中使用angularJS并从后端Rest Controller检索一些信息并使用AngularJS进行渲染。

建筑物登录/注销

现在我们在索引页面中有了angularJS模块，让我们使用Spring Security实现登录/注销功能。

要构建登录/注销功能，我们需要制作3个HTML页面。
1）index.html –这将是登录页面，我们将在其中添加导航以登录和注销。（我们已经有）
2）home.html –这将是用户登录后将重定向到的页面。 3）login.html –这将是带有用户名和密码字段的页面，用于输入要登录的凭据。

对于这些页面之间的路由，我们将使用ng-route 。 ngRoute模块为angular应用程序提供路由和深层链接服务和指令。要使用bower安装ngRoute，我们将执行以下命令：

bower install angular-route@X.Y.Z

然后将其包含在index.html中：

<script src="path/to/angular.js"></script>
<script src="path/to/angular-route.js"></script>

步骤1：在index.html中添加导航

为了添加导航，我们需要在主体下面添加此代码块。

<div ng-controller="navigation as nav" class="container"><ul class="nav nav-pills" role="tablist"><li class="active"><a href="#/">home</a></li><li><a href="#/login">login</a></li><li ng-show="authenticated"><a href="" ng-click="nav.logout()">logout</a></li></ul></div><div ng-view class="container"></div>

“ ng-view”部分将显示“ login.html”部分页面。

更改app.js文件以定义路由：

angular.module('myModule', [ 'ngRoute' ]).config(function($routeProvider, $httpProvider) {$routeProvider.when('/', {templateUrl : 'home.html',controller : 'home',controllerAs: 'controller'}).when('/login', {templateUrl : 'login.html',controller : 'navigation',controllerAs: 'controller'}).otherwise('/');}).controller('home', function($http) {var self = this;$http.get('/resource/').then(function(response) {self.message = response.data;})}).controller('navigation',function($rootScope, $http, $location) {var self = thisvar authenticate = function(credentials, callback){var headers = credentials ? {authentication : "Basic "+ btoa(credentials.username + ":"+credentials.password)} : {};$http.get('user', {headers : headers}).then(function(response) {if (response.data.name) {$rootScope.authenticated = true;} else {$rootScope.authenticated = false;}callback && callback();}, function() {$rootScope.authenticated = false;callback && callback();});}authenticate();self.credentials = {};self.login = function() {authenticate(self.credentials, function() {if ($rootScope.authenticated) {$location.path("/");self.error = false;} else {$location.path("/login");self.error = true;}});};self.logout = function() {$http.post('logout', {}).finally(function() {$rootScope.authenticated = false;$location.path("/");});}});

在这里，我们定义了2个控制器和1个config，以及几个将由控制器使用的功能。 “ Config”用于使用ng-route定义路径和路由。控制器“导航”用于按定义调用函数登录，注销和认证。控制器“主页”用于在主页上发送问候语。

定义了authenticated变量以提供对页面上已认证用户的访问。

第2步：添加login.html部分页面

在这里，我们将制作一个局部页面login.html，它将在ng-view标记的div中呈现。

Login.html

<div class="alert alert-danger" ng-show="controller.error">There was a problem logging in. Please try again.
</div>
<form role="form" ng-submit="controller.login()"><div class="form-group"><label for="username">Username:</label> <input type="text"class="form-control" id="username" name="username" ng-model="controller.credentials.username"/></div><div class="form-group"><label for="password">Password:</label> <input type="password"class="form-control" id="password" name="password" ng-model="controller.credentials.password"/></div><button type="submit" class="btn btn-primary">Submit</button>
</form>

然后，我们需要RestControllers来使用Spring Security进行身份验证。我们将使用spring安全的默认身份验证用户。我们将使用以下方法制作一个UserController：

@RequestMapping("/user")public Principal user(Principal user) {return user;}

为了使Spring Security正常工作，我们需要在Application.java中添加它

@Configuration@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)protected static class SecurityConfiguration extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.httpBasic().and().authorizeRequests().antMatchers("/index.html", "/home.html", "/login.html", "/").permitAll().anyRequest().authenticated();}}

第3步：添加带有欢迎消息的home.html页面。

<h1>Message</h1>
<div ng-show="authenticated"><p>The ID is {{controller.message.id}}</p><p>The content is {{controller.message.content}}</p>
</div>
<div  ng-show="!authenticated"><p>Login to see your message</p>
</div>

“已认证”变量用于提供对页面的访问。

到目前为止，我们已成功使用Angular JS通过Spring Security登录和注销。但是在实际应用中，我们需要根据用户数据库对实际用户进行身份验证。在下一个博客中，我们将使用从用户DB进行身份验证的用户来构建应用程序。

PS：示例从Spring博客中引用： https : //spring.io/guides/tutorials/spring-security-and-angular-js/

翻译自: https://www.javacodegeeks.com/2016/05/build-new-web-application-scratch-using-spring-boot-thymeleaf-angularjs-part-3.html