效果图:在这里会显示出来用户名
使用AngularJs进行这样效果
第一步:写ng-app
// 定义模块: var app = angular.module("pinyougou",[]);
第二步定义控制器
app.controller("indexController",function($scope,loginService){
$scope.showName = function(){
loginService.showName().success(function(response){
$scope.loginName = response.username;
});
}
});
第三步定义服务层
app.service("loginService",function($http){
this.showName = function(){
return $http.get("../login/showName.do");
}
});
第四步将定义好的引入到页面中
<!-- 引入angular的js -->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/controller/indexController.js"></script>
<script type="text/javascript" src="../js/service/loginService.js"></script>
在body标签上引入如下
<body class="hold-transition skin-green sidebar-mini" ng-app="pinyougou" ng-controller="indexController" ng-init="showName()">
在需要进行输出的地方进行输出
<span class="hidden-xs">{{loginName}}</span>
然后使用spring安全框架的时候,可以使用下面的代码进行退出,不过需要在xml配置文件中进行配置
<a href="../logout" class="btn btn-default btn-flat">注销</a>
controller层的代码为:
package com.qingmu.core.controller;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
/**
* @Auther:qingmu
* @Description:脚踏实地,只为出人头地
* @Date:Created in 21:52 2019/4/12
*/
@RestController
@RequestMapping("/login")
public class LoginController {
@RequestMapping("/showName")
public Map showName() {
//使用spring安全框架中的user对象,从里面将用户名取出来,然后存入到map集合中.
User principal = (User) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
Map hashMap = new HashMap();
hashMap.put("username", principal.getUsername());
return hashMap;
}
}
按照上面的步骤就可以完成一个简单的用户名显示.