《大事件项目》之基于Ajax&Layui&git开发的简易后台管理页面之首页

本文链接：https://blog.csdn.net/szw2377132528/article/details/122642479

1. 首先还是准备好我们前期需要的文件夹

2. 然后接下来就是我们的index.html的代码部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <title>layout 管理系统大布局 - Layui</title>
        <!-- 导入layui样式表 -->
        <link rel="stylesheet" href="./assets/lib/layui/css/layui.css" />
        <!-- 导入字体图标样式表 -->
        <link rel="stylesheet" href="./assets/fonts/iconfont.css" />
        <!-- 导入自己的样式表 -->
        <link rel="stylesheet" href="./assets/css/index.css" />
    </head>
    <body>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo">
                    <img src="./assets/images/logo.png" alt="" />
                </div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:;" class="userinfo">
                            <img
                                src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                                class="layui-nav-img"
                            />
                            个人中心
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">基本资料</a></dd>
                            <dd><a href="">更换头像</a></dd>
                            <dd><a href="">重置密码</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                        <a href="javascript:;" id="btnLogout">
                            <span class="iconfont icon-tuichu"></span>
                            退出
                        </a>
                    </li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <div class="userinfo">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img" />
                        <!-- <span class="text-avatar">A</span> -->
                        <span id="welcome">欢迎 ***</span>
                    </div>
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                        <li class="layui-nav-item layui-this">
                            <a href="./home/dashboard.html" target="fm"
                                ><span class="iconfont icon-home"></span>首页</a
                            >
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;"
                                ><span class="iconfont icon-16"></span>文章管理</a
                            >
                            <dl class="layui-nav-child">
                                <dd>
                                    <a href="javascript:;"
                                        ><i class="layui-icon layui-icon-app"></i> 文章类别</a
                                    >
                                </dd>
                                <dd>
                                    <a href="javascript:;"
                                        ><i class="layui-icon layui-icon-app"></i> 文章列表</a
                                    >
                                </dd>
                                <dd>
                                    <a href="javascript:;"
                                        ><i class="layui-icon layui-icon-app"></i> 发表文章</a
                                    >
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;"
                                ><span class="iconfont icon-user"></span>个人中心</a
                            >
                            <dl class="layui-nav-child">
                                <dd>
                                    <a href="./user/user_info.html" target="fm"
                                        ><i class="layui-icon layui-icon-app"></i> 基本资料</a
                                    >
                                </dd>
                                <dd>
                                    <a href="javascript:;"
                                        ><i class="layui-icon layui-icon-app"></i> 更换头像</a
                                    >
                                </dd>
                                <dd>
                                    <a href="javascript:;"
                                        ><i class="layui-icon layui-icon-app"></i> 重置密码</a
                                    >
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="layui-body">
                <iframe src="./home/dashboard.html" frameborder="0" name="fm"></iframe>
            </div>

            <div class="layui-footer">
                <!-- 底部固定区域 -->
                @www.dashijian.com -后台管理平台
            </div>
        </div>
        <script src="./assets/lib/layui/layui.all.js"></script>
        <script src="./assets/lib/jquery.js"></script>
        <script src="./assets/js/baseAPI.js"></script>
        <script src="./assets/js/index.js"></script>
    </body>
</html>

2. 然后是我们的index.css的代码部分

.layui-footer {
    text-align: center;
    font-size: 12px;
}

.iconfont {
    margin-right: 8px;
}

.layui-icon {
    margin-right: 8px;
    margin-left: 20px;
}

iframe {
    width: 100%;
    height: 100%;
}

.layui-body {
    overflow: hidden;
}

a {
    transition: none !important;
}

.userinfo {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 12px;
    user-select: none;
}

.layui-side-scroll .userinfo {
    border-bottom: 1px solid #282b33;
}

.layui-nav-img {
    width: 40px;
    height: 40px;
}

.text-avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #009688;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    position: relative;
    top: 4px;
    margin-right: 10px;
}

3. 再然后就是我们的index.js的代码部分

/*
 * @Author: 孙大大
 * @Date: 2022-01-22 11:47:20
 * @LastEditTime: 2022-01-22 15:46:33
 * @FilePath: \assets\js\index.js
 */
$(function () {
    getUserInfo()

    // 绑定退出事件
    $('#btnLogout').on('click', function () {
        layer.confirm('确认退出登录吗？', { icon: 3, title: '提示' }, function (index) {
            //do something
            // 1. 清空本地缓存
            localStorage.removeItem('token')
            // 2.跳转回登录页
            location.href = 'login.html'

            layer.close(index)
        })
    })
})

function getUserInfo() {
    $.ajax({
        method: 'GET',
        url: '/my/userinfo',
        // headers: {
        //     Authorization: localStorage.getItem('token') || '',
        // },
        success: function (res) {
            console.log(res)
            if (res.code !== 0) {
                return layui.layer.msg('获取用户信息失败!')
            }

            // 渲染用户头像
            renderAvatar(res.data)
        },
        // complete: function (res) {
        //     // console.log('执行了回调')
        //     // console.log(res)
        //     // 在complete 回调函数中，可以使用res.responseJSON拿到响应回来的数据
        //     if (res.responseJSON.code === 1 && res.responseJSON.message === '身份认证失败！') {
        //         // 1.强制清空 tokoen
        //         localStorage.removeItem('token')
        //         // 2.强制跳转到登录页面
        //         location.href = 'login.html'
        //     }
        // },
    })
}

function renderAvatar(user) {
    // 获取用户的名称
    var name = user.nickname || user.username
    // 渲染欢迎文本
    $('#welcome').html('欢迎&nbsp;&nbsp;' + name)
    // 按需渲染用户头像
    if (user.user_pic !== null) {
        // 渲染头像图片
        $('.layui-nav-img').attr('src', user.user_pic).show()
        $('text-avatar').hide()
    } else {
        // 渲染文本头像
        $('.layui-nav-img').hide()
        var first = name[0].toUpperCase()
        $('.text-avatar').html(first).show()
    }
}

4. 然后更新了一下之前的baseAPI.js代码，下面是更新之后的代码

/*
 * @Author: 孙大大
 * @Date: 2022-01-21 17:11:40
 * @LastEditTime: 2022-01-22 15:55:20
 * @FilePath: \assets\js\baseAPI.js
 */
$.ajaxPrefilter(function (options) {
    // 在发起真正的ajax请求之前，统一请求的根路径
    options.url = 'http://www.baidu.top:3008' + options.url

    if (options.url.indexOf('/my/') !== -1) {
        options.headers = {
            Authorization: localStorage.getItem('token') || '',
        }
    }

    options.complete = function (res) {
        // console.log('执行了回调')
        // console.log(res)
        // 在complete 回调函数中，可以使用res.responseJSON拿到响应回来的数据
        if (res.responseJSON.code === 1 && res.responseJSON.message === '身份认证失败！') {
            // 1.强制清空 tokoen
            localStorage.removeItem('token')
            // 2.强制跳转到登录页面
            location.href = 'login.html'
        }
    }
})