AngularJS之登录显示用户名

效果图:在这里会显示出来用户名

使用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;
    }
}


 




按照上面的步骤就可以完成一个简单的用户名显示.


 







            

            
posted @ 
2019-04-13 21:07 
King-DA 
阅读(432) 
评论(1) 
编辑 
收藏 
举报