陕西省建设监理协会官方网站,汉化版网站开发软件,毕业设计做网站 如何做,南宁营销型网站在之前的博客中#xff0c;我们使用Thymeleaf#xff0c;Bower和Bootstrap构建了登录页面#xff0c;并将其部署到了Heroku。 在此博客中#xff0c;我们将介绍用于前端的AngularJS和在后端的Spring Boot Web服务的一些功能。 我们将从“登录/注销”部分开始。 让我们开始… 在之前的博客中我们使用ThymeleafBower和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 typetext/javascript/script 2.将主体标记为ng-app “ myModule”这意味着我们需要定义一个JavaScript模块Angular将其识别为名为“ myModule”的应用程序。 Angular模块就像是应用程序不同部分的容器-控制器服务过滤器指令等。 body ng-appmyModule 现在我们需要在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 MapString,Object home() {MapString,Object model new HashMapString,Object();model.put(id, UUID.randomUUID().toString());model.put(content, Hello World);return model;} 现在如果将这段代码放在单独的div中的index.html中则可以看到该div现在正在从后端动态加载数据。 要查看HTML中的数据我们需要这样做 div ng-controllerhome as homepThe ID is {{home.message.id}}/ppThe content is {{home.message.content}}/p
/div 到目前为止我们仅能在静态页面中使用angularJS并从后端Rest Controller检索一些信息并使用AngularJS进行渲染。 建筑物登录/注销 现在我们在索引页面中有了angularJS模块让我们使用Spring Security实现登录/注销功能。 要构建登录/注销功能我们需要制作3个HTML页面。 1index.html –这将是登录页面我们将在其中添加导航以登录和注销。 我们已经有 2home.html –这将是用户登录后将重定向到的页面。 3login.html –这将是带有用户名和密码字段的页面用于输入要登录的凭据。 对于这些页面之间的路由我们将使用ng-route 。 ngRoute模块为angular应用程序提供路由和深层链接服务和指令。 要使用bower安装ngRoute我们将执行以下命令 bower install angular-routeX.Y.Z 然后将其包含在index.html中 script srcpath/to/angular.js/script
script srcpath/to/angular-route.js/script步骤1在index.html中添加导航 为了添加导航我们需要在主体下面添加此代码块。 div ng-controllernavigation as nav classcontainerul classnav nav-pills roletablistli classactivea href#/home/a/lilia href#/loginlogin/a/lili ng-showauthenticateda href ng-clicknav.logout()logout/a/li/ul/divdiv ng-view classcontainer/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 classalert alert-danger ng-showcontroller.errorThere was a problem logging in. Please try again.
/div
form roleform ng-submitcontroller.login()div classform-grouplabel forusernameUsername:/label input typetextclassform-control idusername nameusername ng-modelcontroller.credentials.username//divdiv classform-grouplabel forpasswordPassword:/label input typepasswordclassform-control idpassword namepassword ng-modelcontroller.credentials.password//divbutton typesubmit classbtn btn-primarySubmit/button
/form 然后我们需要RestControllers来使用Spring Security进行身份验证。 我们将使用spring安全的默认身份验证用户。 我们将使用以下方法制作一个UserController RequestMapping(/user)public Principal user(Principal user) {return user;} 为了使Spring Security正常工作我们需要在Application.java中添加它 ConfigurationOrder(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页面。 h1Message/h1
div ng-showauthenticatedpThe ID is {{controller.message.id}}/ppThe content is {{controller.message.content}}/p
/div
div ng-show!authenticatedpLogin 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
