接上一篇：CRM-登录功能回车登录和记住密码
一、要实现的页面
二、业务主页面代码如下
2.1 <head>内容
- 使用JSP普通脚本<%%>定义basePath
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
-
request.getScheme()获取协议，request.getServerName()获取本机ip，request.getServerPort()获取端口号，request.getpageContext()获取项目路径，最后不忘记加“/”
-
head中添加base标签，href的值用输出脚本<%= %>获取刚刚定义的basePath字符串
-
添加jquery-5.3.1.js、bootstrap.min.js和bootstrap.min.css路径
-
link标签css文件（href=“”），script标签js文件（src=“”）
-
路径为…/…/…/jquery。。。，然后ctrl+r把所有…/…/…/替换为空格
2.2 <script>内容
- 这个window.onload是实现鼠标悬停到导航栏的li标签，有变色效果的
- 具体用法如图
2.3 <body>内容
溢出的内容可以通过滚动呈现
2.3.1 模态框div
- 模态框、左侧的导航栏、下拉列表、图标的代码是从bootstrap官网上复制的
- 要实现点击退出弹出模态框的功能
- 模态框的div的id为isLogout
2.3.2 顶部div的下拉列表
- 退出的li标签添加data-target=“#isLogout” data-toggle="modal"属性，实现点击弹出模态框的效果
2.3.1 中间div的style
中间代码的
三、实现功能
- 点击提示框的退出按钮，清除登录数据，跳转到项目首页，项目首页调用Controller层方法自动跳转到登录页面
- 对退出按钮添加onclick()属性，
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="logout();">退出</button>
<button type="button" class="btn btn-primary" onclick="closeModal();">取消</button>
-
js标签里添加logout()、closeModal()方法
-
logout()方法实现调用controller层方法，实现数据删除，并返回到首页
-
closeModal()方法实现点击取消按钮，模拟这个X的点击事件
6. 添加id=“closeBtn”
7. scripte标签实现方法
(1)跳转到controller层UserController.java类调用logout()方法
(2)模拟点击事件
```java
<script type="text/javascript">
//跳转到controller层UserController.java类调用logout()方法
function logout() {
window.location.href = "settings/qx/user/logout.do";
}
//模拟点击事件
function closeModal() {
$("#closeBtn").click();
}
</script>
四、 UserController
4.1 logout()方法
- 已经实现了1）跳转到登录页面2）验证用户名和密码是否正确、是否激活、是否过期或失效、保存user到session作用域中，如果用户选中Rememben me，就把用户名和密码保存在cookie中。
- 下面实现清除cookie和session作用域中的数据，返回值为“redirect:/”，重定向跳转
- 重点是删除cookie，就是新建一个和保存用户名和密码的Cookie的key值相同的Cookie对象，再把生命周期设置为0
- 销毁所有session就是调用invalidate()方法
4.2 logout()方法的返回值
最后返回的是 redirect:/，我们发现没有加页面路径，那为什么可以跳转到登录页面
- 这里是业务主页面的首页，我们 在写项目首页时，
定义了一个indexController，
它的RequestMapping(“/”)就是只写了/ - 给Controller层 的index()方法返回值是index
- mvc.xml配置了视图解析器，为方法返回值index添加前缀/WEB-INF/pages，后缀.jsp
- 所以可以访问到index.jsp
- 在index.jsp中
<script type="text/javascript">
document.location.href = "/settings/qx/user/toLogin.do";
</script>
- 调用UserController类的toLogin()方法，跳转到登录页面
- 所以可以点击退出登录按钮就直接跳转到login.jsp页面
五、 UserController完整代码
package com.lyx.settings.web.controller;
import com.lyx.commons.contants.Contants;
import com.lyx.commons.domain.ReturnObject;
import com.lyx.settings.domain.User;
import com.lyx.settings.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/settings/qx/user/toLogin.do")
public String toLogin() {
return "settings/qx/user/login";
}
@RequestMapping("/settings/qx/user/login.do")
public @ResponseBody Object login(String loginAct, String loginPwd, String isRemPwd, HttpServletResponse response, HttpServletRequest request) {
//封装参数
Map<String, Object> map = new HashMap<>();
map.put("LoginAct", loginAct);
map.put("LoginPwd", loginPwd);
//调用service层方法
User user = userService.queryUserByLoginActAndPwd(map);
ReturnObject returnObject = new ReturnObject();
if (user == null) {
//登录失败，用户名或密码错误
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("用户名或密码错误");
} else {
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String format = simpleDateFormat.format(new Date());
if (format.compareTo(user.getuExpireTime()) > 0) {
//登录失败，账号已经过期了
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("账号已过期");
} else if ("0".equals(user.getuLockState())) {
//登录失败，状态被锁定
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("状态被锁定");
} else if(!user.getuAllowIps().contains(request.getRemoteAddr())){
//判断当前用户的ip地址是不是包含在数据库表里的u_allow_ips
//不包含，登录失败，ip受限制
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("ip受限制");
}else{
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
//把user保存到session作用域中
HttpSession session = request.getSession();
session.setAttribute(Contants.SESSION_USER,user);
//
if("true".equals(isRemPwd)){
Cookie cookie = new Cookie("loginAct", loginAct);
cookie.setMaxAge(10*24*60*60);
response.addCookie(cookie);
Cookie cookie2 = new Cookie("loginPwd", loginPwd);
cookie2.setMaxAge(10*24*60*60);
response.addCookie(cookie2);
}else {
Cookie cookie3 = new Cookie("loginAct", "1");
cookie3.setMaxAge(0);
response.addCookie(cookie3);
Cookie cookie4 = new Cookie("loginPwd", "0");
cookie4.setMaxAge(0);
response.addCookie(cookie4);
}
}
}
return returnObject;
}
@RequestMapping("/settings/qx/user/logout.do")
public String logout(HttpServletResponse response,HttpSession session){
//清空cookie
Cookie cookie3 = new Cookie("loginAct", "1");
cookie3.setMaxAge(0);
response.addCookie(cookie3);
Cookie cookie4 = new Cookie("loginPwd", "1");
cookie4.setMaxAge(0);
response.addCookie(cookie4);
session.invalidate();//销毁所有session
return "redirect:/";
}
}
六、index.jsp业务主页面完整代码
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery/bootstrap-3.4.1/dist/css/bootstrap.min.css">
<script type="text/javascript" src="jquery/jquery-3.5.1.js"></script>
<script type="text/javascript" src="jquery/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
function logout() {
window.location.href = "settings/qx/user/logout.do";
}
function closeModal() {
$("#closeBtn").click();
}
});
window.onload = function () {
var ps = document.getElementById("navigation").getElementsByTagName("li");
for (var i in ps) {
ps[i].onmouseover = function () {
this.setAttribute("class", "active");
}
ps[i].onmouseout = function () {
this.removeAttribute("class");
}
}
}
</script>
</head>
<body>
<div>
<%--提示框，默认隐藏--%>
<div id="isLogout" class="modal fade" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button id="closeBtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">提示框</h4>
</div>
<div class="modal-body"><p>确定退出吗？</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="logout();">退出</button>
<button type="button" class="btn btn-primary" onclick="closeModal();">取消</button>
</div>
</div><!-- /.modal-content -->
</div>
</div>
<%--顶部--%>
<div style="background-color: #3c3c3c;width: 100%;height: 50px;margin-top: -20px">
<div class="page-header" style="color: wheat;margin-top: 0px;">
<h3>客户信息管理系统<small>@xmq</small></h3>
<%--下拉列表--%>
<div class="btn-group" style="float: right;right:60px; top: -30px;width: 20px;">
<button type="button" style="width: 70px;text-align: left;" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
${sessionScope.sessionUser.uLoginAct}<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>Action</a></li>
<li><a>hhh</a></li>
<li><a>登录</a></li>
<li id="logout" data-target="#isLogout" data-toggle="modal"
style="text-align:left;left: 5px;"><a><span class="glyphicon glyphicon-off"
aria-hidden="true"></span>
退出</a></li>
</ul>
</div>
</div>
</div>
<div style="position: absolute;top:50px;bottom: 30px;left:0px;right: 0px;">
<%--左侧导航栏--%>
<div style="left:0px;width: 18%;height: 100%;position: relative;overflow: auto">
<ul id="navigation" class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
工作台</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
动态</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
审批</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
客户公海</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
市场活动</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
线索（潜在客户）</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
客户</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
联系人</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
交易</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
售后回访</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
统计图表</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
报表</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
销售订单</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
发货单</a></li>
</ul>
</div>
<%--右侧工作区--%>
<div id="workArea" style="position:absolute;top:0px;left:18%;width:82%;height:100%;">
<iframe style="border-width:0px;width:100%;height:100%;" name="workAreaFrame">
</iframe>
</div>
</div>
</div>
</body>
</html>
2814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
