用户登录与退出 - (第十一讲)
视频讲解如下:
工程源码下载:GPS定位系统系列教程源码下载
1、功能修改
在上一节中,我们已经实现了用户登录功能,但是退出功能以及展示用户昵称功能也都还没实现,所以这里补充实现一下,两个功能也都比较简单
这里主要修改两个文件:
HomeController.cs:在页面加载时,读取用户信息,用于前端显示
Home\Index.cshtml:添加退出功能,以及展示用户昵称
HomeController.cs修改如下:
public IActionResult Index()
{
// 读取当前登录的用户信息
User user = HttpContext.Session.GetString("user").ToObject<User>();
if (user != null)
{
ViewData["user"] = user.NickName;
}
return View();
}
Home\Index.cshtml修改如下,在<script>中,新增如下代码:
/* 退出 */
$('#outuser').click(function () {
$.post('Login/OutUser', null, function (resJson) {
var res = JSON.parse(resJson);
if (!res.Success) {
alert("退出失败");
}
else {
window.location = 'Login';
}
});
});
最终代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GPS地图</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/ace.min.css" />
<link rel="stylesheet" href="font/css/font-awesome.min.css" />
<script charset="utf-8" src="js/jquery.min 1.11.3.js"></script>
<style>
.left a {
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.btn{
font-size: 14px;
}
</style>
</head>
<body>
<div style="margin: 10px;">
<span class="left">
<a href="javascript:void(0);" onclick="ToUrl('Home/map')" class="btn btn-xs btn-info"><i class="fa fa-map-o bigger-120"></i> 地图 </a>
<a href="javascript:void(0);" onclick="ToUrl('Home/tab')" class="btn btn-xs btn-info"><i class="fa fa-table bigger-120"></i> 报表 </a>
</span>
<span class="right">
<label style="margin-right: 10px;font-size: 18px;"> 您好 @ViewData["user"] </label>
<a href="javascript:void(0);" id="outuser" class="btn btn-xs btn-info"><i class="fa fa-sign-out bigger-120"></i> 退出 </a>
</span>
</div>
<div style="position: relative; width: 100%;height:100%;">
<iframe id="IframeId" src="Home/map" style="position: absolute;width: 100%;min-height:800px;" ></iframe>
</div>
</body>
</html>
<script>
function ToUrl(url) {
document.getElementById("IframeId").src=url;
}
/* 退出 */
$('#outuser').click(function () {
$.post('Login/OutUser', null, function (resJson) {
var res = JSON.parse(resJson);
if (!res.Success) {
alert("退出失败");
}
else {
window.location = 'Login';
}
});
});
</script>
2、运行演示