layui实现后台管理系统界面：对示例代码改动几处即可轻松实现

最新推荐文章于 2026-05-03 09:32:43 发布

原创

最新推荐文章于 2026-05-03 09:32:43 发布 · 7.9k 阅读

标签

#LayUI

使用的是最新的layui2.5.6

1、UI效果

UI界面

2、代码

需要根据自己的项目，对下面代码中注释了TODO的地方进行修改。（当然，至于其他js/css文件也需要具体情况具体修改）
（下面的代码只是管理界面的架子，不包含右边的页面主体区域。）

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理系统</title>
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
</head>
<body class="layui-layout-body">

<!-- 顶部区域 -->
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">后台管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/user3.png" class="layui-nav-img">
                    小米
                </a>
                <dl class="layui-nav-child">

                    <dd>
                        <!--TODO -->
                        <!--需要修改为自己项目的部分：-->
                        <!--1、属性data-url（需要在右边选项卡中打开的页面的路径）  -->
                        <!--2、属性data-title（选项卡标题）-->
                        <!--3、属性data-id必须唯一，tab选项卡根据这个值进行切换-->
                        
                        <a href="#" data-url="profile" data-title="个人资料" data-id="44" class="site-demo-active"
                           data-type="tabAdd">
                            个人资料
                        </a>
                    </dd>

                    <dd>
                        <!--TODO -->
                        <!--需要修改为自己项目的部分：-->
                        <!--1、属性data-url（需要在右边选项卡中打开的页面的路径）  -->
                        <!--2、属性data-title（选项卡标题）-->
                        <!--3、属性data-id必须唯一，tab选项卡根据这个值进行切换-->
                     
                        <a href="#" data-url="password" data-title="修改密码" data-id="55" class="site-demo-active" data-type="tabAdd">
                            修改密码
                        </a>
                    </dd>

                </dl>
            </li>
            <li class="layui-nav-item">
                <!--TODO -->
                <!--可能需要修改路径-->
                <a href="/user/logout">退出</a>
            </li>
        </ul>
    </div>


    <!-- 左侧导航栏 -->