SpringBoot入门系列:Spring Security 和 Angular JS

Posted 官小飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SpringBoot入门系列:Spring Security 和 Angular JS相关的知识,希望对你有一定的参考价值。

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",这里是我们定义应用程序行为的地方.

运行应用程序

1、在exlips运行或者在在命令行上 mvn spring-boot:run,这时打印日志入图:


2、在浏览器中输入http://localhost:8080/index.html,当你加载主页时,应该会遇到一个浏览器对话框,要求输入用户名和密码 (用户名就是 "user",而密码则会在启动时打印在控制台日志中,上图的红字)。如图


用户名输入:user,密码输入console中Using default security password的,之后如下

小结

       工程仅仅依赖spring-boot-starter-security,即带来有一定的安全管理。

以上是关于SpringBoot入门系列:Spring Security 和 Angular JS的主要内容,如果未能解决你的问题,请参考以下文章

Java之Spring Boot入门到精通IDEA版SpringBoot原理分析,SpringBoot监控(一篇文章精通系列)下

SpringBoot入门系列:Spring Security 和 Angular JS

SpringBoot入门系列:Spring Security 和 Angular JS

Spring Boot干货系列:优雅的入门篇

Spring Boot入门系列六( SpringBoot 整合thymeleaf)

Spring Boot干货系列:优雅的入门篇