目录
本次项目为后台管理系统，在本系统内的第二个界面为首页框架，和iframe窗体程序
首页的功能介绍：
作为项目首页，需要的大致内容为退出，快捷键的跳转，分类项目的跳转和实时变化，全局搜索功能
同时为了安全性需要检查是否为网址登录，具备拦截和退出的功能
一、网页设计
二、HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>homepage</title>
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/homepage.css">
</head>
<body>
<!-- 首页左侧的侧边栏 -->
<div class="sidebar">
<!-- 侧边栏上方的小方块样式 -->
<div class="sidebar-top" id="sidebar-top"></div>
<!-- 侧边栏内用户的简介 -->
<div class="sidebar-uesr">
<!-- 用户头像 -->
<div class="su-userimg" id="su-userimg"></div>
<div class="su-welcome">欢迎
<!-- 用户的名字 -->
<span id="su-username">uesr</span>
</div>
<!-- 用户权限 -->
<div class="su-power">power</div>
</div>
<!-- 在侧边栏内完成项目类别的分类和展开 -->
<!-- 下方两个按钮为两个主分类按钮 -->
<div class="sid-d1" id="sid-d1">首页</div>
<div class="sid-d2" id="sid-d2">文章管理</div>
<!-- 下方按钮为主分类下三个小分类按钮 -->
<div class="sidebar-middle" id="sidebar-middle">
<div class="sid-d3" id="sid-d3">文章列表</div>
<div class="sid-d4" id="sid-d4">发表文章</div>
<div class="sid-d5" id="sid-d5">文章类别管理</div>
</div>
<!-- 下方两个按钮为两个主分类按钮 -->
<div class="sid-d6" id="sid-d6">评论管理</div>
<div class="sid-d7" id="sid-d7">个人中心</div>
</div>
<!-- 这部分为页面右侧的主体界面 -->
<div class="mainContent">
<!-- 主体界面内的顶部栏，该栏目不随着iframe变化而变化 -->
<div class="main-top">
<!-- 顶部栏的搜索框 -->
<input type="text" class="mt-input" placeholder="请输入搜索内容">
<!-- 搜索框的小图标 -->
<div class="mt-serch"></div>
<!-- 顶部栏右侧的盒子 -->
<span class="mt-sp1">个人中心</span>
<div class="mtimg" id="mtimg"></div>
<span class="mt-sp2">退出</span>
</div>
<!-- 首页主体框架内的窗体程序，使用src调用 -->
<!-- 该部分为最主要的程序，改变其中的src来改变其中的内容，通过前面分类的js事件来选择改变 -->
<iframe src="./firstpage.html" class="main-iframe" id="iframe"></iframe>
</div>
</body>
<script src="./JS/jquery.min.js"></script>
<script src="./JS/move.js"></script>
<script src="./JS/homepage.js"></script>
</html>三、CSS代码
body{
display: flex;
font-size:16px
}
.sidebar
{
width: 200px;
height: 100vh;
background-color: #323745;
}
.mainContent
{
flex: 1;
background-color: #f2f3f5;
}
.main-top
{
height: 50px;
width: 100%;
background-color: white;
position: relative;
}
.mt-input
{
width: 180px;
height: 30px;
border-radius: 15px;
border: 1px solid #dddddd;
font-size: 16px;
padding-left: 20px;
position: absolute;
top: 50%;
margin-top: -15px;
left: 24px;
}
.mt-input:focus
{
outline: none;
}
.mt-serch
{
background-image: url(../images/homepage/搜索.png);
width: 18px;
height: 18px;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
margin-top: -9px;
left: 200px;
}
.mtimg
{
height: 36px;
width: 36px;
border-radius: 36px;
position: absolute;
top: 50%;
margin-top: -18px;
background-image: url(../images/homepage/user.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
right: 65px;
cursor: pointer;
}
.mt-sp1
{
position: absolute;
color: #999999;
right: 120px;
line-height: 50px;
font-size: 12px;
cursor: pointer;
}
.mt-sp2
{
position: absolute;
color: #999999;
right: 25px;
line-height: 50px;
font-size: 12px;
cursor: pointer;
}
.main-iframe
{
width: calc(100vw - 200px);
height: calc(100vh - 55px);
border: none;
}
.sidebar-top
{
width: 100%;
height: 50px;
background-color: #242732;
}
.sidebar-uesr
{
height: 70px;
width: 100%;
/* background-color: red; */
position: relative;
}
.su-userimg
{
height: 36px;
width: 36px;
border-radius: 36px;
position: absolute;
left: 28px;
top: 50%;
margin-top: -18px;
background-image: url(../images/homepage/user.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.su-welcome
{
position: absolute;
left: 80px;
top: 22px;
font-size: 12px;
color: white;
}
.su-power
{
position: absolute;
left: 80px;
top: 40px;
font-size: 12px;
color: #adafb5;
}
.sid-d1
{
background-color: #1378f0;
padding-left: 50px;
color: white;
width: 100%;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.sid-d2
{
padding-left: 50px;
color: white;
width: 100%;
height: 50px;
cursor: pointer;
line-height: 50px;
}.sid-d3
{
padding-left: 50px;
color: white;
width: 100%;
height: 50px;
background-color: #242732;
cursor: pointer;
line-height: 50px;
}.sid-d4
{
padding-left: 50px;
color: white;
width: 100%;
height: 50px;
background-color: #242732;
cursor: pointer;
line-height: 50px;
}.sid-d5
{
padding-left: 50px;
color: white;
width: 100%;
height: 50px;
background-color: #242732;
cursor: pointer;
line-height: 50px;
}.sid-d6
{
padding-left: 50px;
color: white;
width: 100%;
height: 50px;
cursor: pointer;
line-height: 50px;
}.sid-d7
{
padding-left: 50px;
color: white;
width: 100%;
height: 50px;
cursor: pointer;
line-height: 50px;
}
.sidebar-middle
{
display: none;
}
四、JS代码
//退出按钮退出到index.html
$('.mt-sp2').on('click', function () {
//直接跳转至登录界面
location.href = 'index.html';
//移除会话存储中的token值
sessionStorage.removeItem("token")
});
//个人中心按钮点击后跳转到个人中心
$('.mt-sp1').on('click', function () {
//修改窗体的地址
$("#iframe").attr("src", "./PSCT.html")
});
$(function () {
//识别下拉菜单的下拉情况
var down = false;
//下拉框点击事件
$("#sid-d2").on('click', function () {
//down=true，进入判断并下拉
if (!down) {
$("#sidebar-middle").slideDown(300)
down = true;
}
//down=false，进入判断并收起
else {
$("#sidebar-middle").slideUp(300)
down = false;
}
});
});
//点击首页按钮触发高亮并重置其他选项的颜色
$("#sid-d1").on("click", function () {
//点亮首页按钮，并且其他所有按钮重置颜色
$(this).css("background-color", "#1378f0").siblings().css("background-color", "#323745")
$("#sidebar-top").css("background-color", "#242732")
//下拉框内单独重置颜色
$("#sid-d5, #sid-d3, #sid-d4").css(
{
"background-color": "#242732",
color: "white"
}
)
//点击首页按钮，iframe替换至firstpage.html
$("#iframe").attr("src", "./firstpage.html")
})
$("#sid-d2").on("click", function () {
//点亮文章管理按钮，并且其他所有按钮重置颜色
$(this).css("background-color", "#1378f0").siblings().css("background-color", "#323745")
$("#sidebar-top").css("background-color", "#242732")
//下拉框内单独重置颜色
$("#sid-d5, #sid-d3, #sid-d4").css("background-color", "#242732")
})
$("#sid-d6").on("click", function () {
//点亮评论管理按钮，并且其他所有按钮重置颜色
$(this).css("background-color", "#1378f0").siblings().css("background-color", "#323745")
$("#sidebar-top").css("background-color", "#242732")
//下拉框内单独重置颜色
$("#sid-d5, #sid-d3, #sid-d4").css(
{
"background-color": "#242732",
color: "white"
}
)
//点击评论管理按钮，iframe替换至comment.html
$("#iframe").attr("src", "./comment.html")
})
$("#sid-d7").on("click", function () {
//点亮个人中心按钮，并且其他所有按钮重置颜色
$(this).css("background-color", "#1378f0").siblings().css("background-color", "#323745")
$("#sidebar-top").css("background-color", "#242732")
//下拉框内单独重置颜色
$("#sid-d5, #sid-d3, #sid-d4").css(
{
"background-color": "#242732",
color: "white"
}
)
//点击个人中心按钮，iframe替换至PSCT.html
$("#iframe").attr("src", "./PSCT.html")
})
//文章管理下的列表地址数组
var sidebarText = ["article.html", "publish.html", "ACM.html"]
//点击文章列表和其中按钮的事件，通过事件委托来确定点击
$("#sidebar-middle").on("click", "div", function () {
//修改所有样式为默认样式
$("#sid-d2").css("background-color", "#1378f0").siblings().css("background-color", "#323745")
$("#sidebar-top").css("background-color", "#242732")
//点亮该按钮为选中状态，并将其他按钮转为默认状态
$(this).css("color", "#ffcb91").siblings().css("color", "white")
//修改窗体内的地址为点击的地址
$("#iframe").attr("src", sidebarText[$(this).index()])
})
$(function () {
//判断sessionStorage中是否有token值
if (sessionStorage.getItem("token")) {
//获取用户信息
$.ajax({
url: "http://localhost:8080/api/v1/admin/user/info",
type: "get",
//写入token
headers: {
"Authorization": sessionStorage.getItem("token"),
},
//当请求成功时
success: function (res) {
console.log(res)
if (res.msg == "获取成功") {
$("#mtimg").css("background-image", "url(" + res.data.userPic + ")")
$("#su-userimg").css("background-image", "url(" + res.data.userPic + ")")
$("#su-username").html(res.data.nickname)
}
}
//请求失败时
, error: function (err) {
// console.log(err)
alert("登录信息过期，请重新登录")
location.href = "./index.html"
}
})
}
//判断sessionStorage中是否有token值，没有就跳转至index.html
else {
location.href = "./index.html"
}
})
所有的功能介绍在代码中已经进行注解，将三段代码进行对照观看可以搭建一个完整的登录界面
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
