當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/3 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了使用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的路徑

2.將主體標記為ng-app =“ myModule”，這意味著我們需要定義一個JavaScript模塊，Angular將其識別為名為“ myModule”的應用程序。 Angular模塊就像是應用程序不同部分的容器-控制器，服務，過濾器，指令等。

現在，我們需要在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中：

步驟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”用于使用ng-route定義路徑和路由。控制器“導航”用于按定義調用函數登錄，注銷和認證。控制器“主頁”用于在主頁上發送問候語。

定義了authenticated變量以提供對頁面上已認證用戶的訪問。

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

在這里，我們將制作一個局部頁面login.html，該頁面將呈現在ng-view標記的div中。

<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

總結

以上是生活随笔為你收集整理的使用Spring boot，Thymeleaf，AngularJS从零开始构建新的Web应用程序–第3部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：华为：老机型升级鸿蒙 HarmonyOS
下一篇：购买手机有哪些小技巧