Html中获取session中的值(实现登录后显示欢迎xxx)
以前都是使用jsp进行前台界面的开发,可以直接使用session,获取用户信息,在整个生命周期中都可以展示出用户信息,第一次使用HTML进行前台界面的开发,因为welcomexx是在左侧每个选项卡界面中都有的,所以登录后需要将用户信息保存到一个缓存中,是每个页面都可以获取到用户信息。在网上有很多说是用一个过渡的servlet,但是太麻烦了,经接触公司的另一个springbo...
·
以前都是使用jsp进行前台界面的开发,可以直接使用session,获取用户信息,在整个生命周期中都可以展示出用户信息,第一次使用HTML进行前台界面的开发,因为welcomexx是在左侧每个选项卡界面中都有的,所以登录后需要将用户信息保存到一个缓存中,是每个页面都可以获取到用户信息。
在网上有很多说是用一个过渡的servlet,但是太麻烦了,经接触公司的另一个springboot项目,发现可以用JavaScript对象的Windows sessionStorage属性实现,具体如下所以:
登录页面:
<form enctype="multipart/form-data" method="post" action="/user/login"> <div class="name"> <label>用户名:</label> <input type="text" name="username" id="username" tabindex="1" autocomplete="off" /> </div> <div class="password"> <label>密 码:</label> <input type="password" name="password" maxlength="16" id="" tabindex="2" /> </div> <div class="code"> <label>验证码:</label> <input type="text" name="securityCode" maxlength="4" id="code" tabindex="3" /> <div class="codeImg"> <img src="<%=request.getContextPath()%>/login/radomImage.jsp" id="radomimg"/> </div> </div> <div class="remember"> <input type="checkbox" id="remember" tabindex="4"> <label>记住密码</label> </div> <div class="login"> <button id="btn-login-submit" type="submit" tabindex="5">登录</button> </div> </form>
后台登录方法:
@ResponseBody @RequestMapping("/login") public ModelAndView login(HttpServletRequest request, HttpServletResponse response) { HttpSession session = request.getSession(); ModelAndView mv = new ModelAndView(); String loginNo = request.getParameter("username")+"";//登录工号 String password = request.getParameter("password")+"";//登录密码 String securityCode = (String)request.getParameter("securityCode");//输入的验证码 String randomStr = (String)request.getSession().getAttribute("randomStr");//系统生成的验证码 System.out.println(loginNo+password+securityCode+randomStr); /*if ("111".equals(loginNo)){ return "pages/index.html"; }else{ return "redirect:/login/login.jsp"; }*/ List<User> lists =new ArrayList(); User nameBean=new User("1","malz","malizhi"); lists.add(nameBean); session.setAttribute("username", loginNo); mv.addObject("username",loginNo); mv.setViewName("pages/index.html"); return mv; }
主页面index.html:
可以用以下方式获取到后台传参的值
<a class="btn account dropdown-toggle" data-toggle="dropdown" href="#">
<div class="avatar"><img src="../img/avatar.jpg" alt="Avatar" /></div>
<div class="user">
<span class="hello">Welcome!</span>
<span id="username" class="name" th:text="${username}"></span>
</div>
</a>
然后在JavaScript中把值放到sessionStorage中,这样就可以在其他页面通过sessionStorage获取用户信息。
<script> sessionStorage.setItem('USER_NAME',document.getElementById("username").innerHTML); </script>
如在报表界面chart.html:
获取到username的值显示在界面上,完美解决。
$(document).ready(function(){
$("#username").text(sessionStorage.getItem('USER_NAME'));
})
<a class="btn account dropdown-toggle" data-toggle="dropdown" href="#">
<div class="avatar"><img src="../img/avatar.jpg" alt="Avatar" /></div>
<div class="user">
<span class="hello">Welcome!</span>
<span id="username" class="name"></span>
</div>
</a>
更多推荐
已为社区贡献2条内容
所有评论(0)