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

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


 




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


											
AngularJS之登录显示用户名的更多相关文章
	

    
								
  1. Linux 下shell显示-bash-4.1$不显示用户名路径的解决方法
		
    Linux CentOS下shell显示-bash-4.1$不显示用户名路径的解决方法   问题描述:   CentOS下新增一个用户,登录进去之后shell脚本的信息如下:     而不是我们经常看 ...
    
		
    2. 
						
  2. CentOS下shell显示-bash-4.1#不显示用户名路径的解决方法
		
    CentOS下shell显示-bash-4.1$不显示用户名路径的解决方法 问题描述: CentOS下新增一个用户,登录进去之后shell脚本的信息如下: 而不是我们经常看到的username@hos ...
    
		
    3. 
						
  3. Linux CentOS下shell显示-bash-4.1$ 不显示用户名和主机名的解决方法
		
    CentOS下新增加一个用户,登录进去会发现shell脚本信息没有显示用户名和主机名,反而显示的是-bash-4.1$,如图所示: 而不是我们经常看到的username@hostname$的组合,看起 ...
    
		
    4. 
						
  4. CentOS下shell显示-bash-4.1$不显示用户名路径
		
    Linux CentOS下shell显示-bash-4.1$不显示用户名路径的解决方法. 问题描述: CentOS下新增一个用户,登录进去之后shell脚本的信息如下: -bash-4.1$ \ -b ...
    
		
    5. 
						
  5. ORACLE数据库登录显示ORA-28001: the password has expired
		
    Oracle数据库登录显示 "这个密码已过期,请输入新密码" 点击win键 找到Oracle的SQL Plus 点击打开之后输入登录的用户名密码,然后会显示该密码已过期,输入新口令 ...
    
		
    6. 
						
  6. 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层（页面代码将登录的用户名和密码存在cookie）,中间页面中存在一个超链接，单击超链接可以链接到第三个页面查看信息。若选择“
		
    Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...
    
		
    7. 
						
  7. CAS单点登录中文用户名乱码问题
		
    CAS单点登录中文用户名乱码问题,有两种情况 1. CAS server乱码 即在向server端提交用户名和密码时,发生了乱码,解决方法是: 打开WEB-INF/web.xml,在其它的Filter ...
    
		
    8. 
						
  8. AngularJS进阶(十)AngularJS改变元素显示状态
		
    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...
    
		
    9. 
						
  9. cookie保存登录的用户名和密码
		
    用cookie保存登录的用户名和密码,当用户访问网站的时候,获取cookie的用户名和密码,通过用 用cookie保存登录的用户名和密码,当用户访问网站的时候,获取cookie的用户名和密码,通过用户 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Openvpn配置文件详解
			
    一.vars配置文件 vars配置文件的主要内容如下: cat vars |grep -vE "^#|^$" KEY_DIR定义key生成的目录. KEY_SIZE定义生成私钥的大 ...
    
			
    2. 
						
  2. _proto_ 和prototype自己的理解
			
    对象(obj)并不具有prototype属性,只有函数(function)才有prototype属性 1.在JS里,万物皆对象. 方法(Function)是对象,方法的原型(Function.prot ...
    
			
    3. 
						
  3. (已解决)Eclipse报错：Could not find XXX.apk. 没有Android项目命名. There is no android project named
			
    可能是你把当前项目设置为library项目了,按以下步骤切换回普通项目: 选择 Project->Properties 在左边的列表中,选择 Android 取消钩中"Is Libra ...
    
			
    4. 
						
  4. equals和==的区别小结
			
    ==: == 比较的是变量(栈)内存中存放的对象的(堆)内存地址,用来判断两个对象的地址是否相同,即是否是指相同一个对象.比较的是真正意义上的指针操作. 1.比较的是操作符两端的操作数是否是同一个对象 ...
    
			
    5. 
						
  5. .NET 黑魔法 - asp.net core 日志系统
			
    asp.net core 里如何记录日志呢? 这要从asp.net core的依赖注入说起,在asp.net core里的依赖注入真是无所不在,各种面向切面的接口与事件. 好吧,来点干货. 首先,我们 ...
    
			
    6. 
						
  6. PHP面向对象构造和析构函数
			
    一.构造函数 用来生成对象的函数 <?php class Ren{ public $name; public $sex;//性别是人一出生就知道的,可以用构造函数来定义 /*public fun ...
    
			
    7. 
						
  7. QT5   QT4--LNK2019 无法解析的外部符号
			
    新创建的工程 #include <QtWidgets/QApplication> #include <QtWidgets/QWidget> #include <QtWid ...
    
			
    8. 
						
  8. WIN32窗口类风格和窗口风格(备查询)
			
    一.WNDCLASS typedef struct { UINT cbSize //这个结构体的长度,一般用sizeof(WNDCLASSEX)设置 UINT style //窗口式样 WNDPROC ...
    
			
    9. 
						
  9. 80x86的内存寻址机制
			
    80x86的内存寻址机制 80386处理器的工作模式: 模式. 模式之间可以相互转换,而模式之间不可以相互转换. DOS系统运行于实模式下,Windows系统运行与保护模式下. 实模式: 80386处 ...
    
			
    10. 
						
  10. Linux     运维测试及第三应用及测试工具
			
    一 .第三方应用及测试工具链接地址 https://pan.baidu.com/s/1rLQ5NCZvxcy93YQ4fGFaBQ 1.linux LSI系列raid卡监测工具 1)使用参数详解链接: ...
    
			
    11.