好文章需要耐心阅读…茶凡—Matrix

请添加图片描述

首先想要使用layui搭建一个这样简洁通用的后台管理模板，需要理解后台管理系统的结构。大致可以分为三部分。

🍕header 这里的header 不只是最上面的部分，可以理解为点击可以跳转路径的地方，例如右边的菜单栏和右上角的用户名按钮。

🍕content 这里就是我们点击按钮显示在中间的页面内容，这个content 页面通常就是根据我们自己业务来定义的，理论可以定义N个。

🍕footer 这里的footer 其实对于后台管理系统来说可有可无，不过有的喜欢把左边菜单和右上角的地方分开来。即左边的header，右上角是footer。

理解了后台管理系统的模板结构，就只需要把它们的公共地方写成模板，在content页面里面去引用他们就可以，随着页面的增加一一引用就好了。

1.1、header.html

注意

本文中采用的是 thymeleaf + springboot + java + layui 来创建的项目，如果单纯写html可能会有一些区别。

在这个地方在body标签里面定义header 需要声明这个 【th:fragment=“header”】告诉thymeleaf 这是一个header模板。在header 标签里面就写菜单相关的按钮。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
    <script type="text/javascript" th:inline="none" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
</head>
<body>
    <header th:fragment="header">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">i
                <div class="layui-logo layui-hide-xs layui-bg-black">茶凡_Matrix</div>
                <!-- 头部区域（可配合layui 已有的水平导航） 显示在左边-->
                <ul class="layui-nav layui-layout-left">
                    <!-- 移动端显示 -->
                    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                        <i class="layui-icon layui-icon-spread-left"></i>
                    </li>
                </ul>
                <!-- 显示在右边 -->
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                        <a href="javascript:;">
                            <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                            茶凡_Matrix
                        </a>
                        <!-- 设置登录退出的地方 -->
                        <dl class="layui-nav-child">
                            <dd><a href="/about">个人小屋</a></dd>
                            <dd><a href="">退出</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll "  >
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree " lay-filter="test">

                        <li class="layui-nav-item layui-nav-itemed">
                            <!-- 展开作用不加超链接-->
                            <a class="" href="javascript:;">系统管理</a>
                            <dl class="layui-nav-child">
                                <dd><a href="">用户信息</a></dd>
                                <dd><a href="">管理员信息</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <!-- 展开作用不加超链接-->
                            <a href="javascript:;">数据分析</a>
                            <dl class="layui-nav-child">
                                <dd><a href="">年级</a></dd>
                                <dd><a href="">班级</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>>
</body>
</html>
1.2、footer.html

在footer 里面其实是可有可无的，但是如果是做网站的话就非常由必要的，毕竟关于备案的相关重要信息的必须要的。这里就写个壳子在这里，具体使用否看大家自己的意愿。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<body>
    <footer th:fragment="footer">
        <p>底部部分</p>
    </footer>
</body>
</html>
1.3、content

这里说的content不是说这个页面叫做content.html哈，这个content 中文就是内容的意思，上面也介绍了content是一个总称，包含了多个页面，而这些页面的名称是自定义的，这里我就以 about.html 为例子吧。

about.html

在about.html 页面上需要引用 header.html 和 footer.html 两个页面来组成一个完整的后台页面，当创建新页面的时候同理这样操作。还有一点很重要在body 标签上要加上 【class=“layui-layout-body”】样式，加上它才表示这个页面是layui的中间content内容部分，不然点击后就会跳转到一个html网页上去，达不到想要的效果。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
    <script type="text/javascript" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
</head>

<body class="layui-layout-body">
    <!--头-->
    <!--在html的head元素中通过th:replace属性引入，值为模板的路径，
    不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
    <div th:replace="head :: header"></div>

    <!--主体内容部分-->
    <div class="layui-body" style="margin: 5%">
        <ul class="layui-timeline">
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月18日</h3>
                    <p>
                        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                    </p>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月16日</h3>
                    <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                    <ul>
                        <li>《登高》</li>
                        <li>《茅屋为秋风所破歌》</li>
                    </ul>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月15日</h3>
                    <p>
                        中国人民抗日战争胜利72周年
                        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                        <br>铭记、感恩
                        <br>所有为中华民族浴血奋战的英雄将士
                        <br>永垂不朽
                    </p>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">过去</div>
                </div>
            </li>
        </ul>
    </div>

    <!--底部内容部分-->
    <div th:replace="footer :: footer"></div>
</body>
</html>
1.4、效果

请添加图片描述

茶凡_Matrix仓亏地址：(CommuteRate: 通勤率后台初版 (gitee.com))

# layui # html # 前端
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport

avatar ViewDesign
cover

vue+element-ui

avatar ViewDesign

VUE 入门及应用 ( 五 ) ElementUI 组件

VUE 入门及应用 ( 五 ) ElementUI 组件

avatar ViewDesign