>>>2021-07-08 周四
需要在侧边栏以及顶栏查询当前登录的用户信息，并显示用户名，头像，未读信息列表，后续也会添加未处理任务列表
关键代码：
前端：
使用JQuery Ajax进行post请求以获取数据，然后显示返回结果，关键JS如下（前端代码会在本文尾部贴出）
$(document).ready(function () {
<%--$("button").click(function () {--%>
<%-- $.post("${pageContext.request.contextPath}/user/findLoginUser.do");--%>
<%--});--%>
$.ajax({
url: "${pageContext.request.contextPath}/user/checkLoginUser.do",
type: "post",
dataType: "json",
success: function (result) {
showImg(result);
}
});
});
function showImg(result) {
var img = result.url;
var userId=result.id;
<%--document.write('<img src="${pageContext.request.contextPath}' + img + '" class="img-circle" alt="User Image">')--%>
$("#img3").attr('src', '${pageContext.request.contextPath}' + img);
$("#img2").attr('src', '${pageContext.request.contextPath}' + img);
$("#img1").attr('src', '${pageContext.request.contextPath}' + img);
$("#asideNameLink").attr('href','${pageContext.request.contextPath}/user/findById.do?id='+userId);
}
后端：
controller:
/**
* @author :WILK
* @ClassName CanteenUserController
* @date 2021/5/23 13:19
* @Version 1.0
* @apiNote :
*/
@Controller
@RequestMapping("/user")
public class CanteenUserController {
@Autowired
private ICanteenUserService iCanteenUserService;
@ResponseBody
@RequestMapping(value = "/checkLoginUser.do", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public CanteenUser checkLoginUser() throws Exception {
String userName = SecurityContextHolder.getContext().getAuthentication().getName();
CanteenUser loginUser = iCanteenUserService.findByUserName(userName);
return loginUser;
}
}
此处使用 " SecurityContextHolder.getContext().getAuthentication().getName() " 是因为使用了spring security框架搭建了登录操作，如果未使用该框架也可在js代码中传入登录后的id或name。
service：
/**
* @author :WILK
* @ClassName CanteenUserServiceImpl
* @date 2021/5/23 13:03
* @Version 1.0
* @apiNote :
*/
@Service
@Transactional
public class CanteenUserServiceImpl implements ICanteenUserService {
@Autowired
private ICanteenUserDao icUserDao;
@Override
public CanteenUser findByUserName(String u_name) throws Exception {
return icUserDao.findByUserName(u_name);
}
}
dao:
/**
* @author :WILK
* @ClassName ICanteenUserDao
* @date 2021/5/23 12:28
* @Version 1.0
* @apiNote :
*/
public interface ICanteenUserDao {
@Select("select * from t_canteen_user")
@Results(id = "usersMap", value = {
@Result(id = true, property = "id", column = "u_id"),
@Result(property = "cuName", column = "u_name"),
@Result(property = "cuPwd", column = "u_pwd"),
@Result(property = "cuSex", column = "u_sex"),
@Result(property = "cuCreateDate", column = "u_createDate"),
@Result(property = "mail", column = "u_mail"),
@Result(property = "qq", column = "u_qq"),
@Result(property = "weChat", column = "u_wechat"),
@Result(property = "phone", column = "u_phone"),
@Result(property = "status", column = "u_status"),
@Result(property = "url", column = "u_url"),
@Result(property = "balance", column = "balance"),
@Result(property = "couponList", column = "u_id", javaType = java.util.List.class, many = @Many(select = "com.wilk.dao.ICouponDao.findCouponsByUserId")),
@Result(property = "roleList", column = "u_id", javaType = java.util.List.class, many = @Many(select = "com.wilk.dao.IRoleDao.findRoleByUserId")),
@Result(property = "orderList", column = "u_id", javaType = java.util.List.class, many = @Many(select = "com.wilk.dao.IOrderDao.findOrderByUserId")),
@Result(property = "readMsgList", column = "u_id", javaType = java.util.List.class, many = @Many(select = "com.wilk.dao.IMessageRecipientDao.findMRListByUserId")),
@Result(property = "messageList", column = "u_id", javaType = java.util.List.class, many = @Many(select = "com.wilk.dao.IMessageDao.findMsgBySenderId"))
})
List<CanteenUser> findAll() throws Exception;
@Select("SELECT * FROM t_canteen_user WHERE u_name=#{u_name}")
@ResultMap(value = "usersMap")
public CanteenUser findByUserName(String u_name) throws Exception;
}
domain:
/**
* @author :WILK
* @ClassName CanteenUser
* @date 2021/5/22 22:14
* @Version 1.0
* @apiNote :
*/
public class CanteenUser implements Serializable {
private String id;
private String cuName;
private String cuPwd;
private String cuSex;
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")
private Date cuCreateDate;
private String mail;
private String qq;
private String weChat;
private String phone;
private String status;
private String url;
private Double balance;
private Canteen userSCanteen;
private List<Coupon> couponList;
private List<Role> roleList;
private List<Order> orderList;
private List<Message> messageList;
private List<MessageRecipient> readMsgList;
//后面的getter和setter，以及toString均省略，可自行添加
}
存在问题：
因为顶栏和侧栏代码是通过<jsp:include/> 来进行引用（具体看尾部），因此每打开一个页面都会触发js发送post请求，对数据库内数据进行查询，多用户操作会明显增大服务器负担。
解决思路：
使用前端的sessionstorage进行存储，方法参考自文章《如何将数据缓存到前端_ITsmallchen的博客-CSDN博客_前端怎么缓存数据》
解决方法：
1.先在CanteenUserController.java中修改代码以方便在控制台监控数据
@ResponseBody
@RequestMapping(value = "/checkLoginUser.do", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public CanteenUser checkLoginUser() throws Exception {
String userName = SecurityContextHolder.getContext().getAuthentication().getName();
CanteenUser loginUser = iCanteenUserService.findByUserName(userName);
System.out.println(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>进行了一次user/checkLoginUser.do请求<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<");
System.out.println("获取到已登录用户的userName是：" + userName);
System.out.println("获取到已登录用户的id是：" + loginUser.getId());
return loginUser;
}
2.将原来的js代码修改，具体如下：
$(document).ready(function () {
var userSession = getUserSession();
if ($.isEmptyObject(userSession)) {
getLoginUser();
}else {
showImg(userSession);
}
});
function getLoginUser() {
$.ajax({
url: "${pageContext.request.contextPath}/user/checkLoginUser.do",
type: "post",
dataType: "json",
success: function (result) {
showImg(result);
setUserSession(result);
}
});
}
function setUserSession(user) {
sessionStorage.clear();
window.sessionStorage.setItem("loginUserSession", JSON.stringify(user));
}
function getUserSession() {
var userSession = JSON.parse(window.sessionStorage.getItem("loginUserSession"));
return userSession;
}
function showImg(result) {
var img = result.url;
var userId = result.id;
<%--document.write('<img src="${pageContext.request.contextPath}' + img + '" class="img-circle" alt="User Image">')--%>
$("#img3").attr('src', '${pageContext.request.contextPath}' + img);
$("#img2").attr('src', '${pageContext.request.contextPath}' + img);
$("#img1").attr('src', '${pageContext.request.contextPath}' + img);
$("#asideNameLink").attr('href', '${pageContext.request.contextPath}/user/findById.do?id=' + userId);
}
修改完毕，在浏览器中按F12可查看缓存数据如下：
控制台中，修改js代码前（在浏览器中进行了多步操作后）:
修改js代码后（在浏览器中进行了多步操作后）：
前端代码：
各个页面都使用了<jsp:include/> 来进行引用，因此将边栏和侧栏分成了两个单独的.jsp，具体如下
引入：
<!-- 页面头部 -->
<jsp:include page="header.jsp"></jsp:include>
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<jsp:include page="aside.jsp"></jsp:include>
<!-- 导航侧栏 /-->
顶栏：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>校园餐厅</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>校园餐厅</b>后台管理系统</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img id="img1" src="${pageContext.request.contextPath}/img/user2-160x160.jpg" class="user-image"
alt="User Image">
<span class="hidden-xs"><sec:authentication property="name"/></span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img id="img2" src="${pageContext.request.contextPath}/img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p><sec:authentication property="name"/>
<small>最后登录 11:20AM</small>
</p>
</li>
<!-- Menu Body
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
</li>-->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a>
</div>
<div class="pull-right">
<a href="${pageContext.request.contextPath}/logout.do" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
侧栏：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img id="img3" src="${pageContext.request.contextPath}/img/user2-160x160.jpg" class="img-circle"
alt="User Image">
</div>
<div class="pull-left info">
<p><a id="asideNameLink" href="#"><sec:authentication property="name"/></a></p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- search form -->
<!--<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="搜索...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>-->
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a></li>
<!-- 菜单 -->
<li class="treeview">
<a href="#">
<i class="fa fa-cutlery"></i> <span>餐厅管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="canteen_list">
<a href="${pageContext.request.contextPath}/canteen/findAll.do?size=10&page=1">
<i class="fa fa-file-text-o"></i> 餐厅列表
<%-- <i class="fa fa-circle-o"></i> 餐厅列表--%>
</a>
</li>
<li id="canteenApply_list">
<a href="${pageContext.request.contextPath}/canteen/findApplyList.do?size=10&page=1">
<i class="fa fa-file-text-o"></i> 申请列表
<%-- <i class="fa fa-circle-o"></i> 餐厅列表--%>
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-cutlery"></i> <span>菜谱管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="menu_list">
<a href="${pageContext.request.contextPath}/menu/findAll.do?size=10&page=1">
<i class="fa fa-file-text-o"></i> 菜单列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-users"></i> <span>用户管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="user_list">
<a href="${pageContext.request.contextPath}/user/findAll.do?size=10&page=1">
<i class="fa fa-file-text-o"></i> 用户列表
</a>
</li>
<li id="user_add">
<a href="${pageContext.request.contextPath}/pages/userAdd.jsp">
<i class="fa fa-plus"></i> 新增用户
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-graduation-cap"></i> <span>角色管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="role_list">
<a href="${pageContext.request.contextPath}/role/findAll.do?size=10&page=1">
<i class="fa fa-file-text-o"></i> 角色列表
</a>
</li>
<li id="role_add">
<a href="${pageContext.request.contextPath}/pages/roleAdd.jsp">
<i class="fa fa-plus"></i> 新增角色
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-users"></i> <span>权限管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="permission_list">
<a href="${pageContext.request.contextPath}/permission/findAll.do?size=10&page=1">
<i class="fa fa-file-text-o"></i> 权限列表
</a>
</li>
<li id="permission_add">
<a href="${pageContext.request.contextPath}/pages/permissionAdd.jsp">
<i class="fa fa-plus"></i> 新增权限
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>后台通用页面</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="admin-login">
<a href="all-admin-login.html">
<i class="fa fa-circle-o"></i> 登录
</a>
</li>
<li id="admin-register">
<a href="all-admin-register.html">
<i class="fa fa-circle-o"></i> 注册
</a>
</li>
<li id="admin-404">
<a href="all-admin-404.html">
<i class="fa fa-circle-o"></i> 404页
</a>
</li>
<li id="admin-500">
<a href="all-admin-500.html">
<i class="fa fa-circle-o"></i> 500页
</a>
</li>
<li id="admin-blank">
<a href="all-admin-blank.html">
<i class="fa fa-circle-o"></i> 空白页
</a>
</li>
<li id="admin-datalist">
<a href="all-admin-datalist.html">
<i class="fa fa-circle-o"></i> 数据列表页
</a>
</li>
<li id="admin-dataform">
<a href="all-admin-dataform.html">
<i class="fa fa-circle-o"></i> 表单页
</a>
</li>
<li id="admin-profile">
<a href="all-admin-profile.html">
<i class="fa fa-circle-o"></i> 个人中心
</a>
</li>
<li id="admin-invoice">
<a href="all-admin-invoice.html">
<i class="fa fa-circle-o"></i> 发票
</a>
</li>
<li id="admin-invoice-print">
<a href="all-admin-invoice-print.html">
<i class="fa fa-circle-o"></i> 发票打印
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-pie-chart"></i> <span>图表Charts</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="charts-chartjs">
<a href="all-charts-chartjs.html">
<i class="fa fa-circle-o"></i> ChartJS
</a>
</li>
<li id="charts-morris">
<a href="all-charts-morris.html">
<i class="fa fa-circle-o"></i> Morris Charts
</a>
</li>
<li id="charts-flot">
<a href="all-charts-flot.html">
<i class="fa fa-circle-o"></i> Flot Charts
</a>
</li>
<li id="charts-inline">
<a href="all-charts-inline.html">
<i class="fa fa-circle-o"></i> Inline Charts
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i> <span>UI界面元素</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="elements-general">
<a href="all-elements-general.html">
<i class="fa fa-circle-o"></i> 标准 General
</a>
</li>
<li id="elements-icons">
<a href="all-elements-icons.html">
<i class="fa fa-circle-o"></i> 图标 Icons
</a>
</li>
<li id="elements-buttons">
<a href="all-elements-buttons.html">
<i class="fa fa-circle-o"></i> 按钮 Buttons
</a>
</li>
<li id="elements-sliders">
<a href="all-elements-sliders.html">
<i class="fa fa-circle-o"></i> 滑块 Sliders
</a>
</li>
<li id="elements-timeline">
<a href="all-elements-timeline.html">
<i class="fa fa-circle-o"></i> 时间线 Timeline
</a>
</li>
<li id="elements-modals">
<a href="all-elements-modals.html">
<i class="fa fa-circle-o"></i> 对话框样式 Modals
</a>
</li>
<li id="elements-widgets">
<a href="all-elements-widgets.html">
<i class="fa fa-circle-o"></i> 窗体小部件 widgets
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>表单 Forms</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="form-general">
<a href="all-form-general.html">
<i class="fa fa-circle-o"></i> 基础表单元素
</a>
</li>
<li id="form-advanced">
<a href="all-form-advanced.html">
<i class="fa fa-circle-o"></i> 高级表单元素
</a>
</li>
<li id="form-editors">
<a href="all-form-editors.html">
<i class="fa fa-circle-o"></i> 编辑器
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>表格 tables</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="tables-simple">
<a href="all-tables-simple.html">
<i class="fa fa-circle-o"></i> 简单表格
</a>
</li>
<li id="tables-data">
<a href="all-tables-data.html">
<i class="fa fa-circle-o"></i> 数据表格
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-cube"></i> <span>样例-订单管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="order-manage">
<a href="all-order-manage-list.html">
<i class="fa fa-circle-o"></i> 全部订单
</a>
</li>
<li id="order-cancel">
<a href="all-order-cancel-list.html">
<i class="fa fa-circle-o"></i> 退款
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-book"></i> <span>样例-游记管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="travellog-manage">
<a href="all-travellog-manage-list.html">
<i class="fa fa-circle-o"></i> 游记列表
</a>
</li>
<li id="travellog-review">
<a href="all-travellog-review-list.html">
<i class="fa fa-circle-o"></i> 游记点评
</a>
</li>
<li id="travellog-setting">
<a href="all-travellog-setting-edit.html">
<i class="fa fa-circle-o"></i> 游记设置
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-cogs"></i> <span>样例-系统管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting">
<a href="all-system-setting-edit.html">
<i class="fa fa-circle-o"></i> 系统设置
</a>
</li>
</ul>
</li>
<!-- 菜单 /-->
<li id="admin-documentation"><a href="documentation.html" target="_blank"><i class="fa fa-book"></i> <span>AdminLTE汉化文档</span></a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
// var flag = false;
$(document).ready(function () {
<%--$("button").click(function () {--%>
<%-- $.post("${pageContext.request.contextPath}/user/findLoginUser.do");--%>
<%--});--%>
<%--$.ajax({--%>
<%-- url: "${pageContext.request.contextPath}/user/checkLoginUser.do",--%>
<%-- type: "post",--%>
<%-- dataType: "json",--%>
<%-- success: function (result) {--%>
<%-- showImg(result);--%>
<%-- }--%>
<%--});--%>
var userSession = getUserSession();
if ($.isEmptyObject(userSession)) {
getLoginUser();
}else {
showImg(userSession);
}
// getLoginUser();
});
function getLoginUser() {
$.ajax({
url: "${pageContext.request.contextPath}/user/checkLoginUser.do",
type: "post",
dataType: "json",
success: function (result) {
showImg(result);
setUserSession(result);
}
});
}
function setUserSession(user) {
sessionStorage.clear();
window.sessionStorage.setItem("loginUserSession", JSON.stringify(user));
}
function getUserSession() {
var userSession = JSON.parse(window.sessionStorage.getItem("loginUserSession"));
return userSession;
}
function showImg(result) {
var img = result.url;
var userId = result.id;
<%--document.write('<img src="${pageContext.request.contextPath}' + img + '" class="img-circle" alt="User Image">')--%>
$("#img3").attr('src', '${pageContext.request.contextPath}' + img);
$("#img2").attr('src', '${pageContext.request.contextPath}' + img);
$("#img1").attr('src', '${pageContext.request.contextPath}' + img);
$("#asideNameLink").attr('href', '${pageContext.request.contextPath}/user/findById.do?id=' + userId);
}
</script>
<!-- 导航侧栏 /-->
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
