一个网站的导航栏需要被使用在多个网页中，因此为了方便开发。我们使用 DOM API 来生成一个导航栏。

导航栏 JS DOM

let body = document.querySelector("body");// 生成导航栏
let navDiv = document.createElement("div");
navDiv.className = "nav";// 退出标签
let exitA = document.createElement("a");
exitA.id = "exit";
exitA.innerHTML = "退出登录";// 加入页面
body.appendChild(navDiv);navDiv.appendChild(exitA);

退出登录

编写 JavaScript

让用户再次选择是否退出，防止不小心点到退出的情况。退出登录操作不要求要登录后才能退出，因此我们让没有登录的用户也可以跳转到登录页面

exitA.onclick = function () {if (confirm("确认退出吗")) {$.ajax({url: "userinfo/logout",type: "post",data: "",success: function (result) {if (result.code == 200 && result.data == "success") {location.assign("login.html");} else {// 即使退出失败，也返回到登录页面location.assign("login.html");}}});}
}

编写 controller

先将 URL userinfo/logout 添加到放行名单中，这样即使没有登录也可以在主页返回到登录页面中。由于退出操作还需要将 session 中的 userinfo 移除，所以还要将 HttpServletRequest 传给 service

@RequestMapping("/logout")
public HashMap<String, Object> logout(HttpServletRequest request) {return userinfoService.logout(request);
}

编写 service

尝试从 request 中获取 session，若获取不到则用户未登录直接返回，若获取到 session 且 session 中有 userinfo 则将 session 中的 userinfo 移除

public HashMap<String, Object> logout(HttpServletRequest request) {HttpSession session = request.getSession(false);if (session != null &&session.getAttribute(ConstantVariable.SESSION_USERINFO_KEY) != null) {session.removeAttribute(ConstantVariable.SESSION_USERINFO_KEY);return AjaxResult.success("用户退出成功", "success");} else {return AjaxResult.fail(400, "用户未登录");}
}

编写完毕

【SpringSSM项目】搏击俱乐部主页导航栏用户退出登录相关推荐

用户退出登录清空cookie
@ApiOperation(value = "用户退出登录", notes = "用户退出登录", httpMethod = "POST") ...
综合设计一个OPPE主页--导航栏的设计
先进行内容框分析在样式设置 /*初始化样式*/ /*将默认的样式清零*/ *{padding: 0;margin: 0; } /*清除列表前面的标识 */ ol,ul{list-style-type ...
每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载
我是c站的一个小博主L_ar,近期我会每天分享前端知识包括(原生的web语句,以及vue2和vue3,微信小程序的写法及知识点)本篇文章收录于html特效专栏中,如果想每天在我这学到一些东西,请关注我 ...
项目中的防止同用户异地登录问题
来公司两个月了, 进组也有1个多月,这是我的第一份工作, 也是第一个项目, 所以决定留下文字记录还是好些,由于入组相对晚,我负责的也相对独立些 -- 系统管理, 首先要做的就是登录, 既然是应用系统 ...
Django笔记-实现用户退出登录(logout)
Django笔记-实现用户的登出 Django logout()方法介绍: 一.登录login(user,request): 将通过认证的用户的唯一标识信息(主键id),通过哈希加密写入到当前sess ...
关闭浏览器用户退出登录
window.onbeforeunload = function() {//这里放退出登录ajax,把异步关掉 } 直接放在页面中,关闭浏览器时,会自动调用该方法
【项目】主页导航条popup窗，购物车接口部分
对应代码: - material组件 1. material.module.ts import { NgModule } from '@angular/core'; import { CommonMo ...
【Android项目实战 | 从零开始写app (六) 】用TabLayout+ViewPager搭建App 框架主页面底部导航栏
本篇实现效果: 搭建app框架的方式有很多,本节主要用TabLayout+ViewPager搭建App框架,这种方式简单易实现,在主页中加载Fragment碎片,实现不同功能页面的切换效果图如下: 文 ...
【Android项目实战 | 从零开始写app(十三)】实现用户中心模块清除token退出登录信息修改等功能
五一后,被ji金伤了,哇呜呜,还是得苦逼老老实实打工写代码,看下面吧本篇实现效果: 实现登录用户名展示到用户中心页面上,并且页面有个人信息,订单列表,修改密码,意见反馈发送到服务端,前面登录后,通过 ...

【SpringSSM项目】搏击俱乐部主页导航栏用户退出登录

导航栏 JS DOM

退出登录

编写 JavaScript

编写 controller

编写 service

编写完毕

【SpringSSM项目】搏击俱乐部主页导航栏用户退出登录相关推荐

最新文章

热门文章

【SpringSSM项目】搏击俱乐部 主页导航栏 用户退出登录

导航栏 JS DOM

退出登录

编写 JavaScript

编写 controller

编写 service

编写完毕

【SpringSSM项目】搏击俱乐部 主页导航栏 用户退出登录相关推荐

最新文章

热门文章

【SpringSSM项目】搏击俱乐部主页导航栏用户退出登录

【SpringSSM项目】搏击俱乐部主页导航栏用户退出登录相关推荐