SpringBoot入门系列：Spring Security 和 Angular JS(1)

最新推荐文章于 2024-08-07 18:21:52 发布

官小飞

最新推荐文章于 2024-08-07 18:21:52 发布

阅读量1.8k

点赞数

分类专栏： Spring

本文链接：https://blog.csdn.net/z742182637/article/details/62042605

版权

Spring 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Spring Security 和 Angular JS系列，是对http://www.oschina.net/translate/spring-security-and-angular-js一文的解析。

受保护的单页面应用程序

这一节我们要展示将Spring Security、Spring Boot和Angular JS放在一起使用的一些不错的特性，它们能提供令人愉快且安全的用户体验。对于Spring和Angular JS的初学者而言易于上手，而且也能为专家们所用。这实际上是有关于Spring Security和Angular JS的一系列文章的首篇，成功地对新特性进行了逐一的阐述。我们将会在第二阶段以及后续阶段中对应用程序进行提升，不过伺此后的主要变化是架构上的，而不是功能方面的。

Spring 和单页面应用程序

HTML5，丰富的基于浏览器的特性，以及“单页面应用程序”对于现代开发者而言都是极具价值的工具，但任何具备实际意义的交互都将涉及到后台服务器，静态内容(HTML, CSS 和 JavaScript)也是如此，因而我们将需要一个后台服务器。后台服务器可以扮演大量的角色：托管静态内容，有时（不过如今不是那么频繁了）渲染动态的HTML，对用户进行认证，为需要受到保护的资源提供安全访问机制，还有（最后但并不代表最不重要的一个）就是在浏览器中通过HTTP和JSON（有时也被称作REST API)同JavaScript进行交互。

Spring 一向是用来构建后台功能（特别是在企业级领域中）的流行技术，而随着 Spring Boot 这样的事物的出现，这方面的工作变得从未如此简单。让我们来看看如何使用Spring Boot、Angular JS以及Twitter 的Bootstrap 从零开始去构建一个新的单页面应用程序。选择这一技术栈并没有特殊原因，不过是因为相当流行，尤其是核心Spring在企业级Java市场深受青睐, 因此值得将其作为起点。

创建一个新工程

1、在浏览器中打开http://start.spring.io

Artifact：spring-security-and-angular-js-basic

Description：Spring Security Angular Samples

com.spring.security.angularjs

勾选Security、Web

2、生成工程，下载到本地，再解压，再统统Existing Maven Project导入eclipse

导入Angular JS项目依赖

在src/main/resources/static下，拷贝入Angular JS的一些普通依赖文件

添加一个主页

单页面应用程序的核心就是一个静态的"index.html", 所以我们首先来创建一个 (在 "src/main/resources/static" 或者 "src/main/resources/public" 中):

<!doctype html>
<html>
<head>
<title>Hello AngularJS</title>
<link href="bootstrap/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}
</style>
</head>

<body ng-app="hello">
  <div class="container">
    <h1>Greeting</h1>
    <div ng-controller="home" ng-cloak class="ng-cloak">
      <p>The ID is {{greeting.id}}</p>
      <p>The content is {{greeting.content}}</p>
    </div>
  </div>
  <script src="angular/angular.min.js" type="text/javascript"></script>
  <script src="js/hello.js"></script>
</body>
</html>

hello.js

angular.module('hello', [])
  .controller('home', function($scope) {
    $scope.greeting = {id: 'xxx', content: 'Hello World!'}
})

应用程序的名称为 "hello"，而它有一个空的(而且是多余的) "配置（config）"，还有一个叫做“home”的空“控制器（controller）"。"home" 控制器会在我们载入”index.html“时被调用，因为我们已经用 ng-controller="home" 对内容div进行了装饰。
注意我们将一个神奇的 $scope 注入到了控制器函数 (Angular 通过命名约定来做依赖注入，并且会对函数参数的名称进行识别)注入了进去。$ scope 随后会用于函数中去设置控制器所负责的UI元素的内容和行为。
如果你在 "src/main/resources/static/js"下面添加那个文件，你的app现在就会是安全并且实用的，它会显示 "Hello World!"。这个是有HTML中的Angular实用占位符 {{greeting.id}} 以及 {{greeting.content}} 来进行渲染的。

主页的特性

一些在<head>中引入的CSS，bootstrap/bootstrap.min.css, 还有一个定义在"ng-cloak"类中的内联样式表。
"ng-cloak" 类被应用于内容<div>，如此内容就可以一直隐藏知道Angular JS有机会对其进行处理 (这就在初始化页面加载期间的"闪烁")。
<body> 被标记为 ng-app="hello" ，其意义就是我们需要定义一个JavaScript模块，Angular就会将其识别为一个叫做"hello"的应用程序。
所有的CSS类(除开"ng-cloak"之外的)都来自Twitter Bootstrap。只要我们正确设置好样式表，它们就能让东西变得美观起来。
问候语的内容是使用双中括弧对来标识的, 例如 {{greeting.content}}，这样稍后就会有Angular (根据外围的<div>上的ng-controller指令，使用的是一个叫做“home" 的 "控制器")对其进行过滤。
Angular JS (以及Twitter Bootstrap) 是在<body>的底部引入的，那样浏览器就可以在处理之前先处理所有的HTML。
我们还引入了一个单独的 "hello.js"，这里是我们定义应用程序行为的地方.