后台管理系统:首页

目录

首页的功能介绍:

一、网页设计

二、HTML代码

三、CSS代码

四、JS代码


 

本次项目为后台管理系统,在本系统内的第二个界面为首页框架,和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"
    }

})


所有的功能介绍在代码中已经进行注解,将三段代码进行对照观看可以搭建一个完整的登录界面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值